基于JQuery 選擇器使用說明介紹

更新時間：2013年04月18日 16:16:50 作者：

本篇文章小編為大家介紹，基于JQuery 選擇器使用說明介紹。需要的朋友參考下

jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內(nèi)容對 HTML 元素進行選擇。

jQuery 元素選擇器：jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取 id="demo" 的第一個 <p> 元素。

jQuery 屬性選擇器：jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

選擇器實例

語法	描述
$(this)	當前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一個元素
$("ul li:first")	每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")	所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

獲取/設(shè)置內(nèi)容 - text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設(shè)置內(nèi)容：

text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
val() - 設(shè)置或返回表單字段的值
attr() - 設(shè)置事返回所選元素的屬性值

上面的四個 jQuery 方法：text()、html()、val() 以及 attr()，同樣擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個參數(shù)：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
 return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText;
 });
});

您可能感興趣的文章:

相關(guān)文章

jQuery+ajax讀取并解析XML文件的方法
這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對xml數(shù)據(jù)的遍歷與節(jié)點操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery刪除節(jié)點的三個方法即remove()detach()和empty()
jQuery提供了三種刪除節(jié)點的方法，即remove()，detach()和empty()，下面為大家詳細介紹下jQuery刪除節(jié)點三個方法的具體使用
2013-12-12
對于this和$(this)的個人理解
this指的是javascript對象而$(this)就是就jquery對象，不懂的朋友可以看看本文
2013-09-09
jQuery實現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jQuery內(nèi)部原理和實現(xiàn)方式淺析
這篇文章主要介紹了jQuery內(nèi)部原理和實現(xiàn)方式淺析,本文試圖從整體來闡述一下jQuery的內(nèi)部實現(xiàn),需要的朋友可以參考下
2015-02-02
jQuery中prepend()方法用法實例
這篇文章主要介紹了jQuery中prepend()方法用法,以實例形式較為詳細的分析了prepend()方法的功能、定義及使用技巧,并對比分析了與text()方法的不同之處,需要的朋友可以參考下
2014-12-12
jquery選擇器大全全面詳解jquery選擇器
jQuery選擇器使得獲得頁面元素變得更加容易、更加靈活，從而大大減輕了開發(fā)人員的壓力。如同蓋樓一樣，沒有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見,jQuery選擇器的重要性。當然想一下子掌握所有選擇器也是很困難的，這個得靠實踐和積累
2014-03-03
jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實用的技巧,需要的朋友可以參考下
2014-09-09
jQuery實現(xiàn)復(fù)選框成對選擇及對應(yīng)取消的方法
這篇文章主要介紹了jQuery實現(xiàn)復(fù)選框成對選擇及對應(yīng)取消的方法,實例分析了jQuery中change方法的使用技巧,需要的朋友可以參考下
2015-03-03
jQuery實現(xiàn)動態(tài)表單驗證時文本框抖動效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)表單驗證時文本框抖動效果,可實現(xiàn)表單元素左右晃動的抖動功能,涉及jquery中元素的匹配與動畫animate效果實現(xiàn)技巧,需要的朋友可以參考下
2015-08-08