返回
软件
分类

每一种相称的因素要实行的函数,jQuery对象自己被默以为目的对象

日期: 2019-11-17 15:18 浏览次数 : 151

.each(),.each

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

常用方法

用途

遍历一个jQuery对象,为每个匹配的元素执行一个函数。

each函数根据参数的类型实现的效果不完全一致:

.each(function(index.Element))

遍历一个jQuery对象,为每个匹配元素执行一个函数

$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

语法

.each(function)

1、遍历对象(有附加参数)

jQuery.each( collection, callback(indexInArray, valueOfElement) )

一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length

  • 必赢备用网址 ,1。其他对象通过其属性名进行迭代。

    var obj = {

    "flammable": "inflammable",
    "duh": "no duh"
    

    }; $.each( obj, function( key, value ) {

    alert( key + ": " + value );
    

    });

参数

function:类型为Function(Integer index,Element element),每个匹配的元素要执行的函数

可以通过让回调函数返回false来终止迭代。

复制代码 代码如下:

.map( callback(index, domElement) )

通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

$('div').map(function(i, ele){
    return this.id;
});
jQuery.extend([deep,] target [, object1 ] [, objectN ] )

1,当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。

2,如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:

var object = $.extend({}, object1, object2);

在默认情况下,通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数,那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

返回值

返回调用each方法的jQuery对象本身

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

.clone( [withDataAndEvents ] )

.clone()方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点

通常我们将页面上一个元素插入到DOM里另一个地方,它会被从老地方移走,类似剪切的效果

$('.hello').appendTo('.goodbye');

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是我们如果需要的是复制而不是剪切,我们可以像下面这样写代码:

$('.hello').clone().appendTo('.goodbye');

示例说明

假如我们页面上有如下Html代码:

<ul>
    <li>first</li>
    <li>second</li>
</ul>

 你可以通过以下代码来获取到li元素并让每个元素执行同一个函数:

var a = $("li").each(function (index) {
    console.log(index + ":" + $(this).text());
});
console.log(a); // a为$("li")

//  输出
//  0:first
//  1:second

 也可以通过以下代码,为每个li元素添加类样式"foo":

$("li").each(function () {
    $(this).addClass("foo");
});

// 以上代码等价于以下代码
$("li").addClass("foo");

 如果想停止迭代,可以让回到函数返回false:

$("li").each(function (index) {
    $(this).addClass("foo");

    return index > 0;
});

以上代码执行完,Html变为:

<ul>
    <li class="foo">first</li>
    <li>second</li>
</ul>

 从结果可以看出,当第1个li元素添加完类属性"foo"后,因为返回了false,所以迭代停止,导致第2个li元素未被添加类属性"foo" 

用途 遍历一个jQuery对象,为每个匹配的元素执行一个函数。 语法 .each(function) 参数 function:类型为Function(Integer index,Element ele...

2、遍历数组(有附件参数)

.index() / .index(selector)/ .index(element)

从给定集合中查找特定元素index

Search for a given element from among the matched elements.

1,没参数返回第一个元素index

2,如果参数是DOM对象或者jQuery对象,则返回参数在集合中的index

3,如果参数是选择器,返回第一个匹配元素index,没有找到返回-1

看个例子

var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

复制代码 代码如下:

.ready( handler )

当DOM准备就绪时,指定一个函数来执行。

虽然JavaScript提供了load事件,当页面呈现时用来执行这个事件,直到所有的东西,如图像已被完全接收前,此事件不会被触发。

在大多数情况下,只要DOM结构已完全加载时,脚本就可以运行。传递处理函数给.ready()方法,能保证DOM准备好后就执行这个函数,因此,这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

如果执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的代码放到 load 事件中。

下面两种语法全部是等价的:

  • $(document).ready(handler)

  • $(handler)
    我们经常这么使用

    $(function(){
      console.log('ready');
    });
    

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3、遍历对象(没有附加参数)

复制代码 代码如下:

$.each(Object, function(name, value) {
     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值
});

4、遍历数组(没有附加参数)

复制代码 代码如下:

$.each(Array, function(i, value) {
     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素
});

下面提一下jQuery的each方法的几种常用的用法

var arr = [ "one", "two", "three", "four"];  
 $.each(arr, function(){  
 alert(this);  
 });  
//上面这个each输出的结果分别为:one,two,three,four  

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  
$.each(arr1, function(i, item){  
 alert(item[0]);  
});  
//其实arr1为一个二维数组,item相当于取每一个一维数组,  
//item[0]相对于取每一个一维数组里的第一个值  
//所以上面这个each输出分别为:1 4 7  


var obj = { one:1, two:2, three:3, four:4};  
$.each(obj, function(key, val) {  
 alert(obj[key]);    
});  
//这个each就有更厉害了,能循环每一个属性  
//输出结果为:1 2 3 4 

JQuery中的each函数在1.3.2的官方文档中的描述如下:

**each(callback)

**以每一个匹配的元素作为上下文来执行一个函数。

意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

而后面的callback 则是回调函数,指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

复制代码 代码如下:

<img/><img/>jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
当然,在遍历元素的时候,jquery是允许自定义跳出的,请看示例代码:你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:

复制代码 代码如下:

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

jQuery 代码:

复制代码 代码如下:

$("button").click(function(){
$("div").each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

或者这么写:

复制代码 代码如下:

$("button").click(function(){
$("div").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

图解:
必赢备用网址 1

each() 方法规定为每个匹配元素规定运行的函数。

提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素(也可使用 "this" 选择器

实例
输出每个 li 元素的文本:

复制代码 代码如下:

$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

实例
obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

复制代码 代码如下:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
}
}
return obj;
}

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。

那怎么跳出each呢
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错
SyntaxError: unlabeled break must be inside loop or switch
经查,应该用一个
在回调函数里return false即可,大多数jq的方法都是如此的

复制代码 代码如下:

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

您可能感兴趣的文章:

  • jQuery.Autocomplete实现自动完成功能(详解)
  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备
  • jquery 如何动态添加、删除class样式方法介绍
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • jQuery EasyUI API 中文文档 - DataGrid数据表格
  • JQuery触发radio或checkbox的change事件
  • jquery ajax提交表单数据的两种方式
  • jquery中获取id值方法小结
  • jQuery EasyUI API 中文文档 - ComboBox组合框
  • 手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效