jQuery_基本选择符1

最新推荐文章于 2022-11-01 13:35:45 发布

Begin_W_T_E_I_M

最新推荐文章于 2022-11-01 13:35:45 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery技术文章标签： jQuery基本选择符

本文链接：https://blog.youkuaiyun.com/Begin_W_T_E_I_M/article/details/96194160

jQuery技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍jQuery中的选择器基础，包括基本选择器的使用方法及示例。通过具体实例展示了如何利用ID、类名、元素名等进行元素选取，并对获取到的元素应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.选择器-基本：基本

  #id
    element
    .class
    *
    selector1,selector2,selectorN

2.基本示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择符：基本</title>
    <script src="../jquery-2.2.4.js"></script>
    <script>
        //所有的jquery代码都要写在以下两种形式中的任何一种
        // $ 等价于jQuery()函数，即jQuery()函数的别名
        // 1. $(document).ready(function () { ... });
        // 2. $(function(){ ....  });

        // ready指的是一个事件类型
        // 一个html文档在浏览器中呈现分成两个步骤：
        // 1. 在浏览器内存中构建出DOM树,此阶段即ready事件阶段,这时在浏览器上还看不见元素
        // 2. 将DOM树显示出来
        $(document).ready(function () {
            // 这里得到的是一个被jquery包装过的jquery对象，而不是一个原生的DOM对象
            var h2 = $('h2');
            // 有两种方式可从jquery对象中获得原生的DOM对象:
            // 1. jqueryObejct[index]
            // 2. jqueryObject.get(index);
            console.log(h2[0]);
            console.log(h2.get(0));

        });
        // ready的简写形式
        $(function () {
            var arr = $('p');
            console.log(arr[0]);
            console.log(arr.get(1));
            $(':button').click(function () {
                // alert('click button');
                // 给ID为foo的元素加上行内样式
                $('#foo').css({color:"red"});
                $('.paragraph1').css({color:"blue",'font-size':'18px'});
                $('.paragraph1,.paragraph2').css({color:"red",'font-size':'18px'});
            });
        });

    </script>
</head>
<body>
    <h3 style="margin-left: 30px"><a href="../index.html">返 回</a></h3>

    <h1>jQuery 子元素选择器：</h1>
    <h3>选择器-基本：基本
        #id
        element
        .class
        *
        selector1,selector2,selectorN
    </h3>


    <h2 id="foo">This is a heading</h2>

    <p class="paragraph1">This is a paragraph.</p>
    <p class="paragraph2">This is another paragraph.</p>

    <button type="button">Click me</button>

</body>
</html>

3.示例结果

在这里插入图片描述