屬性選擇E[attr]:$("[title]").click()... $("div[title]").click()....
選擇所有元素内 屬性帶有title的元素
即:<li class="aaaa" title="ttt">li-1</li>
選擇所有div标簽(指定标簽)下的所有帶title的元素
即:<div class="aaaa" title="ttt">li-1</div>
屬性值選擇E[@attr=val]
$("div[title='ttt']").click().....
選擇div下所有title屬性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>
如果是 $("[title='ttt']").click().....
所有元素下屬性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
屬性值開始字母選擇E[attr^=val]
$("div[title^='t']").click().....
所有div元素下所有屬性title值是以t為開頭的元素
屬性值結尾字母選擇E[@attr$=val]
$("div[title$='t']").click()................
所有div元素下所有屬性title值是以t為結尾的元素
屬性值包含字母選擇E[@attr*=val]
$("div[title*='t']").click().......
所有div元素下所有屬性title值是包含t的所有元素
多個屬性選擇E[attr=val][attr=val]
$("div[title='ttt'][class='aaaa']").click().......
所有div元素下所有屬性title值是等于ttt并且屬性class等于aaaa的元素
擷取父級元素:
parent([expr]):
擷取指定元素的所有父級元素
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
1 <div id="par_div">
2 <a id="href_fir" href="#">href_fir</a>
3 <a id="href_sec" href="#">href_sec</a>
4 <a id="href_thr" href="#">href_thr</a></div>
5 <span id="par_span">
6 <a id="href_fiv" href="#">href_fiv</a>
7 </span>
8 </div>
9 $(document).ready(function(){
10 $("a").parent().addClass('a_par');
11 });
View Code
擷取同級元素:next([expr]):
擷取指定元素的下一個同級元素。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script type="text/javascript" src="/jquery/jquery.js"></script>
5 </head>
6
7 <body>
8 <ul>
9 <li>list item 1</li>
10 <li>list item 2</li>
11 <li class="third-item">list item 3</li>
12 <li>list item 4</li>
13 <li>list item 5</li>
14 </ul>
15
16 <script>
17 $('li.third-item').next().css('background-color', 'red');
18 </script>
19
20 </body>
21 </html>
這個例子的結果是,隻有list item 4背景色變為紅色
nextAll([expr]):擷取指定元素後邊的所有同級元素
andSelf():擷取指定元素後邊的所有同級元素,之後加上指定的元素
即:自己及其之後的所有同級元素
prev():擷取指定元素的上一個同級元素(是上一個哦)。
prevAll():擷取指定元素的前邊所有的同級元素。
擷取子元素
1、查找子元素方式1:>
例如:var aNods = $("ul > a");查找ul下的所有a标簽
2、查找子元素方式2:children()
3、查找子元素方式3:find()
這裡再簡單介紹以下children()和find()的異同:
1> children及find方法都用是用來獲得element的子elements的,兩者都不會傳回 text node,就像大多數的jQuery方法一樣。
2> children方法獲得的僅僅是元素一下級的子元素,即:immediate children。
3> find方法獲得所有下級元素,即:descendants of these elements in the DOM tree
4> children方法的參數selector 是可選的(optionally),用來過濾子元素,但find方法的參數selector方法是必選的。
5> find方法事實上可以通過使用 jQuery( selector, context )來實作。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
例:
1 <ul class="level-1">
2 <li class="item-i">I</li>
3 <li class="item-ii">II
4 <ul class="level-2">
5 <li class="item-a">A</li>
6 <li class="item-b">B
7 <ul class="level-3">
8 <li class="item-1">1</li>
9 <li class="item-2">2</li>
10 <li class="item-3">3</li>
11 </ul>
12 </li>
13 <li class="item-c">C</li>
14 </ul>
15 </li>
16 <li class="item-iii">III</li>
17 </ul>
使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:
使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是:
下面還有一些:
1 :first :last
$('div:first');
$('div:last');
擷取所有div元素的第一個元素和最後一個元素
2 :even :odd$('div:even');
比對所有div對象中的偶數元素
$('div:odd'):
比對所有div對象中的奇數元素
3 eq(index)
$('div:eq(2)')
比對第二個div對象
這個參數是數字,是以在擷取某些對象時也比較靈活.
4 :gt(index) :lt(index)
$('div:gt(1)')
比對小于下标的所有元素
$('div:lt(2)')
比對大于下标的所有元素
5 :contains(text)
$('div:contains("txt")');
比對内部包含有文本txt元素的對象
6 :empty
$('div:empty')
比對所有沒有子元素的對象
7 :has(selector)
$('div:has("#abc")')
傳回含有#abc子元素的div對象
8 :hidden :visible
$('div:hidden')
比對所有隐藏對象
$('div:visible')
比對所有可見的對象
$("div[id]") 查找所有含有 id 屬性的div元素。
$("div[id='ajaxa']") 查找 id 為 ajaxa 的 div 元素。
$("div[id!='ajaxa']") 查找 id 不為 ajaxa 的 div 元素。
$("div[id^='ajaxa']") 查找 id 以 ajaxa 開頭的 div 元素。
$("div[id$='ajaxa']") 查找 id 以 ajaxa 結尾的 div 元素。
$("div[id*='ajaxa']") 查找 id 含 ajaxa 的 div 元素。
$("div[id][class='ajaxa']") 查找存在id屬性并且類為ajaxa的 div 元素。
jquery 獲得tagName 的方法:$('#id').attr("tagName");jquery把tagName 當成屬性了。