jQuery $(this) 关键字

Java

jQuery $(this) 关键字 简介及应用案例

在使用 jQuery 进行前端开发时，经常会遇到需要在事件处理函数中操作当前元素的情况。这时，就可以使用 jQuery 的 $(this) 关键字来引用当前触发事件的元素，方便我们进行相关操作。

$(this) 关键字是 jQuery 提供的一个特殊变量，它代表当前正在进行操作的元素。无论是在事件绑定函数中，还是遍历元素集合的时候，都可以使用 $(this) 来引用当前元素，以便进行相应的操作。

案例一：点击按钮显示对应文本

假设我们有一个页面上有多个按钮，每个按钮后面都有一段对应的文本。当点击按钮时，希望能够显示对应的文本。这时，我们可以使用 $(this) 关键字来实现。

HTML 代码如下：

html
<button class="btn">按钮1</button>
<div class="text">这是按钮1对应的文本</div>
<button class="btn">按钮2</button>
<div class="text">这是按钮2对应的文本</div>
<button class="btn">按钮3</button>
<div class="text">这是按钮3对应的文本</div>

JavaScript 代码如下：

Javascript
$(document).ready(function(){
  $('.btn').click(function(){
    $(this).next('.text').show();
  });
});

在上述代码中，我们通过给按钮添加了共同的类名 .btn，并给对应的文本添加了 .text 类名。然后通过 jQuery 选择器选中所有的按钮，并为它们绑定了点击事件。在点击事件处理函数中，我们使用了 $(this) 来引用当前点击的按钮，然后通过 next() 方法找到与按钮相邻的下一个元素，即对应的文本，并将其显示出来。

案例二：遍历元素集合并添加样式

有时候，我们需要对一个元素集合进行遍历，并对每个元素进行相同的操作，比如添加样式。这时，我们可以使用 $(this) 关键字来方便地操作当前的元素。

HTML 代码如下：

html
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

JavaScript 代码如下：

Javascript
$(document).ready(function(){
  $('li').each(function(){
    $(this).addClass('highlight');
  });
});

在上述代码中，我们通过选择器选中了所有的

元素，并使用 each() 方法进行遍历。在遍历过程中，我们使用 $(this) 来引用当前遍历到的元素，然后通过 addClass() 方法为其添加了一个名为 highlight 的样式类。

通过使用 jQuery 的 $(this) 关键字，我们可以方便地引用当前操作的元素，从而进行相应的操作。无论是在事件绑定函数中，还是在遍历元素集合的过程中，都能够灵活运用 $(this) 关键字来简化代码，提高开发效率。

希望通过本文的介绍和案例代码，能够帮助读者更好地理解和应用 jQuery $(this) 关键字。祝大家在前端开发中取得更好的效果！