jquery的$(selector).each,$.each的区别

最近一直在研究JS,今天看到遍历模块的时候,看到了这个函数:

$(selector).each(function( ))

但是想想,这个函数和之前项目里面用到的遍历数据的函数不是同一个呀(项目里面用到的函数:$.each(dataresource,function(index,element))),于是,就好好研究了下,果然在JS里面有两个相似的函数,于是也就有了今天的主题:

1.$(selector).each(function( ))
2.$.each(dataresource,function(index,element))

接下来就对这两个函数做深入的探讨:

1.$(selector).each(function( ))

作用:在dom处理上面用的较多

示例

html部分文档

<ul id="each_id">

<li>Coffee</li>

<li>Soda</li>

<li>Milk</li>

</ul>

js遍历函数:

function traversalDOM(){

$("#each_id li").each(function(){

alert($(this).text())

});

}

输出结果:

2.$.each(dataresource,function(index,element))

作用:在数据处理上用的比较多

示例:

此处没有html代码,只有js代码,如下:

function traversalData(){

var jsonResourceList = ‘[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banan
a"},{"id":"4","tagName":"watermelon"}]‘;

if(jsonResourceList.length >0){

$.each(JSON.parse(jsonResourceList), function(index, obj) {

alert(obj.tagName);

});

}

}

输出结果:

3.最终结论:

在遍历DOM时,通常用$(selector).each(function( ))函数;

在遍历数据时,通常用$.each(dataresource,function(index,element))函数。

好了,就到这里吧,希望可以帮助到大家!

时间: 2024-10-06 21:15:00

jquery的$(selector).each,$.each的区别的相关文章

基于jquery中children()与find()的区别介绍

本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的

JQuery中after() append() appendTo()的区别

首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").after("<a>aa</a>") 结果是<span></span><a>aa</a> 不是 <span><a>aa</a></span> 而如果用 append() $(&q

jQuery:find()及children()的区别

1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一下级的子元素,即:immediate children. 3:find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4:children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jquery clone 与 clone(true) 的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery-1.4.3.js" type="text/javascript"></script> <s

Jquery中attr和prop的区别

jQuery之prop和attr的区别 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.at

jquery中attr和prop的区别分析

这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码代

jquery的innerHeight()和outerHeight()的区别

jquery的innerHeight()和outerHeight()的区别:本章节介绍一下这两个函数的区别,从名称上看都是用来获取高度的,当然也是有区别的,从名称上也能够对其有一个简单的了解,下面就通过代码实例介绍一下这两者的区别.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

JQuery :Not() Selector Example

It’s been a while since I wrote about JQuery. I am spending most of my time these days on backend technologies. Recently while working on a typical requirement on UI, I had to play with some tricky JQuery selectors. Typically, most of the times we us