看锋利的Jquery发现有感

最新推荐文章于 2019-03-28 23:48:58 发布

大月球

最新推荐文章于 2019-03-28 23:48:58 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery_javascript 文章标签： Jquery javascript

本文链接：https://blog.youkuaiyun.com/yanghanxiu/article/details/46613063

Jquery_javascript 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了一段jQuery代码中关于内容选择器的使用案例，指出了一个常见误解，并通过具体代码实例展示了正确的实现方式。文章还提供了一个实际运行的HTML代码片段，帮助读者直观理解内容选择器的功能及误用后果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习了《锋利的Jquery》。刚好看到jquery 的选择器，由于jquery的选择器却是很锋利，而且也是常用的技能之一啊！在看到其中内容选择器的时候发现一个小问题。再说到内容选择器：has的时候，书中这样给出了一个例子：$('div:has(mini)').css("background","#bbffaa"),改变含有class为mini元素的<div>的元素的背景色。显示的结果如图：

但是经过测试得到的却不是这样的结果！本以为是少了一个点，加上之后却是另一番情况。这里把源码贴出来，闲来无事的可以运行下试试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-7</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
  <script type="text/javascript">
  $(document).ready(function(){
	  //选取含有文本"di"的div元素.
      $('#btn1').click(function(){
		$("div:contains(di)").css("background","red");
	  })
	  //选取不包含子元素(或者文本元素)的div空元素.
	  $('#btn2').click(function(){
		$("div:empty").css("background","red");
	  })
	  //选取含有class为mini元素 的div元素.
	  $('#btn3').click(function(){	  
		//原版
		 $("div:has(mini)").css("background","red");
		 
		 //$("div.mini").css("background","red");这个是预期的效果
	  })
	  //选取含有子元素(或者文本元素)的div元素.
	  $('#btn4').click(function(){
		  $("div:parent").css("background","red");
	  })
  });
  </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>


<br /><br />

   <!-- 测试的元素 -->
  <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"  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 class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>