jQuery选择器

最新推荐文章于 2024-08-27 14:36:26 发布

君诀

最新推荐文章于 2024-08-27 14:36:26 发布

阅读量207

点赞数 2

文章标签： jquery html html5

本文链接：https://blog.youkuaiyun.com/qq_48241564/article/details/120166393

版权

一、基本选择器

1、id选择器

简述：可以根据给定的id匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        $(function () {
           $("#myId").click(function () {
               alert($(this).html());
           })
        })
    </script>
</head>
<body>
<div id="myId">
    你好;
</div>
</body>
</html>

2、标签选择器

简述：根据给定的元素名匹配所有元素。

3、类选择器

简述：根据给定的类匹配元素。

4、全局选择器

简述：匹配所有元素，多用于结合上下文来搜索。

<script>
$("*").click(function () {//全局选择器
            $(".myID").css("color","#ff0fff");//类选择器
        })
</script>
<body>
<div id="myId" class="myID">
    你好;
</div>

5、并集选择器

简述：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

     $(".myID,#myId,div").click(function () {
                $(this).css("color","#bbbbbb")
            })

二、层级选择器

1、后代选择器

简述：在给定的祖先元素下匹配所有的后代元素。

  <script>
        $(function () {
            $("h4").click(function () {
                $("#myId span").css("color","red");//将id为myId下的span元素都显示出来
            })
        })
    </script>
<body>
<div id="myId" class="myID">
    <h4>你好;</h4>
    <span>h4下面的</span>
    <span>span下面的</span>
</div>
</body>

2、子选择器

简述：在给定的父元素下匹配所有的子元素。

    <script>
        $(function () {
            $("#myId>span").css("color","red");//将id为myId下的子元素span修改为红色,只找子元素，不包含子元素的子元素
        })
    </script>

3、相邻元素选择器

简述：匹配所有紧接在 prev 元素后的 next 元素。

    <script>
        $(function () {
            $("h4+span").css("color","red");//h4标下的span元素修改为红色
        })
    </script>

4、同辈元素选择器

简述：匹配 prev 元素之后的所有 siblings 元素（同辈的）。

  <script>
        $(function () {
            $("h4~span").css("color","red");//h4标下的同辈的所有span元素修改为红色
        })
    </script>

三、属性选择器

1、包含属性的选择器[attribute]

简述：匹配包含给定属性的元素。

   <script>
        $(function () {
            $("li").css("color","red");//包含标签li修改为红色
        })
    </script>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>夸克</li>
    <li>QQ</li>
    <li>火狐</li>
</ul>
</body>

2、[attribute=value]

简述：匹配给定的属性是某个特定值的元素。

    <script>
        $(function () {
            $("[title='baidu']").css("color","red");//包含属性为title=baidu的修改为红色
        })
    </script>

3、[attribute!=value]

简述：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

 <script>
        $(function () {
            $("[title!='baidu']").css("color","red");//不包含属性为title=baidu的修改为红色
        })
    </script>

4、[attribute^=value]

简述：匹配给定的属性是以某些值开始的元素。

 <script>
        $(function () {
            $("[title^='b']").css("color","red");//属性值以b开头的修改为红色
        })
    </script>

5、[attribute$=value]

简述：匹配给定的属性是以某些值结尾的元素。

 <script>
        $(function () {
            $("[title^='b']").css("color","red");//属性值以b结尾的修改为红色
        })
    </script>

6、[attribute*=value]

简述：匹配给定的属性是以包含某些值的元素。

 <script>
        $(function () {
            $("[title*='b']").css("color","red");//属性值包含b的修改为红色
        })
    </script>

四、基本过滤选择器

1、:first，:last

简述：分别是获取第一个元素和最后一个元素

<script>
        $(function () {
            $("li:first").css("color","red");//li的第一个元素修改为红色
            $("li:last").css("color","red");//li的最后一个元素修改为红色
        })
    </script>

2、:eq(index)

简述：匹配一个给定索引值的元素。

<script>
        $(function () {
            $("li:eq(0)").css("color","red");//li的第一个元素修改为红色
            $("li").eq(0).css("color","red");//li的第一个元素修改为红色
        })
    </script>

3、:even，:odd

简述：匹配所有索引值为偶数的元素，从 0 开始计数（even），匹配所有索引值为奇数的元素，从 0 开始计数(odd)。

<script>
        $(function () {
            $("li:even").css("color","red");//li的偶数元素修改为红色
            $("li:odd").css("color","green");//li的奇数元素修改为绿色
        })
    </script>

4、:gt(index)，:lt(index)

简述：匹配所有大于给定索引值的元素（gt）,匹配所有小于给定索引值的元素(lt)

<script>
        $(function () {
            $("li:gt(0)").css("color","red");//li的大于0修改为红色
            $("li:lt(0)").css("color","green");//li的小于0的修改为绿色
        })
    </script>

5、:not(selector)

简述：去除所有与给定选择器匹配的元素。

<script>
        $(function () {
            $("li:not(#id)").css("color","red");//li的去除id属性为id的修改为红色
        })
    </script>

6、:header

简述：匹配如 h1, h2, h3之类的标题元素

<script>
        $(function () {
            $(":header").css("color","red");//所有的h标签改为红色
        })
    </script>

五、可见过滤器选择器

1、:hidden，:visible

简述：匹配所有不可见元素，或者type为hidden的元素（hidden），匹配所有的可见元素(visible)

    <script>
        $(function () {
           $("[title='show']").click(function () {
               $("body :visible:not(.hidden)").hide();
//空格代表是对body内部的元素进行隐藏，没空格就是对包括的进行隐藏
           });
           $(".hidden").click(function () {
               $(":hidden").show();
           });
        })
    </script>
<body>
<ul>
    <li title="baidu">百度</li>
    <li title="google">谷歌</li>
    <li title="kuake">夸克</li>
    <li title="QQ">QQ</li>
    <li title="firefox">火狐</li>
</ul>
<input type="button" value="显示" title="show"/>
<input type="button" value="隐藏" class="hidden"/>
</body>