內容選擇器

時間 2019-11-26
標籤內容選擇器简体版
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
    div,span{
       width: 140px;
       height: 140px;
       margin: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   div.mini{
       width: 30px;
       height: 30px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
   }
  </style>
  <!--引入jquery的js庫-->
  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    
 </head>
  
 <body>
  <h1>XXXX</h1>
  <h2>XXXXXXX</h2>
  <h3>XXXXXXXXX</h3>
  
   <input type="button" value="改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF"  id="b1"/>
   <input type="button" value="改變不包含子元素(或者文本元素) 的 div 的背景色爲 #0000FF"    id="b2"/>
   <input type="button" value=" 改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF"  id="b3"/>
   <input type="button" value=" 改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF"  id="b4"/>
    <input type="button" value=" 改變不含有文本 di; 的 div 元素的背景色"  id="b5"/>
   <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF"  id="b6"/>
  
 <div id="xxxx">
      <div id="one"  class="mini">
       div id爲one  
   </div>
    </div>
   
   <div id="two">
     div id爲two
    <div id="two01">
     id twoo1
    </div>
    <div id="two02">
     id twoo2
    </div>
   </div>
   
   <div id="three"  class="one" >
       div id爲three   class one
    <div id="three01">
     id three01
    </div>
   </div>
   
   <div id="four"  class="one" >
      XXXXXXXXXX
   </div>
   
    <div id="five"  class="one" >
      
   </div>
   
   
   <div id="mover">
       執行動畫
   </div>
   
   <span id="s_one"  class="mini">
    span  one
   </span>
    
   <span id="s_two">
    span two
   </span>  
 </body>
     
 <script language="JavaScript">
 //********改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF
 $("#b1").click(function(){
   $("div:contains(di)").css("background","#0000FF")
  })
 //**************改變不包含子元素(或者文本元素) 的 div 的背景色爲 #0000FF
$("#b2").click(function(){
   $("div:empty").css("background","#0000FF")
  })
 
 //******改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF
 $("#b3").click(function(){
   $("div .mini").css("background","#0000FF")
  })
  //這個元素它父元素
  //$("div:has('.mini')").css("background","green");
 
 //****改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF
 $("#b4").click(function(){
   $("div:parent").css("background","#0000FF")
  })
    
 //*****改變不含有文本 di; 的 div 元素的背景色
  $("#b5").click(function(){
   $("div").not("div:contains(di)").css("background","#0000FF")
  })
 //****改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF
 
  $("#b6").click(function(){
   $("div:gt(3)").css("background","#0000FF")
  })
 //***
    </script>
   
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。