[jQuery] $() 的作用

原创于 2025-02-21 15:34:42 发布 · 1.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

javascript 专栏收录该内容

5 篇文章

订阅专栏

作者: 豆包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>