日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery學(xué)習(xí)大總結(jié)(二)jQuery選擇器完整介紹

上次主要總結(jié)了下jQuery對象與dom對象的相互轉(zhuǎn)換，今天我們看看jQuery選擇器。

jQuery選擇器使得獲得頁面元素變得更加容易、更加靈活，從而大大減輕了開發(fā)人員的壓力。如同蓋樓一樣，沒有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見,jQuery選擇器的重要性。當(dāng)然想一下子掌握所有選擇器也是很困難的，這個(gè)得靠實(shí)踐和積累。

現(xiàn)在我們正式進(jìn)入jQuery選擇器的學(xué)習(xí)。我們將jQuery選擇器進(jìn)行分類學(xué)習(xí)，將jQuery選擇器分為以下幾種：

1、基本選擇器

  • id                              根據(jù)元素ID選擇
  • elementname       根據(jù)元素名稱選擇
  • classname            根據(jù)元素css類名選擇 

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. 根據(jù)元素名稱選擇 
    3.   
  
  
  3.  
    4.  
 
 
 
 
 
    
  
  
  
  1. jQuery("#ID").val(); 
    2.   
  
  
  2. jQuery("a").text(); 
    3.   
  
  
  3. jQuery(".classname").val(); 
    4.

即可分別得到元素的值。以上三種為最常見的選擇器，其中ID選擇器是效率***的，在可能的情況下應(yīng)該盡量使用它。

2、層次選擇器

 
 
 
    
  
  
  
  1. ancestor descendant  祖先和子孫選擇器 
    2.   
  
  
  2. parent > child           父子節(jié)點(diǎn)選擇器 
    3.   
  
  
  3. prev + next                同級(jí)別選擇器 
    4.   
  
  
  4. prev ~ siblings         過濾選擇器 
    5.

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.      
    3.   
  
  
  3.      
    4.   
  
  
  4.      
    5.   
  
  
  5.      
    6.   
  
  
  6.     1 
    7.   
  
  
  7.     2 
    8.   
  
  

 
 
 
    
  
  
  
  1. //得到div中的a標(biāo)簽內(nèi)容 結(jié)果為12 
    2.   
  
  
  2. jQuery("#divTest a").text(); 
    3.   
  
  
  3. //輸出div直接子節(jié)點(diǎn) 結(jié)果為投資 
    4.   
  
  
  4. jQuery("#divTest>input").val(); 
    5.   
  
  
  5. //輸出id為next的后一個(gè)同級(jí)別元素 結(jié)果為擔(dān)當(dāng) 
    6.   
  
  
  6. jQuery("#next+input").val(); 
    7.   
  
  
  7. //同上，并且是有title的元素 結(jié)果為學(xué)習(xí) 
    8.   
  
  
  8. jQuery("#next~[title]").val(); 
    9.

基本過濾選擇器

  • :first                       找到***元素
  • :last                       找到***一個(gè)元素
  • :not(selector)      去除與給定選擇器匹配的元素
  • :even                     匹配索引值為偶數(shù)的元素 從0開始計(jì)數(shù)
  • :odd                       匹配索引值為奇數(shù)的元素 從0開始計(jì)數(shù)
  • :eq(index)             匹配一個(gè)給定索引值元素 從0開始
  • :gt(index)              匹配大于給定索引值元素
  • :lt(index)               匹配小于給定索引值元素
  • :header                 選擇h1,h2,h3一類的標(biāo)簽 (目前沒用過)
  • :animated             匹配正執(zhí)行動(dòng)畫效果的元素 (目前沒用過)

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     
         
  
  
    •         
    • 投資
      •    
  
  
    •         
    • 理財(cái)
      •    
  
  
    •         
    • 成熟
      •    
  
  
    •         
    • 擔(dān)當(dāng)
      •    
  
  
    •          
      •   
  
  
    •          
      •   
  
  
    •     
     
    3.   
  
  

 
 
 
    
  
  
  
  1. //***個(gè)li內(nèi)容 結(jié)果為投資 
    2.   
  
  
  2. jQuery("li:first").text(); 
    3.   
  
  
  3. //***一個(gè)li內(nèi)容 結(jié)果為擔(dān)當(dāng) 
    4.   
  
  
  4. jQuery("li:last").text(); 
    5.   
  
  
  5. //input未被選中的值 結(jié)果為不學(xué)習(xí) 
    6.   
  
  
  6. jQuery("li input:not(:checked)").val(); 
    7.   
  
  
  7. //索引為偶數(shù)的li 結(jié)果為投資 成熟 
    8.   
  
  
  8. jQuery("li:even").text(); 
    9.   
  
  
  9. //索引為奇數(shù)的li 結(jié)果為理財(cái) 擔(dān)當(dāng) 
    10.   
  
  
  10. jQuery("li:odd").text(); 
    11.   
  
  
  11. //索引大于2的li的內(nèi)容 結(jié)果為擔(dān)當(dāng) 
    12.   
  
  
  12. jQuery("li:gt(2)").text(); 
    13.   
  
  
  13. //索引小于1的li的內(nèi)容 結(jié)果為投資 
    14.   
  
  
  14. jQuery("li:lt(1)").text(); 
    15.

4、內(nèi)容過濾器

  • :contains(text)              匹配包含給定文本的元素
  • :empty                       　匹配所有不包含子元素或者文本的空元素
  • :has(selector)              匹配含有選擇器所匹配的元素

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     
         
  
  
    •         
    • hyip投資
      •    
  
  
    •         
    • hyip
      •    
  
  
    •         
    •    
  
  
    •         
    • 理財(cái)
      •    
  
  
    •         
    • 投資
      •    
  
  
    •     
     
    3.
    
 
 
 
    
  
  
  
  1. //包含hyip的li的內(nèi)容 結(jié)果為hyip投資 hyip 
    2.   
  
  
  2. jQuery("li:contains('hyip')").text(); 
    3.   
  
  
  3. //內(nèi)容為空的li的后一個(gè)li內(nèi)容 結(jié)果為理財(cái) 
    4.   
  
  
  4. jQuery("li:empty+li").text(); 
    5.   
  
  
  5. //包含a標(biāo)簽的li的內(nèi)容 結(jié)果為投資 
    6.   
  
  
  6. jQuery("li:has(a)").text(); 
    7.

5、可見性過濾器

  • :hidden    匹配不可見元素
  • :visible     匹配可見元素

舉例：

 
 
 
    
  
  
  
    1.    
  
  
    •     
    • 可見
      •    
  
  
    •     不可見
      •    
  
  
     
    2.  
 
 
 
 
 
    
  
  
  
  1. //不可見的li的內(nèi)容 結(jié)果為不可見 
    2.   
  
  
  2. jQuery("li:hidden").text(); 
    3.   
  
  
  3. //可見的li的內(nèi)容 結(jié)果為可見 
    4.   
  
  
  4. jQuery("li:visible").text(); 
    5.

6、屬性過濾器

  • [attribute=value]                 匹配屬性是給定值的元素
  • [attribute^=value]               匹配屬性是以給定值開始的元素
  • [attribute$=value]              匹配屬性是以給定值結(jié)束的元素
  • [attribute*=value]               匹配屬性包含給定值的元素

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.  
 
 
 
 
 
    
  
  
  
  1. //name為hyipinvest的值 結(jié)果為hyip投資 
    2.   
  
  
  2. alert(jQuery("input[name='hyipinvest']").val()); 
    3.   
  
  
  3. //name以hyip開始的值 結(jié)果為hyip投資 
    4.   
  
  
  4. alert(jQuery("input[name^='hyip']").val()); 
    5.   
  
  
  5. //name以hyip結(jié)束的值 結(jié)果為投資hyip 
    6.   
  
  
  6. alert(jQuery("input[name$='hyip']").val()); 
    7.   
  
  
  7. //name包含oo的值 結(jié)果為HYIP 
    8.   
  
  
  8. alert(jQuery("input[name*='oo']").val()); 
    9.

jQuery選擇器就總結(jié)到這里，這些基本上都是在學(xué)習(xí)過程中遇到的，還有極少部分沒有總結(jié)出來。經(jīng)過一段時(shí)間實(shí)踐，相信大家就能夠熟練的使用jQuery選擇器了。

原文鏈接：http://www.jquery001.com/jquery-selector.html


本文題目：jQuery學(xué)習(xí)大總結(jié)(二)jQuery選擇器完整介紹
文章鏈接：http://www.5511xx.com/article/cdpsdgd.html