什么是 ($)(jQuery) 函数？

($)(jQuery) 是 jQuery 库中最重要的函数之一，也是使用 jQuery 的必要条件之一。它的作用是将一个选择器字符串转换为 jQuery 对象，从而允许开发者对 DOM 元素进行操作。

语法

$(selector, context);

参数

• selector：用于选取 DOM 元素的字符串，可以是 CSS 选择器、HTML 标签名、DOM 元素、数组、甚至是函数。
• context（可选）：设置 selector 的上下文，即在哪个元素中查找 selector。

返回值

$(selector) 返回的是一个 jQuery 对象，它包含了匹配 selector 的所有 DOM 元素。

示例代码

<!-- HTML -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// JS
$('li'); // 返回所有 li 元素的 jQuery 对象
$('ul li:first-child'); // 返回第一个 li 元素的 jQuery 对象

深度解析

$ 符号的作用

$ 符号实际上是一个变量名，由于 jQuery 使用起来非常频繁，所以 $ 变量被赋予了 jQuery 函数的引用。如果不喜欢使用 $ 符号，可以通过调用 jQuery.noConflict() 方法来取消 $ 的引用。

var jq = $.noConflict(); // 将 $ 取消引用并将 jQuery 函数赋值给 jq 变量
jq('li');

参数 selector

selector 是一个字符串，它可以是 CSS 选择器、HTML 标签名、DOM 元素、数组、甚至是函数。

CSS 选择器

在 selector 中使用 CSS 选择器，可以方便地选取符合条件的 DOM 元素。例如：

$('#myDiv'); // 返回 ID 是 myDiv 的元素的 jQuery 对象
$('.myClass'); // 返回 class 是 myClass 的元素的 jQuery 对象
$('input[type="text"]'); // 返回所有 type 为 text 的 input 元素的 jQuery 对象

HTML 标签名和 DOM 元素

在 selector 中可以直接使用 HTML 标签名或者 DOM 元素，此时会返回与 selector 匹配的元素的 jQuery 对象。例如：

$('ul'); // 返回所有 ul 元素的 jQuery 对象
$(document); // 返回文档对象的 jQuery 对象

数组

在 selector 中传递一个数组，jQuery 会将数组中的元素转换成 DOM 元素。例如：

var arr = ['li', 'a'];
$(arr); // 返回数组中所有 li 和 a 元素的 jQuery 对象

函数

selector 还可以是一个函数，该函数返回要查找的元素。例如：

$(function() {
  return $('div');
}); // 返回页面上所有 div 元素的 jQuery 对象

参数 context

context 是可选参数，它设置 selector 的上下文，即在哪个元素中查找 selector。例如：

$('.myClass', '#myDiv'); // 在 ID 是 myDiv 的元素中查找 class 是 myClass 的元素

返回值

$(selector) 返回的是一个 jQuery 对象，它包含了匹配 selector 的所有 DOM 元素。jQuery 对象类似于数组，可以使用数组操作符来获取其中的元素。

var $lis = $('li');
$lis.eq(0); // 获取第一个 li 元素的 jQuery 对象
$lis[0]; // 获取第一个 li 元素的 DOM 对象

结论

($)(jQuery) 函数是 jQuery 库中最重要的函数之一，它将选择器字符串转换为 jQuery 对象，从而允许开发者对 DOM 元素进行操作。本文详细介绍了该函数的语法、参数、返回值以及示例代码，并对参数

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8818