JQ常用的三种选择器

csslcww 2021-11-27 原文

　　首先，大前提是在html种导入jq的js，然后分别展示

1元素选择器

元素就是 html种定义的标签，如p段落，

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){//一访问html就加载此函数
                $("button").click(function(){//点击事件触发
                    $("p").hide();
                });
            });
        </script>
    </head>

    <body>
        <h2>这是一个标题</h2>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>点我</button>
    </body>

</html>

#id选择器

id就很明白了，在上面的每一个元素都可以给他添加一个唯一id

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>#id选择器</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#cs").hide();
                });
            });
        </script>
    </head>

    <body>
        <h2>这是一个标题</h2>
        <p>这是一个段落。</p>
        <p id="cs">这是另一个段落。</p>
        <button>点我</button>
    </body>

</html>

3.class选择器

class的范围在id和元素之间，元素最大，一种元素可以有多个class，id最小

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>.class选择器</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $(".cs").hide();
                });
            });
        </script>
    </head>

    <body>
        <h2 class="cs">这是一个标题</h2>
        <p class="cs">这是一个段落。</p>
        <p id="css">这是另一个段落。</p>
        <button>点我</button>
    </body>

</html>