[分享]揭秘jQuery中this的强大用法，轻松应对复杂DOM操作

this的常见用法

1. 事件处理函数

在事件处理函数中，this 通常指向触发事件的DOM元素。以下是一个点击按钮改变背景颜色的例子：

$('#btn').click(function() { $(this).css('background-color', 'red');
});

在这个例子中，当按钮被点击时，this 指向按钮本身，因此.css()方法应用于按钮。

2. 选择器方法

在选择器方法中，this 也指向当前操作的DOM元素。以下是一个使用.find()方法查找子元素的例子：

$('#parent').find('div').css('color', 'blue');

在这个例子中，this 指向#parent元素，.find() 方法返回其子元素，然后.css() 方法应用于这些子元素。

3. 动画和过渡

在jQuery的动画和过渡方法中，this 指向当前正在执行动画或过渡的DOM元素。以下是一个使用.animate()方法的例子：

$('#box').animate({ left: '200px' }, 1000);

在这个例子中，this 指向#box元素，.animate() 方法应用于该元素。

this的高级用法

1. 闭包

在jQuery中，可以通过闭包来保存this的值。以下是一个使用闭包保存this值的例子：

$('#btn').click(function() { var that = this; setTimeout(function() { $(that).css('background-color', 'green'); }, 1000);
});

在这个例子中，我们使用that变量来保存this的值，并在setTimeout回调函数中使用它。

2. 自定义选择器

在自定义选择器中，this 指向匹配到的DOM元素。以下是一个使用自定义选择器的例子：

$('#container div.my-class').click(function() { console.log(this);
});

在这个例子中，this 指向匹配到的元素。

总结

jQuery中的this是一个强大的工具，可以帮助我们更好地处理DOM元素。通过理解this的基本用法、常见用法以及高级用法，我们可以编写更高效、更灵活的jQuery代码。希望本文能帮助您更好地掌握jQuery中this的用法。