期末测试——JavaScript方式练习题-阿里云开发者社区

期末测试——JavaScript方式练习题

2024-02-06 52

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 期末测试——JavaScript方式练习题

练习目标：

技术简介：

js外部引入

顺序结构

jQuery Dom操作

JavaScrip循环技巧

JavaScrip数据操作

资源地址：

链接：https://pan.baidu.com/s/1VZMGTKj3Aq9Zn6mtee0egw

提取码：1111

关键字：

1、append()，像元素内添加

2、border-spacing，设置table的内边距与外边距，常设为border-spacing: 0 0

3、confirm()，JavaScript的确认函数

4、splice，删除集合元素操作，参数1是下标值，参数2删除数量

评分标准：

1、创建项目层级(5分)

2、正确引入jquery-3.4.1.min.js(5分)

3、正确引入info.js初始数据(5分)

4、正确引入自定义js文件(5分)

5、按照顺序结构正确引入3个js文件(5分)

6、数据初始化(5分)

7、创建初始化函数(5分)

8、清空body标签内容(5分)

9、创建带有id的table标签，设置边框的宽度为1，并通过jQuery的append函数添加到body标签中(5分)

10、根据table标签自定义id名称获取table标签的jQuery对象(5分)

11、通过append函数添加遍历的info.js中list变量的数据。(20分)

12、通过jQuery的dom操作为table标签添加宽度属性为100%与文字居中(5分)

13、通过jQuery的dom操作为table标签设置table的内外边距为0。(5分)

14、创建一个带参的delById函数，根据info.js中的数据格式进行正确接收数据。(5分)

15、通过confirm函数来判断是否删除操作，如果不删除则直接return停止(5分)

16、通过循环遍历info.js中的对象信息来判断选中的行，如果对应的信息匹配则删除当前行信息。(5分)

17、删除完成后需要再次调用into函数进行数据重新遍历。(5分)

1、创建项目层级(5分)

2、正确引入jquery-3.4.1.min.js(5分)

3、正确引入info.js初始数据(5分)

4、正确引入自定义js文件(5分)

5、按照顺序结构正确引入3个js文件(5分)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery数据处理</title>
  </head>
  <body>
    <!-- 2、引入jQuery.js -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- 3、引入提供的初始数据 -->
    <script src="js/info.js"></script>
    <!-- 4、自定义的js文件进行数据操作 -->
    <script src="js/index.js"></script>
  </body>
</html>

6、数据初始化(5分)

// 初始加载
init();

7、创建初始化函数(5分)

// 初始化函数
function init() {
}

8、清空body标签内容(5分)

$("body").html("");

9、创建带有id的table标签，设置边框的宽度为1，并通过jQuery的append函数添加到body标签中(5分)

$("body").append("<table id='show_table' border=1></table>");

10、根据table标签自定义id名称获取table标签的jQuery对象(5分)

$("#show_table")

11、通过append函数添加遍历的info.js中list变量的数据。(20分)

$("#show_table").append(function () {
  var info = "";
  list.forEach((el) => {
    info += "<tr>";
    info += "<td>" + el.id + "</td>";
    info += "<td>" + el.createDate + "</td>";
    info += "<td>" + el.userName + "</td>";
    info += "<td>" + el.sex + "</td>";
    info += "<td>" + el.introduce + "</td>";
    info += "<td>" + el.ctrl + "</td>";
    info += "</tr>";
  });
  return info;
});

12、通过jQuery的dom操作为table标签添加宽度属性为100%与文字居中(5分)

13、通过jQuery的dom操作为table标签设置table的内外边距为0。(5分)

$("#show_table").css({
  width: "100%",
  "text-align": "center",
  "border-spacing": "0 0",
});

14、创建一个带参的delById函数，根据info.js中的数据格式进行正确接收数据。(5分)

function delById(o) {
}

15、通过confirm函数来判断是否删除操作，如果不删除则直接return停止(5分)

if(!confirm('是否删除此行?')){
    return;
}

16、通过循环遍历info.js中的对象信息来判断选中的行，如果对应的信息匹配则删除当前行信息。(5分)

for (let i = 0; i < list.length; i++) {
    if(list[i].id==o){
        list.splice(i,1);
        break;
    }
}

17、删除完成后需要再次调用into函数进行数据重新遍历。(5分)

function delById(o) {
  if(!confirm('是否删除此行?')){
      return;
  }
  for (let i = 0; i < list.length; i++) {
      if(list[i].id==o){
          list.splice(i,1);
          break;
      }
  }
  init();//重新加载
}

完整代码示例：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery数据处理</title>
  </head>
  <body>
    <!-- 引入jQuery.js -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- 引入提供的初始数据 -->
    <script src="js/info.js"></script>
    <!-- 自定义的js文件进行数据操作 -->
    <script src="js/index.js"></script>
  </body>
</html>

index.js

// 初始加载
init();
// 初始化函数
function init() {
  $("body").html("");
  $("body").append("<table id='show_table' border=1></table>");
  $("#show_table").append(function () {
    var info = "";
    list.forEach((el) => {
      info += "<tr>";
      info += "<td>" + el.id + "</td>";
      info += "<td>" + el.createDate + "</td>";
      info += "<td>" + el.userName + "</td>";
      info += "<td>" + el.sex + "</td>";
      info += "<td>" + el.introduce + "</td>";
      info += "<td>" + el.ctrl + "</td>";
      info += "</tr>";
    });
    return info;
  });
  $("#show_table").css({
    width: "100%",
    "text-align": "center",
    "border-spacing": "0 0",
  });
}
function delById(o) {
  if(!confirm('是否删除此行?')){
      return;
  }
  for (let i = 0; i < list.length; i++) {
      if(list[i].id==o){
          list.splice(i,1);
          break;
      }
  }
  init();//重新加载
}

练习的时候自己多写点注释，方便记忆。