jquery中$(this)是干什么用的|极客教程

jquery中$(this)是干什么用的

在学习和使用jQuery的过程中，经常会遇到$(this)这样的语法。那么$(this)到底是什么意思？它有什么作用呢？本文将详细解析$(this)的用法和作用。

`$(this)`的基本概念

在jQuery中，$(this)是一个非常常用的语法，它通常出现在事件处理函数中。$(this)表示当前被选中的元素，也就是当前触发事件的元素。在jQuery中，事件处理函数中的this关键字通常指向当前触发事件的DOM元素，而$(this)则是将其转换成jQuery对象，方便进行jQuery的操作。

下面通过一个简单的示例来说明$(this)的用法：

<!DOCTYPE html>
<html>
<head>
  <title> $(this)示例</title> <script src="https://cdn.staticfile.org/ jquery /2.1.1/ jquery .min.js"></script> <script>$ (document).ready(function(){
       $("button").click(function(){$ (this).hide();
      });
    });
  </script>
</head>
<body>

<button>点击隐藏按钮</button>
<button>点击隐藏按钮</button>
<button>点击隐藏按钮</button>

</body>
</html>

在上面的示例中，我们有3个按钮，每个按钮都可以点击隐藏自身。在点击按钮时，事件处理函数中的$(this)表示当前被点击的按钮，并调用hide()方法来隐藏自身。

`$(this)`的应用场景

1. 处理事件

如上面的示例所示，$(this)经常用于处理事件，可以方便地操作当前触发事件的元素，比如显示、隐藏、添加样式等。

$("button").click(function(){
  $(this).css("color", "red");
});

2. 遍历操作

在遍历元素的过程中，也会用到$(this)，可以针对每个元素进行操作。

$("li").each(function(){
  if($(this).text() === "apple"){
    $(this).addClass("highlight");
  }
});

3. 在事件链中使用

$(this)也可以在事件链中使用，可以实现动态改变当前元素以及其子元素的属性或内容。

$("div").on("click", function(){
  $(this).children().hide();
});

4. 表单操作

在表单操作中，经常需要用到$(this)，可以方便地获取表单元素的值或状态，进行相应的操作。

$("input").on("focus", function(){
  $(this).css("background-color", "#f0f0f0");
});

`$(this)`与`this`的区别

在jQuery中，$(this)与this是两个不同的概念。this是JavaScript中的关键字，代表当前对象或元素，指的是原始的DOM元素；而$(this)是将this转换为jQuery对象，方便进行jQuery的操作。

下面是一个简单的示例来说明两者之间的区别：

$("button").click(function(){
  $(this).hide();  // 使用$(this)表示当前jQuery对象，即当前按钮jQuery对象
  this.hide();     // 报错，原生DOM元素没有hide()方法
});

总结

通过本文的介绍，我们详细解析了$(this)的用法和作用。在jQuery中，$(this)是一个非常常用的语法，用于操作当前触发事件的元素。它可以方便地获取当前元素，并转换为jQuery对象，使得操作更加便捷灵活。

jquery中$(this)是干什么用的