歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery內容過濾選擇器選擇元素

jQuery內容過濾選擇器選擇元素:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>使用jQuery內容過濾選擇器</title>  
  5.     <script language="javascript" type="text/javascript"   
  6.             src="../Jscript/jquery-1.5.2.js"></script>  
  7.     <style type="text/css">  
  8.            body{font-size:12px;text-align:center}  
  9.            div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}  
  10.            span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}  
  11.     </style>  
  12.     <script type="text/javascript">  
  13.             $(function(){ //顯示包含給定文本的元素  
  14.               $("div:contains('A')").css("display","block");  
  15.             })  
  16.             $(function(){ //顯示所有不包含子元素或者文本的空元素  
  17.               $("div:empty").css("display","block");  
  18.             })  
  19.             $(function(){ //顯示含有選擇器所匹配的元素的元素  
  20.               $("div:has(span)").css("display","block");  
  21.             })  
  22.             $(function(){ //顯示含有子元素或者文本的元素  
  23.               $("div:parent").css("display","block");  
  24.             })  
  25.     </script>  
  26. </head>  
  27. <body>  
  28.     <div>ABCD</div>  
  29.     <div><span></span></div>  
  30.     <div>EFaH</div>  
  31.     <div></div>  
  32. </body>  
  33. </html>  

說明:在:contains(text)內容過濾選擇器中。如果是查找字母,則有大小寫的區別。

Copyright © Linux教程網 All Rights Reserved