首页 > 代码库 > Jquery选择器

Jquery选择器

Jquery选择器允许开发者对HTML元素组或单个元素进行操作,主要分为以下三类

所有的选择器都以美元符号$()开头

  一、元素选择器

    Jquery元素选择器基于元素名选择元素。如选择页面中所有<p>元素:$("p")

    实例:用户点击按钮后,所有p元素隐藏

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                  $("button").click(function(){
                      $("p").hide();
                  });
            });
        </script>
    </head>
 
    <body>
        <h2>这是一个标题</h2>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>点我</button>
    </body>
</html>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 这行代码使用百度的cdn地址来引用代码

    $(document).ready(function(){}) 表示在文档完全加载完成时执行jquery代码

    页面效果如下:

    技术分享

    当点击"点我"按钮时,所有的P元素都会被隐藏掉

    技术分享

 

  二、#id选择器

    元素的id是唯一的,可以通过id找到页面中特定的元素

    

1
2
3
4
5
6
7
<body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p id="test">id选择器</p>
    <button>点我</button>
</body>

  在body中新增一个id="test"的p标签,然后再修改jquery代码

  

1
2
3
4
5
6
7
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#test").hide();
        });
    });
</script>

  此时如果点击按钮,则只有id="test"的p标签会被隐藏掉

  技术分享技术分享

 

  三、.class选择器

    类选择器针对一些具有同一类名的元素,在body中增加2个类名相同的不同标签元素

    

1
2
3
4
5
6
7
8
9
<body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p id="test">id选择器</p>
    <span class="classname">类名选择器1</span>
    <p class="classname">类名选择器2</p>
    <button>点我</button>
</body>

  更改jquery代码

1
2
3
4
5
6
7
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".classname").hide();
        });
    });
</script>

  点击按钮则类名为classname的元素会被隐藏

技术分享技术分享

 


Jquery选择器