jQuery第二天学习总结—— jQuery 元素操作(遍历、创建、添加、删除)

最新推荐文章于 2022-04-30 12:31:24 发布

李穩钰

最新推荐文章于 2022-04-30 12:31:24 发布

阅读量284

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119820127

版权

本文详细介绍了jQuery中元素的遍历、创建、添加和删除操作，包括遍历元素的不同语法和应用场景，以及在购物车案例中的实际运用。重点讲述了如何使用each()、append()、prepend()、insertAfter()、insertBefore()、remove()等方法，并提供了相关案例代码进行演示。

摘要由CSDN通过智能技术生成

jQuery 元素操作

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

遍历元素

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

语法1

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

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

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。因为jquery对象是伪数组，里边存储的就是一个一个DOM对象，所以遍历出来的自然是DOM对象啦。

分析：

// each内部会调用 参数：回调函数。
// 在调用过程中，会将 实参传递进去到回调函数中
// 内部原理：each被jquery对象调用，each会循环jquery对象中的每个dom对象，每一次循环，执行一次回调函数
// 1.(function( 0,$("div")[0] ){}) ()
// 2.(function( 1,$("div")[1] ){}) ()
// 3.(function( 2,$("div")[2] ){}) ()
 $("div").each(function(i, domEle) {
   
     // 1 : 0 , 第一个div
     // 2 : 1 , 第二个div
     // ... 
 };
 //each内部源码：
  function each(callback){
   
     for(var i=0;i<this.length;i++){
   // this  就是 当前对象:  $("div")
          callback(i,this[i]);
    // for(var i=0;i<$("div").length;i++){
   
        // callback(i,$("div")[i]);
        
     }
  }

语法2

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

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

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

$.each()方法，$是一个对象，所以可以调用方法。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
     
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            console.log($("div"));
            // 0: div
            // 1: div
            // 2: div
            $("div").each(function(i, domEle) {
     
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle); // 使用jQuery方法需要转换 $(domEle)
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
     
            //     console.log(i);
            //     console.log(ele);
            // });
            
            //['a','b','c']
            $.each(arr, function(i, value) {
     
                console.log(i);
                console.log(value);
            });
            // 所有的遍历,循环, 都是遍历key和value
            $.each({
     
                name: "andy",
                age: 18
            }, function(key, value) {
     
                console.log(key); // 输出的是 name age 属性名
                console.log(value); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

</html>

总结：

如果遍历jquery对象，使用$('div').each( function(){} )
如果遍历普通对象，使用$.each(obj,function(){})

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

1.把所有文本框中的值相加就是总额数量，总计同理。
2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。

示例代码：

$(function() {
   
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
   
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
   
        // if(被选中的小的复选框的个数 === 3) {
   
        //     就要选中全选按钮
        // } else {
   
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
   
            $(".checkall").prop("checked", true);
        } else {
   
            $(".checkall").prop("checked", false);
        }

最低0.47元/天解锁文章

李穩钰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery第二天学习总结—— jQuery 元素操作(遍历、创建、添加、删除)

jQuery 元素操作jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。遍历元素jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。语法1$("div").each(function (index, domEle) { xxx; }) each()方法遍历匹配的每一个元素。主要用DOM处理。里面的回调函数有2个参数：index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquer
复制链接

扫一扫

专栏目录