jquery点击子元素增加样式

如何用jQuery来点击子元素并增加样式

jQuery是一种流行的JavaScript库，允许以一种改善代码简洁度和可读性的方式编写JavaScript代码。jQuery拥有一系列方便的DOM操作函数，使得在页面上处理元素变得更加容易。在这篇文章中，我将会展示如何使用jQuery来点击子元素并增加样式。

步骤1: 引入jQuery

在你的HTML文件中添加jQuery库。你可以从官方网站上下载它，也可以在你的HTML文件中直接连接到 jQuery的CDN。此处以CDN为例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

步骤2: 编写HTML和CSS代码

准备一个带有多个子元素的HTML页面，这些子元素将会被点击。同时，在CSS中设置样式，以便区分出点击之后的样式变化。例如：

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

在这里，我们设置了三个子元素，当它们被点击后将会更改它们的背景颜色。

步骤3: 编写jQuery代码

我们需要编写一些代码来处理当子元素被点击时要发生的事情。首先，我们需要选中所有子元素。使用jQuery的子元素选择器，我们可以轻松地选中父元素下的所有子元素：

var children = $('#parent > .child');

接下来，我们需要为每个子元素添加单击事件监听器。我们可以使用jQuery的each()函数实现此操作。这个函数接受一个回调函数，该函数将被应用于每个元素。在这个回调函数中，我们将添加一个点击事件监听器来增加子元素的样式：

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

在这里，我们使用了jQuery的on()函数来添加一个单击事件监听器。这个函数接受两个参数。第一个是事件类型，我们使用了“click”。第二个参数是回调函数，在点击响应时被执行。在这个回调函数中，我们在子元素上调用addClass()函数，将“clicked”类添加到子元素中。我们定义了一个“clicked”类，它将改变子元素的背景颜色。

完整的jQuery代码如下：

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

最后，我们将所有的代码放在$(document).ready()函数中，在DOM被完全加载之后再执行它们。

结论

在本文中，我们已经学习了如何使用jQuery来点击子元素并增加样式。我们需要选中所有的子元素，然后为每个子元素添加单击事件监听器。在回调函数中，我们可以使用addClass()函数来将一个类添加到子元素中，这样我们就可以为我们的子元素添加各种样式了。如果你想要增加子元素的其它属性，也可以在点击事件监听器中进行学习和实践。

【文章原创作者：建湖网站制作公司 http://www.1234xp.com/jianhu.html 欢迎留下您的宝贵建议】