jquery選擇器、屬性設(shè)置用法經(jīng)驗總結(jié)
更新時間:2013年09月08日 14:53:44 作者:
最近做項目用到了jquery。在做的過程中走了很多彎路,不停的搜索??偨Y(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考
本人是一名小白,應(yīng)屆畢業(yè)生,以前沒用過jquery,最近做項目用到了jquery。在做的過程中走了很多彎路,不停的搜索??偨Y(jié)出了一些用法,供大家參考:
最基本的選擇器語法包括:id、class、標簽、屬性,這和css選擇器是一致的。
ID選擇器要在ID前加#,比如要選擇一個ID為myDivID的div元素(<div id="myDivID"></div>)可以這樣寫:
$("#myDivID");
D是不能重復(fù)的,所以ID選擇器選出來的是一個jquery對象。
class選擇器要在class前加點(.),比如要選擇一個class為myInputClass的input元素(<input type="text" class="myInputClass"/>)可以這樣寫:
$(".myInputClass");
class是可以重復(fù)的,所以class選擇器選出來的可以是一類元素,即好多個元素,所以jquery選出來的是個數(shù)組,可以引用下標來選擇每個元素:比如
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
這樣可以迭代出每個元素。
標簽選擇器直接寫標簽類型即可,比如要選擇一個段落p標簽(<p></p>)即可這樣寫:
$("p");
標簽選擇器選出來的也是一個數(shù)組,選出所有的p標簽元素,也可以用上面的方法迭代出所有的元素。
屬性選擇器要在前面加方括號([]),比如要選擇含有name="xxName"的元素,可以這樣寫:
$("[xxName]");
這樣來選擇,選擇出的也是一個數(shù)組,因為name是可以重復(fù)的。
ID選擇器可以精確的選出一個元素來,但在開發(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ù)個文本標簽,即:寫著even的文本框。我們可以這樣來選擇:
首先選中這個div,然后再選中p,然后再選中type=“text”的文本框,最后再選中偶數(shù)個位置:
$("#attrValueTab p input[type='text']:even");
組合選擇在開發(fā)中是非常有用的??梢杂孟旅孢@種方法來選中被勾選的button或者是checkbox元素:
$("input[name='avDefValue_input']:checked");
最基本的選擇器語法包括:id、class、標簽、屬性,這和css選擇器是一致的。
ID選擇器要在ID前加#,比如要選擇一個ID為myDivID的div元素(<div id="myDivID"></div>)可以這樣寫:
復(fù)制代碼 代碼如下:
$("#myDivID");
D是不能重復(fù)的,所以ID選擇器選出來的是一個jquery對象。
class選擇器要在class前加點(.),比如要選擇一個class為myInputClass的input元素(<input type="text" class="myInputClass"/>)可以這樣寫:
復(fù)制代碼 代碼如下:
$(".myInputClass");
class是可以重復(fù)的,所以class選擇器選出來的可以是一類元素,即好多個元素,所以jquery選出來的是個數(shù)組,可以引用下標來選擇每個元素:比如
復(fù)制代碼 代碼如下:
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
這樣可以迭代出每個元素。
標簽選擇器直接寫標簽類型即可,比如要選擇一個段落p標簽(<p></p>)即可這樣寫:
復(fù)制代碼 代碼如下:
$("p");
標簽選擇器選出來的也是一個數(shù)組,選出所有的p標簽元素,也可以用上面的方法迭代出所有的元素。
屬性選擇器要在前面加方括號([]),比如要選擇含有name="xxName"的元素,可以這樣寫:
復(fù)制代碼 代碼如下:
$("[xxName]");
這樣來選擇,選擇出的也是一個數(shù)組,因為name是可以重復(fù)的。
ID選擇器可以精確的選出一個元素來,但在開發(fā)中我們可能更多的要選擇出一組元素,怎樣才能精確的選擇出我們想要的元素呢,其實幾種選擇器是可以混合使用的:
復(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ù)個文本標簽,即:寫著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)容或文本的實現(xiàn)代碼
- jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
- Jquery 獲取指定標簽的對象及屬性的設(shè)置與移除
- jQuery使用attr()方法同時設(shè)置多個屬性值用法實例
- jquery修改屬性值實例代碼(設(shè)置屬性值)
- jquery attr()設(shè)置和獲取屬性值實例教程
- jQuery 設(shè)置 CSS 屬性示例介紹
- jQuery 獲取/設(shè)置/刪除DOM元素的屬性以a元素為例
- jQuery元素屬性操作實例(設(shè)置、獲取及刪除元素屬性)
- 詳解jQuery獲取特殊屬性的值以及設(shè)置內(nèi)容
- jQuery HTML設(shè)置內(nèi)容和屬性操作實例分析
相關(guān)文章
jquery+php實現(xiàn)滾動的數(shù)字特效
本文將結(jié)合實例使用jquery背景動畫插件,將數(shù)字作為背景圖片,定時讓背景圖片滾動起來,從而實現(xiàn)了滾動數(shù)字的效果,感興趣的小伙伴們可以參考一下2015-11-11Jquery 實現(xiàn)table樣式的設(shè)定
這篇文章主要介紹了Jquery 實現(xiàn)table樣式的設(shè)定方法的相關(guān)資料,需要的朋友可以參考下2015-01-01easyui messager alert 三秒后自動關(guān)閉提示的實例
下面小編就為大家?guī)硪黄猠asyui messager alert 三秒后自動關(guān)閉提示的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jquery實現(xiàn)兩個div中的元素相互拖動的方法分析
這篇文章主要介紹了jquery實現(xiàn)兩個div中的元素相互拖動的方法,結(jié)合實例形式分析了jQuery基于鼠標事件響應(yīng)的頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-04-04