电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

jQuery內(nèi)容過(guò)濾選擇器選擇元素實(shí)例講解

 看見(jiàn)就非常 2014-12-03
[javascript] view plaincopy
  1. <html xmlns="http://www./1999/xhtml";>  
  2. <head>  
  3. <!--  
  4. 內(nèi)容過(guò)濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位  
  5. jQuery選擇器詳解  
  6. 根據(jù)所獲取頁(yè)面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過(guò)濾選擇器、表單選擇器四大類(lèi)。其中，在過(guò)濾選擇器中有可以分為：簡(jiǎn)單過(guò)濾選擇器、內(nèi)容過(guò)濾選擇器、可見(jiàn)性過(guò)濾選擇器、屬性過(guò)濾選擇器、子元素過(guò)濾選擇器、表單對(duì)象屬性過(guò)濾選擇器6種  
  7. -->  
  8. <title></title>  
  9. <!-- 使用jQuery內(nèi)容過(guò)濾選擇器選擇元素：在頁(yè)面中，根據(jù)需要?jiǎng)?chuàng)建四個(gè)<div>標(biāo)記，并在其中的<div>中新建一個(gè)<span>標(biāo)記，其余<div>標(biāo)記中輸入內(nèi)容（或?yàn)榭眨?通過(guò)內(nèi)容過(guò)濾器獲取指定的元素，并顯示在頁(yè)面中。-->  
  10. <script src="jquery-1.9.1.js" type="text/javascript"></script>  
  11. <style type="text/css">  
  12. body{font-size:12px;text-align:center}  
  13. div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}  
  14. span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}  
  15. </style>  
  16. <script type="text/javascript">  
  17. $(function () { //顯示包含給定文本的元素  
  18. $("div:contains('A')").css('display','block');  
  19. })  
  20. $(function(){ //顯示所有不包含子元素或者文本的空元素  
  21. $('div:empty').css('display','block');  
  22. })  
  23. $(function () { //顯示含有選擇器所匹配的元素  
  24. $('div:has(span)').css('display', 'block');  
  25. })  
  26. $(function () { //顯示含有子元素或者文本的元素  
  27. $('div:parent').css('display', 'block');  
  28. })  
  29. </script>  
  30. <!-- 注：在:contains(text)內(nèi)容過(guò)濾選擇器中，如果是查找字母，則有大小寫(xiě)的區(qū)別-->  
  31. </head>  
  32. <body>  
  33. <div>ABCD</div>  
  34. <div><span></span></div>  
  35. <div>EFAH</div>  
  36. <div></div>  
  37. </body>  
  38. </html>   

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多