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 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<body>
    <!-- HTML结构 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // 1. 如果针对同一类元素做相同的操作，直接使用隐式迭代即可
            $('div').css('color', 'red');

            // 2. 如果针对同一类元素做不同操作，需要使用遍历元素（类似于for）
            // (1) each() 方法遍历元素
            let arr = ['red', 'blue', 'green']
            $('div').each(function(index, item) {
                // 回调函数的第一个参数一定是索引号
                console.log(index);
                // 回调函数第二个参数一定是 dom元素对象
                console.log(item);
                // 要想给每个div添加不同的字体颜色，则需要借助数组存储颜色
                // 特别注意，这里的item是个dom元素，而dom元素无法使用jquery方法，故要转换
                $(item).css('color', arr[index]);
            });
            // (2) $.each() 方法遍历元素，主要用于遍历数据，处理数据
            // 循环数组arr
            $.each(arr, function(index, item) {
                // 如果循环数组，回调函数的第一个参数是索引号
                console.log(index);
                // 如果循环数组，回调函数的第二个参数是每一项元素
                console.log(item);
            });
            // 循环对象
            let obj = {
                name: "张三",
                age: 22,
                sex: "男"
            };
            // 回调函数中的参数可以自定义名称
            $.each(obj, function(i, item) {
                // 如果循环对象，回调函数的第一个参数是属性名
                console.log(i);
                // 如果循环对象，回调函数的第二个参数是属性值
                console.log(item);
            })
        })
    </script>
</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 代码体验

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

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