jQ选择元素的方法：find()

最新推荐文章于 2020-05-17 21:01:30 发布

&XYZ&

最新推荐文章于 2020-05-17 21:01:30 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/JEFF_luyiduan/article/details/103970847

jquery 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了jQuery的链式操作特性，通过实例展示了如何使用链式调用简化DOM元素的选择与样式设置过程。文章深入解析了prevObject属性的作用及其实现原理，帮助读者理解jQuery内部机制。

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <div class="test">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="./myjQuery.js"></script> -->
<script>
  // $(".test").css({color : '#ff0000'})
  // $(".test ul").css({listStyle : "none"})
  // $(".test ul li").css({display: "block", margin : "20px"})

  //通过find可以更加简便的实现上面的效果：
  $(".test")
    .css({ color: '#ff0000' })
      .find("ul")
        .css({ listStyle: "none" })
          .find("li")
            .css({ display: "block", margin: "20px" })
  
  //下面的这三个打印，主要是为了体现出来prevObject
  console.log( $(".test") )
  console.log( $(".test").find("ul") )
  console.log( $(".test").find("ul").find("li") )

  /*
    注意：
      $(test").find("ul").find("li").prevObject == $(".test").find("ul")
    返回的是false
    分析：
      它们的内容是一样的，但是jQ是分别构造出它们来的，所以不相等。
  */
  console.log(  $(".test").find("ul").find("li").prevObject == $(".test").find("ul") )
  
  
</script>

</html>