层次选择器的class = one的第一个孩子，body后代div不是mini，列表中包含国庆的li

程序员文章站 2022-05-01 14:18:06

...

//class = one的第一个孩子
  $("#btn6").click(function(){
     $("*").css("background-color","#fff");
     var $childone = $(".one").children(":first").css("background-color","blue");
  });
  //body后代div不是mini
  $("#btn8").click(function(){
     $("*").css("background-color","#fff");
     var $bodychild = $("body div[class!=mini]").css("background-color","blue");
  });
  //列表中包含"国庆"的li
  $("#btn9").click(function(){
    $("*").css("background-color","#fff");
    var $li = $("li:contains('国庆')").css("background-color","blue");
  });

<body>
 
 <h3>层次选择器.</h3>
 <!-- 控制按钮 -->
  <button id="btn6">.one第一个孩子</button>
  <button id="btn8">body后代div不是mini</button>
  <button id="btn9">列表中包含"国庆"的li</button>
   <!-- 测试的元素 -->
  <div class="one" id="one" >
	  id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

  <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini" style="opacity:0.9" title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>
  <div style="height:480px;background-color:white">
	<ul>
		<li>国庆</li>
		<li id="two">元旦</li>
		<li>清明</li>
		<li>端午</li>
		<li>中秋</li>
		<li>国庆</li>
		<li>元旦</li>
		<li>清明</li>
		<li>端午</li>
		<li>中秋</li>
		<li>国庆</li>
		<li>元旦</li>
		<li>清明</li>
		<li>端午</li>
		<li>中秋</li>
		<li>国庆</li>
		<li>元旦</li>
		<li>清明</li>
		<li>端午</li>
		<li>中秋</li>
	</ul>
  </div>
</body>