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

    练习目标： 

    技术简介：

    1. js外部引入
    2. 顺序结构
    3. jQuery Dom操作
    4. JavaScrip循环技巧
    5. 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分)

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>jQuery数据处理title>
    8.   head>
    9.   <body>
    10.     
    11.     <script src="js/jquery-3.4.1.min.js">script>
    12.     
    13.     <script src="js/info.js">script>
    14.     
    15.     <script src="js/index.js">script>
    16.   body>
    17. html>

    6、数据初始化(5分)

    1. // 初始加载
    2. init();

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

    1. // 初始化函数
    2. function init() {
    3. }

    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分)

    1. $("#show_table").append(function () {
    2.   var info = "";
    3.   list.forEach((el) => {
    4.     info += "";
    5.     info += "" + el.id + "";
    6.     info += "" + el.createDate + "";
    7.     info += "" + el.userName + "";
    8.     info += "" + el.sex + "";
    9.     info += "" + el.introduce + "";
    10.     info += "" + el.ctrl + "";
    11.     info += "";
    12.   });
    13.   return info;
    14. });

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

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

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

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

    1. function delById(o) {
    2. }

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

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

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

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

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

    1. function delById(o) {
    2.   if(!confirm('是否删除此行?')){
    3.       return;
    4.   }
    5.   for (let i = 0; i < list.length; i++) {
    6.       if(list[i].id==o){
    7.           list.splice(i,1);
    8.           break;
    9.       }
    10.   }
    11.   init();//重新加载
    12. }

    完整代码示例：

    index.html

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>jQuery数据处理title>
    8.   head>
    9.   <body>
    10.     
    11.     <script src="js/jquery-3.4.1.min.js">script>
    12.     
    13.     <script src="js/info.js">script>
    14.     
    15.     <script src="js/index.js">script>
    16.   body>
    17. html>

    index.js

    1. // 初始加载
    2. init();
    3. // 初始化函数
    4. function init() {
    5.   $("body").html("");
    6.   $("body").append("
      "      );
    7.   $("#show_table").append(function () {
    8.     var info = "";
    9.     list.forEach((el) => {
    10.       info += "";
    11.       info += "" + el.id + "";
    12.       info += "" + el.createDate + "";
    13.       info += "" + el.userName + "";
    14.       info += "" + el.sex + "";
    15.       info += "" + el.introduce + "";
    16.       info += "" + el.ctrl + "";
    17.       info += "";
    18.     });
    19.     return info;
    20.   });
    21.   $("#show_table").css({
    22.     width: "100%",
    23.     "text-align": "center",
    24.     "border-spacing": "0 0",
    25.   });
    26. }
    27. function delById(o) {
    28.   if(!confirm('是否删除此行?')){
    29.       return;
    30.   }
    31.   for (let i = 0; i < list.length; i++) {
    32.       if(list[i].id==o){
    33.           list.splice(i,1);
    34.           break;
    35.       }
    36.   }
    37.   init();//重新加载
    38. }

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

  • 相关阅读:
    亚马逊云科技大语言模型下的六大创新应用功能
    [移动通讯]【Carrier Aggregation-4】【LTE-5】
    接口测试时遇到接口加密了该如何处理？
    Kubernetes专栏 | 安装部署（一）
    来自阿里十余年的老架构师自述：成为架构师你只差了一步
    【算法与数据结构】--高级算法和数据结构--哈希表和集合
    备忘录模式（Memento Pattern）
    卖通按关键字搜索aliexpress商品 API
    win10+cuda10.2+cudnn10.2+anaconda3+paddle-ocr
    Linux 基础入门（学习笔记通俗易懂版）
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/128162762