jquery 查找新建元素代碼
更新時(shí)間:2010年07月06日 22:34:12 作者:
好久不用jquery,了,有的函數(shù)都忘記了,這里看下jquery下如何查找元素的。
復(fù)習(xí)一下
//html
<div class="dv">
<ul>
<li>
<a href="xx.com">xx</a>
</li>
<li>
<a href="aa.com">aa</a>
</li>
<li>
<a href="bb.com">bb</a>
</li>
</ul>
<ul></ul>
</div>
//js
$('.dv').find('ul')->eq(0)->find('li')->each(function(i){
var obj = $(this).find('a')->eq(0);
$em = $('<em>');//新建em元素
$em.html(i);
$em.insertBefore(obj);//把新元素插到查找到的元素前面
});
真方便哈?。。。?
關(guān)于jQuery的find方法的疑問
find(expr)
搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達(dá)式來完成。這個(gè)表達(dá)式可以使用CSS1-3的選擇器語法來寫。
返回值
jQuery
參數(shù)
expr (String) :用于查找的表達(dá)式
示例
從所有的段落開始,進(jìn)一步搜索下面的span元素。與$("p span")相同。
HTML 代碼:
Hello, how are you?
jQuery 代碼:
$("p").find("span")
結(jié)果:
[ Hello ]
jquery 查詢|jquery 查找元素|jquery 查找對(duì)象
#id 返回值:Array<Element>#id
概述
根據(jù)給定的ID匹配一個(gè)元素。
如果選擇器中包含特殊字符,可以用兩個(gè)斜杠轉(zhuǎn)義。參見示例。
參數(shù)
idString
用于搜索的,通過元素的 id 屬性中給定的值
示例
描述:
查找 ID 為"myDiv"的元素。
HTML 代碼:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>jQuery 代碼:
$("#myDiv");結(jié)果:
[ <div id="myDiv">id="myDiv"</div> ]描述:
查找含有特殊字符的元素
HTML 代碼:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>jQuery 代碼:
#foo\\:bar
#foo\\[bar\\]
#foo\\.barelement 返回值:Array<Element(s)>element概述根據(jù)給定的元素名匹配所有元素參數(shù)elementString一個(gè)用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。示例描述:查找一個(gè) DIV 元素。HTML 代碼:<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>jQuery 代碼:$("div");結(jié)果:[ <div>DIV1</div>, <div>DIV2</div> ].class返回值:Array<Element(s)>.class概述根據(jù)給定的類匹配元素。參數(shù)classString一個(gè)用以搜索的類。一個(gè)元素可以有多個(gè)類,只要有一個(gè)符合就能被匹配到。示例描述:查找所有類是 "myClass" 的元素.HTML 代碼:<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>jQuery 代碼:$(".myClass");結(jié)果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] selector1,selector2,selectorN返回值:Array<Element(s)>selector1,selector2,selectorN概述將每一個(gè)選擇器匹配到的元素合并后一起返回。你可以指定任意多個(gè)選擇器,并將匹配到的元素合并到一個(gè)結(jié)果內(nèi)。參數(shù)selector1Selector一個(gè)有效的選擇器selector2Selector另一個(gè)有效的選擇器selectorN (可選)Selector任意多個(gè)有效選擇器示例描述:找到匹配任意一個(gè)類的元素。HTML 代碼:<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代碼:$("div,span,p.myClass")結(jié)果:[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
//html
<div class="dv">
<ul>
<li>
<a href="xx.com">xx</a>
</li>
<li>
<a href="aa.com">aa</a>
</li>
<li>
<a href="bb.com">bb</a>
</li>
</ul>
<ul></ul>
</div>
//js
$('.dv').find('ul')->eq(0)->find('li')->each(function(i){
var obj = $(this).find('a')->eq(0);
$em = $('<em>');//新建em元素
$em.html(i);
$em.insertBefore(obj);//把新元素插到查找到的元素前面
});
真方便哈?。。。?
關(guān)于jQuery的find方法的疑問
find(expr)
搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達(dá)式來完成。這個(gè)表達(dá)式可以使用CSS1-3的選擇器語法來寫。
返回值
jQuery
參數(shù)
expr (String) :用于查找的表達(dá)式
示例
從所有的段落開始,進(jìn)一步搜索下面的span元素。與$("p span")相同。
HTML 代碼:
Hello, how are you?
jQuery 代碼:
$("p").find("span")
結(jié)果:
[ Hello ]
jquery 查詢|jquery 查找元素|jquery 查找對(duì)象
#id 返回值:Array<Element>#id
概述
根據(jù)給定的ID匹配一個(gè)元素。
如果選擇器中包含特殊字符,可以用兩個(gè)斜杠轉(zhuǎn)義。參見示例。
參數(shù)
idString
用于搜索的,通過元素的 id 屬性中給定的值
示例
描述:
查找 ID 為"myDiv"的元素。
HTML 代碼:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>jQuery 代碼:
$("#myDiv");結(jié)果:
[ <div id="myDiv">id="myDiv"</div> ]描述:
查找含有特殊字符的元素
HTML 代碼:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>jQuery 代碼:
#foo\\:bar
#foo\\[bar\\]
#foo\\.barelement 返回值:Array<Element(s)>element概述根據(jù)給定的元素名匹配所有元素參數(shù)elementString一個(gè)用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。示例描述:查找一個(gè) DIV 元素。HTML 代碼:<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>jQuery 代碼:$("div");結(jié)果:[ <div>DIV1</div>, <div>DIV2</div> ].class返回值:Array<Element(s)>.class概述根據(jù)給定的類匹配元素。參數(shù)classString一個(gè)用以搜索的類。一個(gè)元素可以有多個(gè)類,只要有一個(gè)符合就能被匹配到。示例描述:查找所有類是 "myClass" 的元素.HTML 代碼:<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>jQuery 代碼:$(".myClass");結(jié)果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] selector1,selector2,selectorN返回值:Array<Element(s)>selector1,selector2,selectorN概述將每一個(gè)選擇器匹配到的元素合并后一起返回。你可以指定任意多個(gè)選擇器,并將匹配到的元素合并到一個(gè)結(jié)果內(nèi)。參數(shù)selector1Selector一個(gè)有效的選擇器selector2Selector另一個(gè)有效的選擇器selectorN (可選)Selector任意多個(gè)有效選擇器示例描述:找到匹配任意一個(gè)類的元素。HTML 代碼:<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代碼:$("div,span,p.myClass")結(jié)果:[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
您可能感興趣的文章:
- jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
- jQuery父級(jí)以及同級(jí)元素查找介紹
- 淺析jQuery中常用的元素查找方法總結(jié)
- JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
- JQuery查找子元素find()和遍歷集合each的方法總結(jié)
- jquery 查找iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼
- jQuery選擇器總結(jié)之常用元素查找方法
- JQuery元素快速查找與操作
- JQuery 在文檔中查找指定name的元素并移除的實(shí)現(xiàn)方法
- jQuery 查找元素操作實(shí)例小結(jié)
相關(guān)文章
使用jquery 簡(jiǎn)單實(shí)現(xiàn)下拉菜單
這里給大家展示了一例使用jQuery實(shí)現(xiàn)下拉菜單效果,代碼非常簡(jiǎn)潔,推薦給小伙伴們2015-01-01實(shí)現(xiàn)placeholder效果的方案匯總
由于placeholder是html5的新屬性,可想而知,僅支持html5的瀏覽器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。2015-06-06jquery easyUI中ajax異步校驗(yàn)用戶名
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名,感興趣的小伙伴們可以參考一下2016-08-08基于Jquery實(shí)現(xiàn)仿百度百科右側(cè)導(dǎo)航代碼附源碼下載
本篇文章給大家介紹基于jquery實(shí)現(xiàn)仿百度百科右側(cè)導(dǎo)航代碼附源碼下載,對(duì)百度百科右側(cè)導(dǎo)航代碼相關(guān)內(nèi)容感興趣的朋友可以參考下本文2015-11-11jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)服務(wù)示例
本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能,需要的朋友可以參考下2014-02-02jquery調(diào)整表格行tr上下順序?qū)嵗v解
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗?,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-01-01jQuery實(shí)現(xiàn)的隔行變色功能【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的隔行變色功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)、元素遍歷及屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-02-02