• jQuery常用API--元素操作

    元素操作主要是遍历、创建、添加、删除元素等。

    1.遍历元素

    jQuery 虽然有隐式迭代，但它是对同一类元素进行同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。

    1.1 语法1

    $(element).each(fuction(index,domEle){  xxx  }) 

    ① each()方法遍历匹配的每一个元素。主要用DOM处理。
    ② 里面的回调函数有2个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
    ③ 要想使用jQuery方法，需要给这个dom元素转换为jQuery对象，即$(domEle)

    1.2 语法2

    $.each(object , (fuction(index,element) {  xxx  }) 

    ① $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象等。
    ② 里面的回调函数有2个参数：index是每个元素的索引号，element表示每个元素（内容）

    1.3 代码体验

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <body>
    4.     <!-- HTML结构 -->
    5.     <div>1</div>
    6.     <div>2</div>
    7.     <div>3</div>
    8.     <!-- js 代码 -->
    9.     <script>
    10.         $(function() {
    11.             // 1. 如果针对同一类元素做相同的操作，直接使用隐式迭代即可
    12.             $('div').css('color', 'red');
    13.  
    14.             // 2. 如果针对同一类元素做不同操作，需要使用遍历元素（类似于for）
    15.             // (1) each() 方法遍历元素
    16.             let arr = ['red', 'blue', 'green']
    17.             $('div').each(function(index, item) {
    18.                 // 回调函数的第一个参数一定是索引号
    19.                 console.log(index);
    20.                 // 回调函数第二个参数一定是 dom元素对象
    21.                 console.log(item);
    22.                 // 要想给每个div添加不同的字体颜色，则需要借助数组存储颜色
    23.                 // 特别注意，这里的item是个dom元素，而dom元素无法使用jquery方法，故要转换
    24.                 $(item).css('color', arr[index]);
    25.             });
    26.             // (2) $.each() 方法遍历元素，主要用于遍历数据，处理数据
    27.             // 循环数组arr
    28.             $.each(arr, function(index, item) {
    29.                 // 如果循环数组，回调函数的第一个参数是索引号
    30.                 console.log(index);
    31.                 // 如果循环数组，回调函数的第二个参数是每一项元素
    32.                 console.log(item);
    33.             });
    34.             // 循环对象
    35.             let obj = {
    36.                 name: "张三",
    37.                 age: 22,
    38.                 sex: "男"
    39.             };
    40.             // 回调函数中的参数可以自定义名称
    41.             $.each(obj, function(i, item) {
    42.                 // 如果循环对象，回调函数的第一个参数是属性名
    43.                 console.log(i);
    44.                 // 如果循环对象，回调函数的第二个参数是属性值
    45.                 console.log(item);
    46.             })
    47.         })
    48.     </script>
    49. </body>

     这两种方法都可以遍历元素，但是如果要遍历数组和对象，推荐使用$.each()方法。遍历DOM元素，则推荐使用each()方法。

    2. 创建、添加、删除元素

    2.1 创建元素

    语法：$("<li></li>")          // 动态创建一个<li>元素

    2.2 添加元素

    （1）内部添加

    ①  element.append('内容')           // 把内容放入匹配元素内部的最后面，类似于原生的appendChild；

    ②  element.prepend('内容')         // 把内容放入匹配元素内部的最前面

    （2）外部添加

    ①  element.after('内容')          // 把内容放入目标元素的后面

    ②  element.before('内容')       // 把内容放入目标元素的前面

    注意点：

    ① 内部添加元素，生成之后，它们是父子关系
    ② 外部添加元素，生成之后，它们是兄弟关系

    2.3 删除元素

    ①  element.remove();   // 可以删除匹配的元素（本身）

    ②  element.empty();     // 可以删除匹配元素里面的所有子节点，但是自己还存在

    ③  element.html("");     // 设置元素的html()值为空，则可以删除匹配元素里面的子节点

    2.4 代码体验

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <body>
    4.     <!-- HTML结构 -->
    5.     <ul>
    6.         <li>原先存在的li</li>
    7.     </ul>
    8.     <div>原先存在的div</div>
    9.     <!-- js代码 -->
    10.     <script>
    11.         // 1. 创建元素
    12.         let li = $('<li>我是后来创建的li</li>');
    13.         let div = $('<div>我是后来添加的</div>');
    14.         // 2. 添加元素
    15.         // （1）内部添加
    16.         // $('ul').append(li); // 添加到ul的内部，并且放到内容的最后面，它们是父子关系
    17.         $('ul').prepend(li); // 添加到ul的内部，并且放到内容的最前面，它们是父子关系
    18.         // （2）外部添加
    19.         // $('div').before(div); // 外部添加，放到原div的前面，它们是兄弟关系
    20.         $('div').after(div); // 外部添加，放到原div的前面，它们是兄弟关系
    21.         // (3) 删除元素
    22.         // $('ul').remove();   // ul和li都被删除
    23.         // $('ul').empty();  // ul还在，但是子节点li被删除了
    24.         $('ul').html("");  // 一样ul还在，但是子节点li被删除了
    25.     </script>
    26. </body>

    注意：内外部添加的区别，主要是节点关系上的区别。删除元素的3种不同方式的区别也需要注意，尤其第一种是包含自身节点也被删除了。

  • 相关阅读:
    Dubbo协议详解
    SWMM排水管网水力、水质建模及在海绵城市与水环境保护中的应用
    CISSP学习笔记：管理安全运营
    Langchain-Chatchat项目：1-整体介绍
    知识点滴 - 英语词汇
    单例设计模式的三种实现与比较
    【c++随笔08】可变参数——va_list、va_start、va_end、va_arg
    摆动序列【贪心4】
    瑞吉外卖项目 基于spring Boot+mybatis-plus开发 超详细笔记，有源码链接
    【C语言基础】那些你可能不知道的C语言“潜规则”
  • 原文地址：https://blog.csdn.net/JJ_Smilewang/article/details/125607557