基于JQuery 選擇器使用說(shuō)明介紹
jQuery 元素選擇器和屬性選擇器允許您通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì) HTML 元素進(jìn)行選擇。
jQuery 元素選擇器：jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取 id="demo" 的第一個(gè) <p> 元素。
jQuery 屬性選擇器 ：jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
選擇器實(shí)例
| 語(yǔ)法 | 描述 |
|---|---|
| $(this) | 當(dāng)前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的第一個(gè)元素 |
| $("ul li:first") | 每個(gè) <ul> 的第一個(gè) <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
獲取/設(shè)置內(nèi)容 - text()、html() 以及 val()
我們將使用前一章中的三個(gè)相同的方法來(lái)設(shè)置內(nèi)容：
- text() - 設(shè)置或返回所選元素的文本內(nèi)容
- html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- val() - 設(shè)置或返回表單字段的值
- attr() - 設(shè)置事返回所選元素的屬性值
上面的四個(gè) jQuery 方法：text()、html()、val() 以及 attr()，同樣擁有回調(diào)函數(shù)。回調(diào)函數(shù)有兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText;
});
});- jQuery Selector選擇器小結(jié)
- JQuery contains的選擇器
- jQuery溫習(xí)篇 強(qiáng)大的JQuery選擇器
- 跟著Jquery API學(xué)Jquery之一 選擇器
- jquery CSS選擇器筆記
- 鋒利的jQuery 要點(diǎn)歸納（一） jQuery選擇器
- jQuery 選擇器理解
- jQuery 樹形結(jié)構(gòu)的選擇器
- jQuery學(xué)習(xí)2 選擇器的使用說(shuō)明
- Jquery實(shí)戰(zhàn)_讀書筆記2 選擇器
- jQuery的強(qiáng)大選擇器小結(jié)
- jQuery Selectors(選擇器)的使用(九、表單對(duì)象屬性篇)
- jQuery Selectors(選擇器)的使用(七、子元素篇)
- jQuery Selectors(選擇器)的使用(六、屬性篇)
- jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
- jQuery Selectors(選擇器)的使用(二、層次篇)
- jQuery Selectors(選擇器)的使用(一、基本篇)
- Jquery選擇器 $實(shí)現(xiàn)原理
相關(guān)文章
這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對(duì)xml數(shù)據(jù)的遍歷與節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery刪除節(jié)點(diǎn)的三個(gè)方法即remove()detach()和empty()
jQuery提供了三種刪除節(jié)點(diǎn)的方法，即remove()，detach()和empty()，下面為大家詳細(xì)介紹下jQuery刪除節(jié)點(diǎn)三個(gè)方法的具體使用2013-12-12
this指的是javascript對(duì)象而$(this)就是就jquery對(duì)象，不懂的朋友可以看看本文2013-09-09
jQuery實(shí)現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
這篇文章主要介紹了jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析,本文試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn),需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery中prepend()方法用法,以實(shí)例形式較為詳細(xì)的分析了prepend()方法的功能、定義及使用技巧,并對(duì)比分析了與text()方法的不同之處,需要的朋友可以參考下2014-12-12
jQuery選擇器使得獲得頁(yè)面元素變得更加容易、更加靈活，從而大大減輕了開發(fā)人員的壓力。如同蓋樓一樣，沒有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見,jQuery選擇器的重要性。當(dāng)然想一下子掌握所有選擇器也是很困難的，這個(gè)得靠實(shí)踐和積累2014-03-03
jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09
jQuery實(shí)現(xiàn)復(fù)選框成對(duì)選擇及對(duì)應(yīng)取消的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框成對(duì)選擇及對(duì)應(yīng)取消的方法,實(shí)例分析了jQuery中change方法的使用技巧,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果,可實(shí)現(xiàn)表單元素左右晃動(dòng)的抖動(dòng)功能,涉及jquery中元素的匹配與動(dòng)畫animate效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08