首页 > 代码库 > Jquery选择器

Jquery选择器

2024-10-10 21:07:02   215人阅读

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选择器


联系
我们