天天看點

jquery選擇器

屬性選擇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]):

擷取指定元素的所有父級元素

jquery選擇器
jquery選擇器

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'); 的效果是:

jquery選擇器

使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是: 

jquery選擇器

下面還有一些:

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 當成屬性了。