jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)
更新時間:2013年09月08日 14:53:44 作者:
最近做項(xiàng)目用到了jquery。在做的過程中走了很多彎路,不停的搜索??偨Y(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考
本人是一名小白,應(yīng)屆畢業(yè)生,以前沒用過jquery,最近做項(xiàng)目用到了jquery。在做的過程中走了很多彎路,不停的搜索。總結(jié)出了一些用法,供大家參考:
最基本的選擇器語法包括:id、class、標(biāo)簽、屬性,這和css選擇器是一致的。
ID選擇器要在ID前加#,比如要選擇一個ID為myDivID的div元素(<div id="myDivID"></div>)可以這樣寫:
$("#myDivID");
D是不能重復(fù)的,所以ID選擇器選出來的是一個jquery對象。
class選擇器要在class前加點(diǎn)(.),比如要選擇一個class為myInputClass的input元素(<input type="text" class="myInputClass"/>)可以這樣寫:
$(".myInputClass");
class是可以重復(fù)的,所以class選擇器選出來的可以是一類元素,即好多個元素,所以jquery選出來的是個數(shù)組,可以引用下標(biāo)來選擇每個元素:比如
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
這樣可以迭代出每個元素。
標(biāo)簽選擇器直接寫標(biāo)簽類型即可,比如要選擇一個段落p標(biāo)簽(<p></p>)即可這樣寫:
$("p");
標(biāo)簽選擇器選出來的也是一個數(shù)組,選出所有的p標(biāo)簽元素,也可以用上面的方法迭代出所有的元素。
屬性選擇器要在前面加方括號([]),比如要選擇含有name="xxName"的元素,可以這樣寫:
$("[xxName]");
這樣來選擇,選擇出的也是一個數(shù)組,因?yàn)閚ame是可以重復(fù)的。
ID選擇器可以精確的選出一個元素來,但在開發(fā)中我們可能更多的要選擇出一組元素,怎樣才能精確的選擇出我們想要的元素呢,其實(shí)幾種選擇器是可以混合使用的:
<div id="attrValueTab">
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="確定" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="取消" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
</div>
比如我們要選擇偶數(shù)個文本標(biāo)簽,即:寫著even的文本框。我們可以這樣來選擇:
首先選中這個div,然后再選中p,然后再選中type=“text”的文本框,最后再選中偶數(shù)個位置:
$("#attrValueTab p input[type='text']:even");
組合選擇在開發(fā)中是非常有用的??梢杂孟旅孢@種方法來選中被勾選的button或者是checkbox元素:
$("input[name='avDefValue_input']:checked");
最基本的選擇器語法包括:id、class、標(biāo)簽、屬性,這和css選擇器是一致的。
ID選擇器要在ID前加#,比如要選擇一個ID為myDivID的div元素(<div id="myDivID"></div>)可以這樣寫:
復(fù)制代碼 代碼如下:
$("#myDivID");
D是不能重復(fù)的,所以ID選擇器選出來的是一個jquery對象。
class選擇器要在class前加點(diǎn)(.),比如要選擇一個class為myInputClass的input元素(<input type="text" class="myInputClass"/>)可以這樣寫:
復(fù)制代碼 代碼如下:
$(".myInputClass");
class是可以重復(fù)的,所以class選擇器選出來的可以是一類元素,即好多個元素,所以jquery選出來的是個數(shù)組,可以引用下標(biāo)來選擇每個元素:比如
復(fù)制代碼 代碼如下:
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
這樣可以迭代出每個元素。
標(biāo)簽選擇器直接寫標(biāo)簽類型即可,比如要選擇一個段落p標(biāo)簽(<p></p>)即可這樣寫:
復(fù)制代碼 代碼如下:
$("p");
標(biāo)簽選擇器選出來的也是一個數(shù)組,選出所有的p標(biāo)簽元素,也可以用上面的方法迭代出所有的元素。
屬性選擇器要在前面加方括號([]),比如要選擇含有name="xxName"的元素,可以這樣寫:
復(fù)制代碼 代碼如下:
$("[xxName]");
這樣來選擇,選擇出的也是一個數(shù)組,因?yàn)閚ame是可以重復(fù)的。
ID選擇器可以精確的選出一個元素來,但在開發(fā)中我們可能更多的要選擇出一組元素,怎樣才能精確的選擇出我們想要的元素呢,其實(shí)幾種選擇器是可以混合使用的:
復(fù)制代碼 代碼如下:
<div id="attrValueTab">
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="確定" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="取消" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
</div>
比如我們要選擇偶數(shù)個文本標(biāo)簽,即:寫著even的文本框。我們可以這樣來選擇:
首先選中這個div,然后再選中p,然后再選中type=“text”的文本框,最后再選中偶數(shù)個位置:
復(fù)制代碼 代碼如下:
$("#attrValueTab p input[type='text']:even");
組合選擇在開發(fā)中是非常有用的??梢杂孟旅孢@種方法來選中被勾選的button或者是checkbox元素:
復(fù)制代碼 代碼如下:
$("input[name='avDefValue_input']:checked");
您可能感興趣的文章:
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
- jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
- Jquery 獲取指定標(biāo)簽的對象及屬性的設(shè)置與移除
- jQuery使用attr()方法同時設(shè)置多個屬性值用法實(shí)例
- jquery修改屬性值實(shí)例代碼(設(shè)置屬性值)
- jquery attr()設(shè)置和獲取屬性值實(shí)例教程
- jQuery 設(shè)置 CSS 屬性示例介紹
- jQuery 獲取/設(shè)置/刪除DOM元素的屬性以a元素為例
- jQuery元素屬性操作實(shí)例(設(shè)置、獲取及刪除元素屬性)
- 詳解jQuery獲取特殊屬性的值以及設(shè)置內(nèi)容
- jQuery HTML設(shè)置內(nèi)容和屬性操作實(shí)例分析
相關(guān)文章
鼠標(biāo)拖動實(shí)現(xiàn)DIV排序示例代碼
鼠標(biāo)拖動實(shí)現(xiàn)DIV排序的教程有很多,在本文將為大家詳細(xì)介紹個不錯的示例,對比傳統(tǒng)的排序,這是一個很不錯的嘗試2013-10-10
jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jQuery對val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對瀏覽器的區(qū)別,有默認(rèn)值的情況下,如果用val()賦值了,那么當(dāng)修改這個值得時候,google不能獲取最新的值,但是ie可以2014-09-09
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)呈現(xiàn)文字上下滑動變換的效果,涉及jQuery頁面元素樣式的動態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09
使用jquery庫實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了使用jquery庫實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02
使用BootStrap和Metroui設(shè)計(jì)的metro風(fēng)格微網(wǎng)站或手機(jī)app界面
今天使用bootstrap和metroui設(shè)計(jì)了一個metro風(fēng)格的移動app或者微信微網(wǎng)站的界面,非常不錯具有參考借鑒價值,感興趣的朋友可以參考下2016-10-10

