Clever way to use this keyword in jQuery

Flexible use of this keyword in jQuery

In jQuery, this keyword is a very important and flexible concept. It is used to refer to the current operation. DOM element. By rationally using this keyword, we can easily operate elements on the page and achieve various interactive effects and functions. This article will combine specific code examples to introduce the flexible use of this keyword in jQuery.

1. Simple this example

First, let’s look at a simple this example. Suppose we have a button element. When the button is clicked, change the text content of the button to "Clicked". This can be achieved in the following way:

<button id="myButton">点击我</button>

<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        $(this).text("已点击");
    });
});
</script>

In the above code, by using the this keyword, we can directly reference the currently clicked button element and change its text content to "Clicked".

2. Application of this in event processing

This keyword is often used in event processing, which can conveniently operate the element that triggers the event. For example, we have a list containing multiple buttons. When the button is clicked, the text content of the button is displayed:

<ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
</ul>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).css("color", "red");
    });
});
</script>

In the above code, when any button is clicked, the current keyword is referenced through the this keyword Click on the button element and then change the button's text color to red.

3. Use this in each() method

In jQuery, the each() method is used to traverse the collection of matching elements and execute the specified function on each element . In each() method, the this keyword represents the element currently being traversed. For example, we have a list and need to add a serial number to each list item:

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

<script>
$(document).ready(function(){
    $("ul li").each(function(index){
        $(this).prepend(index + 1 + ". ");
    });
});
</script>

In the above code, through the each() method and this keyword, we can add a corresponding number to each list item serial number.

Through the above examples, we can see the flexible use of this keyword in jQuery. By using the this keyword appropriately, we can simplify the code and handle DOM elements conveniently. I hope this article will help you understand and master the application of this keyword in jQuery.

The above is the detailed content of Clever way to use this keyword in jQuery. For more information, please follow other related articles on the PHP Chinese website!