JQ常用方法 - 关系查找方法

2 年前 · 来自专栏大前端的生活

qiong的叮当响

好好学习，天天向上

好好学习，天天向上

本章主要内容是：JQ关系查找方法，$(this) 自己、parent() 父级、children() 子级、siblings() 兄弟

示例代码：

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  <style>
      margin: 0;
      padding: 0;
    .box {
      width: 1000px;
      height: 80px;
      border: 1px solid #333;
      margin-top: 10px;
    .box p,
    .box h2 {
      float: left;
      width: 80px;
      height: 80px;
      margin-right: 20px;
      background-color: #ccc;
  </style>
</head>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
  </div>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取所有的 p 标签
    var $ps = $("p")
    var $box = $(".box")
  </script>
</body>
</html>

1、$(this) 自己

在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法

// 批量添加事件
$ps.click(function () {
  // 让点击的自己 颜色变红色
  // this 指向的是触发事件的事件源的原生 JS 对象
  // 需要转换成 jQuery对象
  $(this).css("background-color","red")

2、parent() 父级

jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级
父级得到的也是一个 jQuery 对象，直接继续打点调用 JQ 方法和属性

// 批量添加事件
$ps.click(function () {
  // 找到事件源的 父级元素，添加黄色背景
  $(this).parent().css("background-color","yellow")

3、children() 子级

jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery 对象
得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性
获得子级时，不限制标签类型

// 通过点击 div 获取它的子级元素
$box.click(function () {
  // 获取子级
  $(this).children().css("background-color","pink")

children() 可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择

// 通过点击 div 获取它的子级元素
$box.click(function () {
  // 添加参数后，会按照指定的选择器在子级中进行二次选择
  $(this).children("p").css("background-color","pink")

4、siblings() 兄弟

jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟
得到 jQuery 对象可以继续使用 JQ 的方法和属性

// 批量添加事件
$ps.click(function () {
  // 查找兄弟元素
  $(this).siblings().css("background-color","skyblue")