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

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
jQuery學習大總結(二)jQuery選擇器完整介紹

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

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

現在我們正式進入jQuery選擇器的學習。我們將jQuery選擇器進行分類學習，將jQuery選擇器分為以下幾種：

1、基本選擇器

  • id                              根據元素ID選擇
  • elementname       根據元素名稱選擇
  • classname            根據元素css類名選擇 

舉例：

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

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

2、層次選擇器

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

舉例：

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

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

基本過濾選擇器

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

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     
         
  
  
    •         
    • 投資
      •    
  
  
    •         
    • 理財
      •    
  
  
    •         
    • 成熟
      •    
  
  
    •         
    • 擔當
      •    
  
  
    •          
      •   
  
  
    •          
      •   
  
  
    •     
     
    3.   
  
  

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

4、內容過濾器

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

舉例：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     
         
  
  
    •         
    • hyip投資
      •    
  
  
    •         
    • hyip
      •    
  
  
    •         
    •    
  
  
    •         
    • 理財
      •    
  
  
    •         
    • 投資
      •    
  
  
    •     
     
    3.
    
 
 
 
    
  
  
  
  1. //包含hyip的li的內容 結果為hyip投資 hyip 
    2.   
  
  
  2. jQuery("li:contains('hyip')").text(); 
    3.   
  
  
  3. //內容為空的li的后一個li內容 結果為理財 
    4.   
  
  
  4. jQuery("li:empty+li").text(); 
    5.   
  
  
  5. //包含a標簽的li的內容 結果為投資 
    6.   
  
  
  6. jQuery("li:has(a)").text(); 
    7.

5、可見性過濾器

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

舉例：

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

6、屬性過濾器

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

舉例：

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

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

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


新聞名稱：jQuery學習大總結(二)jQuery選擇器完整介紹
本文網址：http://m.5511xx.com/article/cdpsdgd.html