zoukankan      html  css  js  c++  java
  • jQuery-parents和closest区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jQuery-parents和closest区别</title>
    	<style type="text/css">
    		li { margin: 3px; padding: 3px; background: #EEEEEE; }
      		li.hilight { background: yellow; }
    	</style>
    </head>
    <body>
    	<ul>
    	    <li class="parents"><b>点我!</b></li>
    	    <li class="closest">closet方法<b>Click me!</b></li>
      	</ul>
    </body>
    <script src="http://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
     $( document ).bind("click", function( e ) {
        $( e.target ).closest("li").toggleClass("hilight");
      });
    </script>
    </html>
    

      1、当鼠标点击“You can also”时,颜色出现变化。这是因为closest是从当前元素开始向上遍历的。而不同于parents()方法,是从当前元素的父元素开始向上遍历。

      2、当点击Click me!时,颜色也会变化。这同样经过上面步骤,从当前元素向上匹配,只不过<b>不符合条件,再往上时遇见了<li>。 

  • 相关阅读:
    idea用法
    pagehelper用法
    mybatis
    多线程2
    radio 标签状态改变时 触发事件
    多线程
    a标签点击后,给a标签添加样式
    servlet
    mybatis 查询
    springmvc 发送PUT 和 DELETE 请求
  • 原文地址:https://www.cnblogs.com/vleexy/p/6589832.html
Copyright © 2011-2022 走看看