jQuery: jQuery $(this) 子选择器

在本文中，我们将介绍jQuery中的$(this)和子选择器的使用方法。

$(this)

在jQuery中， $(this)是一个特殊的选择器，它表示当前正在操作的元素。通过使用$ (this)，我们可以对选定的元素进行各种操作，例如修改样式、绑定事件、获取属性等。

下面是一个简单的示例，说明如何使用$(this)来修改元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $(document).ready(function(){$ ("button").click(function(){
                $(this).css("background-color", "red");
            });
        });
    </script>
</head>
<body>

<button>点击我</button>
<button>也点击我</button>

</body>
</html>

在上面的示例中，当我们点击按钮时，对应的按钮背景颜色会变为红色。这是因为我们使用$(this)选择器来选中当前点击的按钮，并通过css()方法来修改其背景颜色。

子选择器

子选择器是一种特殊的选择器，通过它我们可以选择指定元素下的直接子元素。子选择器使用大于号（>）来表示。

下面是一个示例，说明如何使用子选择器选择某个元素下的直接子元素：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $(document).ready(function(){$ ("div > p").css("color", "blue");
        });
    </script>
</head>
<body>

<div>
    <p>这是被选择的p元素</p>
    <span>这不是被选择的元素</span>
    <p>这也是被选择的p元素</p>
</div>

</body>
</html>

在上面的示例中，我们使用子选择器(div > p)选择了div元素下的直接子元素p，并通过css()方法将其字体颜色设置为蓝色。

需要注意的是，子选择器只会选择直接子元素，不会选择子元素的子元素。如果想要选择多级子元素，可以使用后代选择器。