jQuery元素操作

最新推荐文章于 2022-07-24 22:53:25 发布

Eli-sun

最新推荐文章于 2022-07-24 22:53:25 发布

阅读量136

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/vfjcgg/article/details/106016690

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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

语法1：
$(“div”).each(function(index,domEle){xxx;})
1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2.里面的回调函数有两个参数：index是每个元素的索引号，DomEle是每个DOM元素对象，就需要用到遍历。
3.所以要想使用jquery()方法，需要给这个DOM元素转换为jquery对象 $(domEle)

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

栗子：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* background-color: pink; */
        }
    </style>
</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'];
            $("div").each(function(index, domEle) {
                // 回调函数第一个参数一定是索引号 可以自己指定索引号名称
                console.log(index);
                // 回调函数第二个参数一定是 dom元素对象 dom对象没有css方法 也是自己命名
                console.log(domEle);
                $(domEle).css("color", arr[index]);
                sum += parseInt($(domEle).text());

            })
            console.log(sum);

            // 2.$.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each(arr, function(i, ele) {
                console.log(i);
                console.log(ele);
            })

            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是name,age 属性名
                console.log(ele); // 输出的是andy,18 属性值
            })
        })
    </script>
</body>

</html>