作者: 豆包AI
在 jQuery 中，$() 是一个非常核心且常用的函数，它有多种用途，下面将详细介绍：
1. 选择 DOM 元素
$() 最常见的用途是作为选择器，用于选取 HTML 文档中的一个或多个 DOM 元素。它可以根据元素的标签名、类名、ID、属性等多种方式进行选择。
1.1 根据标签名选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<script>
$(document).ready(function () {
// 选择所有的 p 元素
var paragraphs = $('p');
paragraphs.css('color', 'red');
});
</script>
</body>
</html>
在上述代码中，$('p') 选取了文档中所有的 <p> 元素，并将它们的文本颜色设置为红色。
1.2 根据类名选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="my-class">这是一个带有 my-class 类的 div。</div>
<div>这是一个普通的 div。</div>
<script>
$(document).ready(function () {
// 选择所有带有 my-class 类的元素
var elements = $('.my-class');
elements.css('background-color', 'yellow');
});
</script>
</body>
</html>
这里，$('.my-class') 选取了所有带有 my-class 类的元素，并将它们的背景颜色设置为黄色。
1.3 根据 ID 选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="my-id">这是一个带有 my-id ID 的 div。</div>
<script>
$(document).ready(function () {
// 选择带有 my-id ID 的元素
var element = $('#my-id');
element.css('font-size', '20px');
});
</script>
</body>
</html>
$('#my-id') 选取了 ID 为 my-id 的元素，并将其字体大小设置为 20 像素。
2. 创建 DOM 元素
$() 还可以用于创建新的 DOM 元素。只需将 HTML 标签作为参数传递给 $() 函数即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create DOM Element with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$(document).ready(function () {
// 创建一个新的 p 元素
var newParagraph = $('<p>这是一个新创建的段落。</p>');
// 将新元素添加到 container 元素中
$('#container').append(newParagraph);
});
</script>
</body>
</html>
在上述代码中，$('<p>这是一个新创建的段落。</p>') 创建了一个新的 <p> 元素，并将其添加到 id 为 container 的 <div> 元素中。
3. 包装 DOM 元素
当你有一个原生的 DOM 元素时，可以使用 $() 将其包装成一个 jQuery 对象，这样就可以使用 jQuery 提供的各种方法来操作该元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wrap DOM Element with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个 div。</div>
<script>
$(document).ready(function () {
// 获取原生 DOM 元素
var nativeDiv = document.getElementById('myDiv');
// 将原生 DOM 元素包装成 jQuery 对象
var $div = $(nativeDiv);
// 使用 jQuery 方法设置背景颜色
$div.css('background-color', 'lightblue');
});
</script>
</body>
</html>
这里，$(nativeDiv) 将原生的 DOM 元素 nativeDiv 包装成了一个 jQuery 对象 $div，然后就可以使用 css() 方法来设置其背景颜色。
4. 文档就绪事件
$(document).ready() 是一个常用的语法，用于确保在文档的 DOM 完全加载后再执行代码。$() 在这里可以看作是 jQuery() 的简写，$(document) 选取了整个文档对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Ready Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
// 文档加载完成后执行的代码
console.log('文档已加载完成。');
});
</script>
</body>
</html>
在上述代码中，$(document).ready() 中的回调函数会在文档的 DOM 结构完全加载完成后执行。
综上所述，$() 是 jQuery 中一个非常强大且多功能的函数，主要用于选择 DOM 元素、创建 DOM 元素、包装原生 DOM 元素以及处理文档就绪事件。
