jQuery中$this和$(this)的区别介绍（一看就懂）

深入理解jQuery中的 `$this` 和 `$(this)` 的差异

在jQuery的世界中，每一个HTML元素都有其独特的身份和角色。当我们使用 `$this` 和 `$(this)` 时，它们代表了不同的概念，尽管看起来可能很相似。这篇文章将为你揭示它们之间的秘密差异，并用一个生动的例子来说明。如果你正在寻找这两者之间的答案，那么恭喜你，这篇文章将为你揭晓谜底。

让我们理解 `$this` 和 `$(this)` 的基本含义。在jQuery中，`this` 是一个指向HTML元素的原生引用。而 `$this` 只是变量名，加上 `$` 符号是为了明确表示它是一个jQuery对象。而 `$(this)` 是一个转换过程，它将 `this` 所指向的DOM对象转换为jQuery对象，这样我们就可以使用jQuery提供的一系列强大的方法来操作元素。

现在让我们通过一个具体的例子来深入理解这个概念。假设我们有一个名为 `hilight` 的jQuery插件，它用于高亮显示特定的元素。在这个插件中，我们会使用 `$this` 和 `$(this)` 来处理元素。

```javascript

(function($) {

$.fn.hilight = function(options) {

// 输出调试信息

debug(this);

// 定义默认的高亮样式

var defaults = {

foreground: 'red', // 文本颜色

background: 'yellow' // 背景颜色

};

// 合并默认设置和用户自定义设置

var opts = $.extend({}, defaults, options);

// 对每个匹配的元素进行操作

return this.each(function() {

// 将DOM对象转换为jQuery对象

$this = $(this);

// 构建元素特定的选项

var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

// 更新元素的样式

$this.css({

backgroundColor: o.background,

color: o.foreground

});

// 获取元素的HTML内容并进行格式化处理

var markup = $this.html();

markup = $.fn.hilight.format(markup); // 使用自定义的格式化函数处理HTML内容

$this.html(markup); // 更新元素的HTML内容

});

};

// 定义格式化函数，用于处理高亮显示的文本内容

$.fn.hilight.format = function(txt) {

return '' + txt + ''; // 将文本内容包裹在strong标签内以实现加粗效果

};

// 设置插件的默认样式选项

$.fn.hilight.defaults = {

foreground: 'red', // 默认文本颜色为红色

background: 'yellow' // 默认背景颜色为黄色

};

// 输出调试信息的函数，用于调试插件的使用情况

function debug($obj) {

if (window.console && window.console.log) { // 如果浏览器支持控制台输出功能的话则执行输出操作