jQuery 常用选择器的用法

在使用jquery的时候一定要进行正确的安装
dom对象与jquery的相互转换

选择器

标记选择器：css中的元素（p,h,span…..）
id选择器：给元素一个id名（#id名称）
类选择器：给元素一个class名（.class名）

*$(““)：选取所有的**

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){//给按钮一个点击事件
                    $("*").hide();//隐藏
                });
            });
        </script>
    </head>
    <body>
        <h3>我是h3标签</h3>
        <p>我是p标签</p>
        <button>点我</button>
    </body>
</html>

$(“h3:first”) ：选取第一个h3元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    $("h3:first").hide();
                });
            });
        </script>

    </head>
    <body>
        <h3>我是h3标签</h3>
        <h3>我也是h3标签</h3>
        <p>我是p标签</p>
        <button>点我</button>
    </body>
</html>

相似的还有
$(“ul li:first”)：无序列表下的第一个li

$(“[href]”):选取带有href的（【】里是什么内容就选取什么）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    $("[href]").hide();
                });
            });
        </script>
    </head>
    <body>
        <a href="#">♪(^∇^*)</a>
        <button>点我</button>
    </body>
</html>

  $(xx[属性名='属性值'])  匹配属性值
  $(xx[属性名!='属性值'])  不匹配属性值
  $(xx[属性名^='字符串'])   属性值以指定字符串开头
  $(xx[属性名$='字符串'])   属性值以指定字符串结尾
  $(xx[属性名*='字符串'])   属性值包含指定字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    $("a[href='#001']").css("color","red");
//                  $("a[href!='#001']").css("color","yellow");
                    $("p[class^='o']").css("color","red");//以指定字符串开始
                    $("p[class$='o']").css("color","red");//以指定字符串结尾
                    $("p[class*='www']").css("color","red");//包含指定元素

                });
            });
        </script>
    </head>
    <body>
        <a href="#001">O(∩_∩)O哈哈~</a><br />
        <a href="#002">O(∩_∩)O哈哈~</a><br />
        <a href="#003">O(∩_∩)O哈哈~</a><br />
        <p class="one">我是class名为one的p标记</p>
        <p class="two">我是class名为two的p标记</p>
        <p class="www">我是用来测试包含指定字符</p>
        <button>点我</button>
    </body>
</html>

** $(“xxx:eq(index)”) 选择等于当前索引元素（从0开始）$ (“xxx:gt(index)”) 选择大于当前索引元素（从0开始）
$(“xxx:lt(index)”) 选择小于当前索引元素（从0开始）$ (“xxx:header”) 选择所有标题元素（h1~h6）**

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                     $("li:eq(0)").css("color","blue");//指定索引
                     $("li:gt(2)").css("color","blue");//大于指定索引
                     $("li:lt(3)").css("color","blue");//小于指定索引
                });
            });
        </script>

    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button>点击</button>
    </body>
</html>

jQuery 常用选择器的用法

猜你喜欢