萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery中find與each方法用法實例

Jquery中find與each方法用法實例

  這篇文章主要介紹了Jquery中find與each方法用法,實例分析了find與each方法的功能、定義與使用技巧,需要的朋友可以參考下

  本文實例講述了Jquery中find與each方法用法。分享給大家供大家參考。具體如下:

  一、find()方法

  jquery選擇器非常強大,利用css的命名規約,可以更快更方便的找出想要的元素。

  比如:

  1

  2

  3

  4$("#id")

  $("#"+"id")

  $(this)

  $(element)

  等等,只要靈活運用,就能爆發出強大的可造型。

  但是在實際使用中,仍然覺得有些不足。

  如果想要在某個元素下尋找特定的元素,僅僅依靠上面這個方法,就必須對 $("#id")獲取的元素進行遍歷,獲取其子元素。如此一來就顯得格外的繁瑣,代碼量也非常龐大。

  於是這就需要用到find()方法。

  1

  2

  3$("#id").find("#child");

  $("#id").find(".child");

  $("#id").find("input[type='image']");

  非常方便好用。

  除了上面的find()方法之外,還有一種查找子元素的方法。

  1$(".child",parent);

  這種方法與find()方法的結果是一樣的,也更加簡潔。

  我們舉個例子:

  1

  2

  3function(table){

  $("tr",table).css("background-color","red");

  }

  這種方法,方便代碼的重用,更符合閉包的寫法。

  二、each()方法

  有的時候經常會用到數組。在不知道each()方法前,如果碰到數組遍歷,我一般都是這麼寫的:

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10var arr = new Array();

  arr.push(1);

  arr.push(2);

  arr.push(3);

  for(var i =0;i

  {

  (function(m){

  console.log(this);

  })(i);

  }

  多麼繁瑣啊!!現在又了each(),生活從此變輕松。

  上面的這段代碼,只要一句話。

  1

  2

  3

  4

  5

  6

  7

  8var arr = new Array();

  arr.push(1);

  arr.push(2);

  arr.push(3);

  arr.each(function(){

  console.log(this);

  });

  使用each之後,結構立馬變得簡潔優雅起來。

 

  希望本文所述對大家的jQuery程序設計有所幫助。

 
copyright © 萬盛學電腦網 all rights reserved