JavaScript $ 符号函数 - JavaScript

在JavaScript中，$符号函数是一个非常常见的功能。它是jQuery框架中的主要函数之一，通常用于快速选择DOM元素，以及对DOM元素进行操作。除了jQuery外，其他JavaScript库和框架（如Prototype.js和MooTools）也使用了这个函数。

语法

最基本的使用方法是使用$符号后跟一个字符串参数（例如 "div" 或 "#myID"），稍后将它们转换为DOM元素的JavaScript对象。

var myDiv = $('#myDiv');

选择器

jQuery支持CSS选择器，因此可以使用任何CSS选择器来选择元素。此外，还支持自定义函数来选择元素。

// 选择所有段落元素
var paragraphs = $('p');

// 选择类属性为 "myClass" 的所有元素
var myClassElements = $('.myClass');

// 选择 ID 为 "myID" 的元素
var myIDElement = $('#myID');

// 选择所有的直接子元素中，类属性为 "myClass" 的元素
var directChildren = $('> .myClass');

元素操作

一旦选择了元素，就可以使用$()返回的对象来进行各种操作。可以使用多个函数来修改元素的CSS样式，添加/删除类属性，绑定事件等，例如：

// 隐藏元素
myDiv.hide();

// 添加类属性
myDiv.addClass('myClass');

// 移除类属性
myDiv.removeClass('myClass');

// 添加事件监听器
myDiv.click(function() {
    alert('An event was triggered!');
});

// 修改CSS属性
myDiv.css('color', 'red');

jQuery对象

当在$()中传入选择器或DOM元素时，jQuery将返回一个jQuery对象。jQuery对象实际上是一个数组或类数组对象，其中包含与选择器或DOM元素匹配的所有元素。

// 通过选择器创建 jQuery 对象
var myDiv = $('#myDiv');

// 通过DOM元素创建 jQuery 对象
var myDOMElement = document.getElementById('myDiv');
var myjQueryObject = $(myDOMElement); // 相当于 $([myDOMElement])

// 创建一个包含多个元素的 jQuery 对象
var allParagraphs = $('p');

性能注意事项

虽然$()函数在开发中非常有用，但不应该滥用它。在需要频繁访问相同元素的情况下，最好在$()返回的jQuery对象之外缓存DOM引用，以提高性能。

// 不应该这样做
for (var i = 0; i < 10000; i++) {
    $('#myElement').addClass('myClass');
}

// 更好的方式
var myElement = $('#myElement');
for (var i = 0; i < 10000; i++) {
    myElement.addClass('myClass');
}

结论

$()函数是JavaScript和jQuery中非常有用的工具。它允许我们快速选择和操作DOM元素，并通过它支持的广泛选择器集进行自定义选择。但是，应该注意在使用时考虑性能问题，并在需要时缓存DOM引用。