本文實(shí)例講述了Jquery中find與each方法用法。分享給大家供大家參考。具體如下:
一、find()方法
jquery選擇器非常強(qiáng)大,利用css的命名規(guī)約,可以更快更方便的找出想要的元素。
比如:
1
2
3
4
|
$( "#id" ) $( "#" + "id" ) $( this ) $(element) |
等等,只要靈活運(yùn)用,就能爆發(fā)出強(qiáng)大的可造型。
但是在實(shí)際使用中,仍然覺得有些不足。
如果想要在某個(gè)元素下尋找特定的元素,僅僅依靠上面這個(gè)方法,就必須對(duì) $("#id")獲取的元素進(jìn)行遍歷,獲取其子元素。如此一來就顯得格外的繁瑣,代碼量也非常龐大。
于是這就需要用到find()方法。
1
2
3
|
$( "#id" ).find( "#child" ); $( "#id" ).find( ".child" ); $( "#id" ).find( "input[type='image']" ); |
非常方便好用。
除了上面的find()方法之外,還有一種查找子元素的方法。
1
|
$( ".child" ,parent); |
這種方法與find()方法的結(jié)果是一樣的,也更加簡潔。
我們舉個(gè)例子:
1
2
3
|
function (table){ $( "tr" ,table).css( "background-color" , "red" ); } |
這種方法,方便代碼的重用,更符合閉包的寫法。
二、each()方法
有的時(shí)候經(jīng)常會(huì)用到數(shù)組。在不知道each()方法前,如果碰到數(shù)組遍歷,我一般都是這么寫的:
1
2
3
4
5
6
7
8
9
10
|
var arr = new Array(); arr.push(1); arr.push(2); arr.push(3); for ( var i =0;i<arr.length;i++) { ( function (m){ console.log( this ); })(i); } |
多么繁瑣?。。‖F(xiàn)在又了each(),生活從此變輕松。
上面的這段代碼,只要一句話。
1
2
3
4
5
6
7
8
|
var arr = new Array(); arr.push(1); arr.push(2); arr.push(3); arr.each( function (){ console.log( this ); }); |
使用each之后,結(jié)構(gòu)立馬變得簡潔優(yōu)雅起來。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。