jquery clicks on child element to add style

How to use jQuery to click on child elements and add styles

jQuery is a popular JavaScript library that allows JavaScript code to be written in a way that improves code simplicity and readability. jQuery has a series of convenient DOM manipulation functions that make it easier to manipulate elements on the page. In this article, I will show you how to use jQuery to click on child elements and add styles.

Step 1: Introduce jQuery

Add the jQuery library to your HTML file. You can download it from the official website or connect directly to jQuery’s CDN in your HTML file. Here we take CDN as an example:

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

Step 2: Write HTML and CSS code

Prepare an HTML page with multiple sub-elements that will be clicked. At the same time, set the style in CSS to distinguish the style changes after clicking. For example:

<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;
}

Here, we set three child elements that will change their background color when they are clicked.

Step 3: Write jQuery code

We need to write some code to handle what happens when the child element is clicked. First, we need to select all child elements. Using jQuery's child element selector, we can easily select all child elements under the parent element:

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

Next, we need to add click event listeners for each child element. We can do this using jQuery's each() function. This function accepts a callback function that will be applied to each element. In this callback function, we will add a click event listener to increase the style of the child element:

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

Here, we use jQuery's on() function to add a click event listener. This function accepts two parameters. The first one is the event type, we used "click". The second parameter is the callback function, which is executed when the click responds. In this callback function, we call the addClass() function on the child element to add the "clicked" class to the child element. We define a "clicked" class that will change the background color of child elements.

The complete jQuery code is as follows:

$(document).ready(function() {

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

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

});

Finally, we put all the code in the $(document).ready() function and execute them after the DOM is fully loaded.

Conclusion

In this article, we have learned how to use jQuery to click on child elements and add styles. We need to select all the child elements and then add a click event listener for each child element. In the callback function, we can use the addClass() function to add a class to the child element, so that we can add various styles to our child elements. If you want to add other attributes of child elements, you can also learn and practice in click event listeners.

The above is the detailed content of jquery clicks on child element to add style. For more information, please follow other related articles on the PHP Chinese website!