Jquery中find與each方法用法實(shí)例
本文實(shí)例講述了Jquery中find與each方法用法。分享給大家供大家參考。具體如下:
一、find()方法
jquery選擇器非常強(qiáng)大,利用css的命名規(guī)約,可以更快更方便的找出想要的元素。
比如:
$("#id")
$("#"+"id")
$(this)
$(element)
等等,只要靈活運(yùn)用,就能爆發(fā)出強(qiáng)大的可造型。
但是在實(shí)際使用中,仍然覺(jué)得有些不足。
如果想要在某個(gè)元素下尋找特定的元素,僅僅依靠上面這個(gè)方法,就必須對(duì) $("#id")獲取的元素進(jìn)行遍歷,獲取其子元素。如此一來(lái)就顯得格外的繁瑣,代碼量也非常龐大。
于是這就需要用到find()方法。
$("#id").find("#child");
$("#id").find(".child");
$("#id").find("input[type='image']");
非常方便好用。
除了上面的find()方法之外,還有一種查找子元素的方法。
$(".child",parent);
這種方法與find()方法的結(jié)果是一樣的,也更加簡(jiǎn)潔。
我們舉個(gè)例子:
function(table){
$("tr",table).css("background-color","red");
}
這種方法,方便代碼的重用,更符合閉包的寫(xiě)法。
二、each()方法
有的時(shí)候經(jīng)常會(huì)用到數(shù)組。在不知道each()方法前,如果碰到數(shù)組遍歷,我一般都是這么寫(xiě)的:
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);
}
多么繁瑣?。?!現(xiàn)在又了each(),生活從此變輕松?! ?/p>
上面的這段代碼,只要一句話。
var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
arr.each(function(){
console.log(this);
});
使用each之后,結(jié)構(gòu)立馬變得簡(jiǎn)潔優(yōu)雅起來(lái)。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery中find()方法用法實(shí)例
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- 基于jquery中children()與find()的區(qū)別介紹
- jQuery初學(xué):find()方法及children方法的區(qū)別分析
- jQuery find和children方法使用
- Jquery find與filter函數(shù)區(qū)別 說(shuō)明
- JQuery 選擇器、過(guò)濾器介紹
- 使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
- Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
- Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子
- jquery選擇器排除某個(gè)DOM元素的方法(實(shí)例演示)
- jQuery中Find選擇器用法示例
相關(guān)文章
解析Jquery中如何把一段html代碼動(dòng)態(tài)寫(xiě)入到DIV中(實(shí)例說(shuō)明)
本篇文章是對(duì)在Jquery中把一段html代碼動(dòng)態(tài)寫(xiě)入到DIV中的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07
jquery引入外部CDN 加載失敗則引入本地jq庫(kù)
這篇文章主要介紹了網(wǎng)站加載第三方CDN,如果jQuery庫(kù)不成功則加載本地的jquery的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05
jquery ajax請(qǐng)求方式與提示用戶正在處理請(qǐng)稍等
為了提高用戶體驗(yàn)度,我們通常會(huì)給出 “正在處理,請(qǐng)稍等!”諸如此類的提示。我們可通過(guò)設(shè)置$.ajax()下的參數(shù)beforeSend()來(lái)實(shí)現(xiàn)2014-09-09
jQuery在html有效在jsp無(wú)效的原因及解決方法
最近用jQuery來(lái)寫(xiě)下拉框的選項(xiàng)值的左右移動(dòng),放到j(luò)sp里面就不能用了,經(jīng)過(guò)測(cè)試終于找到了解決方法在此與大家分享下2013-08-08
jQuery實(shí)現(xiàn)的一個(gè)tab切換效果內(nèi)部還嵌有切換
這篇文章主要介紹了jQuery實(shí)現(xiàn)的一個(gè)tab切換效果,它的特色是內(nèi)部還嵌有切換,需要的朋友可以參考下2014-08-08
jquery+Ajax實(shí)現(xiàn)簡(jiǎn)單分頁(yè)條效果
這篇文章主要為大家詳細(xì)介紹了jquery+Ajax實(shí)現(xiàn)簡(jiǎn)單分頁(yè)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06
一個(gè)超簡(jiǎn)單的jQuery回調(diào)函數(shù)例子(分享)
下面小編就為大家?guī)?lái)一篇一個(gè)超簡(jiǎn)單的jQuery回調(diào)函數(shù)例子(分享) 。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08

