使用jQuery獲取元素
- jQuery 選擇器允許您對 HTML 元素組或單個元素進(jìn)行操作疮绷。
- jQuery 選擇器基于元素的 id翰舌、類、類型冬骚、屬性椅贱、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器只冻，除此之外庇麦，它還有一些自定義的選擇器。
- jQuery 中所有選擇器都以美元符號開頭：$()喜德。
- jQuery為了方便使用者刻意和CSS選擇器使用相同的語法山橄，幾乎支持所有類型的CSS3選擇器，當(dāng)然也有一些其特定的選擇器
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素舍悯。
$("p") 選取 <p> 元素航棱。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素萌衬。
jQuery 屬性選擇器
jQuery 使用 XPath(XPath 是一門在 XML 文檔中查找信息的語言,XPath 用于在 XML 文檔中通過元素和屬性進(jìn)行導(dǎo)航饮醇。) 表達(dá)式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素秕豫。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素朴艰。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性呵晚。
$("p").css("background-color","red");
選擇器
基本，組合/層次選擇器.png
基本過濾選擇器.png
內(nèi)容沫屡，可視化饵隙，屬性過濾選擇器.png
子元素，表單元素選擇器.png
可以看出來基本上和css選擇器差不多沮脖，就感覺是在復(fù)習(xí)css選擇器一樣金矛，簡直不要太爽.
部分 api 的用法
除了使用選擇器jQuery還提供了一些方法幫助我們查找當(dāng)前元素相關(guān)元素
.eq(index), .get([index])
對于一個特定結(jié)果集，我們想獲取到指定index的jQuery對象勺届，可以使用eq方法
$('div').eq(3); 獲取結(jié)果集中的第四個jQuery對象
我們可以通過類數(shù)組下標(biāo)的獲取方式或者get方法獲取指定index的DOM對象驶俊，也就是我們說的jQuery對象轉(zhuǎn)DOM對象
$('div')[2];
$('div').eq(2);
get()不寫參數(shù)把所有對象轉(zhuǎn)為DOM對象返回
兄弟元素獲取
.next([selector]), .prev([selector])
next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器免姿，那么只有緊跟著的兄弟元素滿足選擇器時饼酿，才會返回此元素。prev正好相反胚膊，獲取元素之前的同輩元素
$("h2").next(); 返回 <h2> 的下一個同胞元素
.nextAll([selector]), .prevAll([selector])
nextAll獲得每個匹配元素集合中每個元素所有后面的同輩元素故俐，選擇性篩選的選擇器，prevAll與之相反紊婉，獲取元素前面的同輩元素
$("h2").nextAll(); 返回 <h2> 的所有跟隨的同胞元素
.siblings([selectors])
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器
$("h2").siblings(); 返回 <h2> 的所有同胞元素
也可以使用可選參數(shù)來過濾對同胞元素的搜索药版。
$("h2").siblings("p"); 返回屬于 <h2> 的同胞元素的所有 <p> 元素
nextUntil() , prevUntil() 方法
nextUntil() 方法返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。prevAll與之相反喻犁，獲取元素前面的同胞元素
$("h2").nextUntil("h6"); 返回 <h2> 的所有跟隨的同胞元素
父子元素獲取
children() 方法
返回被選元素的所有直接子元素槽片，選擇器選擇性篩選
該方法只會向下一級對 DOM 樹進(jìn)行遍歷。
$("div").children(); 返回每個 <div> 元素的所有直接子元素
也可以使用可選參數(shù)來過濾對子元素的搜索肢础。
$("div").children("p.1"); 返回類名為 "1" 的所有 <p> 元素还栓，并且它們是 <div> 的直接子元素
find() 方法
返回被選元素的后代元素，一路向下直到最后一個后代传轰。
$("div").find("span"); 返回屬于 <div> 后代的所有 <span> 元素
$("div").find("*"); 返回 <div> 的所有后代
parent() 方法
$("span").parent(); 返回每個 <span> 元素的的直接父元素
返回被選元素的直接父元素蝙云。
parents() 方法
返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)路召。
$("span").parents(); 返回所有 <span> 元素的所有祖先
也可以使用可選參數(shù)來過濾對祖先元素的搜索勃刨。
$("span").parents("ul"); 返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
parentsUntil() 方法
返回介于兩個給定元素之間的所有祖先元素股淡。
$("span").parentsUntil("div"); 返回介于 <span> 與 <div> 元素之間的所有祖先元素
篩選當(dāng)前結(jié)果集
first() 方法
返回被選元素的首個元素身隐。
$("div p").first(); 選取首個 <div> 元素內(nèi)部的第一個 <p> 元素
last() 方法
返回被選元素的最后一個元素.
$("div p").last(); 選擇最后一個 <div> 元素中的最后一個 <p> 元素
filter() 方法
允許您規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除唯灵，匹配的元素會被返回贾铝。參數(shù)可以是一個選擇器或者一個函數(shù)
$("p").filter(".url"); 返回帶有類名 "url" 的所有 <p> 元素
$('li').filter(function(index) {
return index % 3 == 2;
}) 返回下標(biāo)除以3余數(shù)為2的所有l(wèi)i元素
not() 方法
返回不匹配標(biāo)準(zhǔn)的所有元素。
$("p").not(".url"); 返回不帶有類名 "url" 的所有 <p> 元素
has() 方法
返回?fù)碛衅ヅ渲付ㄟx擇器的一個或多個元素在其內(nèi)的所有元素,如需選取擁有多個元素在其內(nèi)的元素，請使用逗號分隔垢揩。
$("p").has("span"); 返回?fù)碛幸粋€ <span> 元素在其內(nèi)的所有 <p> 元素
is() 方法
用于查看選擇的元素是否匹配選擇器玖绿。
if ($("p").parent().is("div")) {
alert("p 的父元素是 div");
} 如果 <p> 的父元素是 <div> 元素，彈出提示信息
總結(jié)
以上就是關(guān)于jQuery選擇器及部分 api 的用法叁巨，并給出具體實例斑匪，希望對有需要的人所有幫助。
