基于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查找子元素find()和遍歷集合each的方法總結(jié)
下面小編就為大家?guī)?lái)一篇JQuery查找子元素find()和遍歷集合each的方法總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03老生常談jquery id選擇器和class選擇器的區(qū)別
下面小編就為大家?guī)?lái)一篇老生常談jquery id選擇器和class選擇器的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery ajax 中使用confirm ,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
我們做搜索框的時(shí)候,經(jīng)常需要這樣一個(gè)效果:搜索框默認(rèn)顯示一段提示文本,比如“輸入關(guān)鍵詞”,鼠標(biāo)點(diǎn)擊后,清空這段文本。鼠標(biāo)再次點(diǎn)擊別的地方,又要恢復(fù)這段文本2012-02-02jquery.validate表單驗(yàn)證插件使用方法解析
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jquery統(tǒng)計(jì)用戶選中的復(fù)選框的個(gè)數(shù)
使用選擇器得到所有被勾選的復(fù)選框元素的集合,然后通過(guò)判斷元素的個(gè)數(shù)來(lái)得到用戶勾選的個(gè)數(shù),需要的朋友可以參考下2014-06-06jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)換膚效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)換膚效果,結(jié)合完整實(shí)例形式分析了jQuery通過(guò)修改link標(biāo)簽的href屬性值實(shí)現(xiàn)換膚效果的相關(guān)技巧,需要的朋友可以參考下2016-09-09自己動(dòng)手寫的jquery分頁(yè)控件(非常簡(jiǎn)單實(shí)用)
最近接了一個(gè)項(xiàng)目,其中有需求要用到j(luò)query分頁(yè)控件,上網(wǎng)也找到了需要分頁(yè)控件,各種寫法各種用法,都是很復(fù)雜,最終決定自己動(dòng)手寫一個(gè)jquery分頁(yè)控件,全當(dāng)是練練手了2015-10-10