五、jQuery 元素操作-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/106041138

本文详细介绍了jQuery元素操作，包括遍历元素、创建与添加元素、删除元素等核心功能，并通过购物车案例深入讲解了实际应用。学习如何利用jQuery简化DOM操作，提高网页开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

1、遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

  $('div').each(function (index, domEle) { xxx; })

注释
1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号，可以修改索引号名称，即修改index为其它名称；domEle是每个DOM元素对象，不是jQuery对象，也可以自己命名
3.此方法用于遍历 jQuery 对象中的每一项，所以想使用jQuery方法，需要给这个dom元素转换为jQuery对象：$(domEle)

示例

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function (i, s) {
                // 回调函数第一个参数一定是索引号，可以自己指定索引号号名称；回调函数第二个参数一定是dom元素对象，也可以自己命名
                $(s).css("color", arr[i]);
                sum += parseInt($(s).text());
            })
            // 遍历的索引号之和：0+1+2+3=6
            console.log(sum);
        })
    </script>
</body>

在这里插入图片描述

语法2

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

注释
1.$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
2.里面的函数有2个参数：index是每个元素的索引号，可以修改索引号名称，即修改index为其它名称;element遍历内容，也可以自己命名
3.此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

示例

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        $(function () {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）、
            // each() 方法遍历元素 
            var arr = ["red", "green", "blue", 'orange'];
            $.each($('div'), function (i, s) {
                console.log(i);
                console.log(s);
                $(s).css("color", arr[i]);
            })
            $.each({
                name: 'andy',
                age: 18
            }, function (i, s) {
                console.log(i);  //输出的是 name age 属性名
                console.log(s);  // 输出的是 andy 18 的属性值
            })
        })
    </script>
</body>

在这里插入图片描述

案例：购物车案例模块—计算总计和总额

2、创建、添加、删除

创建

语法

  $('<li></li>');  // 动态的创建一个<li>

内部添加

内部添加元素，生成之后，它们是父子关系

语法

  element.append('内容');  // 把内容放入匹配元素内部最后面，类似原生 appendChild
  element.prepend('内容');  // 把内容放入匹配元素内部最前面

外部添加

外部添加元素，生成之后，它们是兄弟关系

语法

  element.after('内容'); // 把内容放入目标元素后面
  element.before('内容'); // 把内容放入目标元素前面

删除元素

语法

  element.remove();  // 删除匹配的元素(本身)
  element.empty();  // 删除匹配的元素集合中所有的子节点
  element.html('');  // 清空匹配的元素内容
  // empty()和html('')作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容

其他方法请参详API

示例

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <script>
        $(function () {
            // 创建元素
            var li = $('<li>添加的li</li>');

            // 内部添加
            // 内部添加元素，生成之后，它们是父子关系 
            $('ul').append(li);  // 图1
            $('ul').prepend(li);  // 图2

            // 外部添加
            // 外部添加元素，生成之后，它们是兄弟关系 
            $('ul').after(li);  // 图3
            $('ul').before(li);  // 图4
        })
    </script>
</body>