jQuery的each之间的区别

最新推荐文章于 2021-02-28 07:24:14 发布

你过来啊zzz

最新推荐文章于 2021-02-28 07:24:14 发布

阅读量144

点赞数

文章标签： jquery js javascript

本文链接：https://blog.csdn.net/Depressione/article/details/108697407

版权

jQuery的each之间的区别

$().each(callback)
$.each(object,[callback])

$().each(callback)

遍历方法，不过被遍历的需要是被jQuery封装过之后jQuery对象，为每个遍历过的元素执行回调函数

其中callback的参数为callback(index,domEle)

index：为每个遍历的元素的索引值
domEle：为每个遍历的dom对象

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $('p').each(function (index, domEle) {
        console.log("我是第" + index + "个：", domEle)
    })
</script>

效果如下：

在这里插入图片描述

由此可知这个方便遍历出来的为Dom对象，那么在此次遍历中，关键字this表示的也是Dom元素。如果遍历中，你不想要Dom对象，而是想获得jQuery对象的话，使用$(this)或$(domEle)

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $('p').each(function (index, domEle) {
        $(this).css({
            "color": "#ff0011",
            "background": "blue"
        });
    });

效果如下：

在这里插入图片描述

$.each(object,[callback])

通用遍历方法，可用于遍历对象和数组。此方法可以遍历任何对象。回调函数的第一个参数为遍历的对象或数组的每个元素的索引，第二个参数为遍历的每个元素内容。

$.each(obj,function(index,value))

obj：为要遍历的任意对象
回调函数
- index：为遍历对象中的每个元素的索引值
- value：为遍历对象中的每个元素

var list = [1, 1, 2, 3, 4, 5]

$.each(list, function (index, value) {
    console.log("我是第" + index + "个索引,我叫" + value)
})

效果如下：

在这里插入图片描述

如果要遍历的对象作为集合使用，那么回调函数传入的参数又有改变

$.each(obj,function(key,value))

obj：为要遍历的任意对象(此时对象的内容要为键值对)
回调函数
- key：为遍历对象中的每个键值对中的键
- value：为遍历对象中每个键值对中对应键的值

var dic = {
    "name": "小明",
    "age": 10
}
$.each(dic, function (key, value) {
    console.log(key + ":" + value);
});

在这里插入图片描述

如果传入的对象为jQuery包装过的对象或者Dom对象的话，参数所对应的又发生了变化

$.each(obj,function(index,value))

obj：为传入的对象（此时为传入的jQuery对象或者Dom对象）
回调函数
- index：为对象中每个元素的索引值
- value：为对象中每个元素（此时每个元素为Dom对象）

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $.each($('p'), function (index, value) {
        console.log(index + ":", value);
    });
    var Ps = document.getElementsByTagName('p')
    $.each(Ps, function (index, value) {
        console.log(index + ":", value);
    });
</script>

效果如下：

在这里插入图片描述

你过来啊zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的each之间的区别

jQuery的each之间的区别$().each(callback)$.each(object,[callback])$().each(callback)遍历方法，不过被遍历的需要是被jQuery封装过之后jQuery对象，为每个遍历过的元素执行回调函数其中callback的参数为callback(index,domEle)index：为每个遍历的元素的索引值domEle：为每个遍历的dom对象<body> <p>我是1</p> &
复制链接

扫一扫