jquery 查找新建元素代碼
更新時間: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á)式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達(dá)式來完成。這個表達(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 查找對象
#id 返回值:Array<Element>#id
概述
根據(jù)給定的ID匹配一個元素。
如果選擇器中包含特殊字符,可以用兩個斜杠轉(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一個用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。示例描述:查找一個 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一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。示例描述:查找所有類是 "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概述將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器,并將匹配到的元素合并到一個結(jié)果內(nèi)。參數(shù)selector1Selector一個有效的選擇器selector2Selector另一個有效的選擇器selectorN (可選)Selector任意多個有效選擇器示例描述:找到匹配任意一個類的元素。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á)式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達(dá)式來完成。這個表達(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 查找對象
#id 返回值:Array<Element>#id
概述
根據(jù)給定的ID匹配一個元素。
如果選擇器中包含特殊字符,可以用兩個斜杠轉(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一個用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。示例描述:查找一個 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一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。示例描述:查找所有類是 "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概述將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器,并將匹配到的元素合并到一個結(jié)果內(nèi)。參數(shù)selector1Selector一個有效的選擇器selector2Selector另一個有效的選擇器selectorN (可選)Selector任意多個有效選擇器示例描述:找到匹配任意一個類的元素。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> ]
您可能感興趣的文章:
相關(guān)文章
實(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)航代碼附源碼下載,對百度百科右側(cè)導(dǎo)航代碼相關(guān)內(nèi)容感興趣的朋友可以參考下本文2015-11-11jquery和雅虎的yql服務(wù)實(shí)現(xiàn)天氣預(yù)報服務(wù)示例
本文介紹一個利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報功能,需要的朋友可以參考下2014-02-02jquery調(diào)整表格行tr上下順序?qū)嵗v解
這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗?,具有一定的參考價值,感興趣的朋友可以參考一下2016-01-01jQuery實(shí)現(xiàn)的隔行變色功能【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的隔行變色功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-02-02