jQuery强大的选择器

最新推荐文章于 2022-07-11 20:43:47 发布

夏虫语冰彡

最新推荐文章于 2022-07-11 20:43:47 发布

阅读量537

点赞数

文章标签： jquery 选择器过滤选择器层次选择器表单选择器

本文链接：https://blog.csdn.net/qq_34283987/article/details/78023767

版权

选择器

作用: 用来选择标签的

jQuery中的选择器借鉴了CSS中选择器的思想，CSS中选择器选择出标签以后只能给标签加样式，而jQuery中的选择器选择出标签(或元素)后可以做任意操作。

基本选择器 Basic

1.id选择器
根据一个给定的id匹配一个元素，$(“#myDiv”)选取id为myDiv的元素。
演示：

<script src="../../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("#div1").css("background-color","yellow");
            });

            });

        </script>
html代码：
<div class="myClass" id="div1">
            我是div1
        </div>

        <div id="div2">
            我是div2
        </div>

        <span class="myClass" id="span1">
            我是span1
        </span>

2.标签选择器

$(function(){
                $("div").css("background-color","yellow");
            });

3.类选择器

$(function(){
                $(".myClass").css("background-color","yellow");
            });

4.组合选择器

$(function(){
                $("div,span").css("background-color","yellow");

            });

5.通配符选择器

    $(function(){
                $("*").css("background-color","yellow");
            });

层次选择器 level

1.子级（子代选择器和后代选择器）

html代码：
<div id ="div1">
            我是div1
            <div id="div2">
                我是div2
                <span>我是span1</span>                
                <p>我是p1</p>
            </div>
            <span id="span2">
                我是span2
            </span>

            <div id ="div3">
            我是div3  
            </div>

        </div>

js代码：子代选择器
$(function () {
                $("#div1>span").css("background-color","yellow");
            });
js代码：后代选择器
$(function () {
                $("#div1 span").css("background-color","yellow");
            });

2.同级（下一个和下面所有，上一个和上面所有）

js代码：下一个和下面所有
$(function() {

                //下一个
                alert($("#div1").next().html());

                var $obj = $("#div1").nextAll();
                //下面所有，循环遍历需要each()方法
//              alert($("#div1").nextAll().html());
//              $obj.each(
//                  function () {
//                      alert($(this).html());
//                  }
//              );
            });

js代码：上一个和上面所有
$(function() {
                //上一个
                alert($("#div2").prev().html());
//              alert($("#div2-sibling").html());

                //上面所有
//              var $obj = $("#span1").prevAll();
//              //上面所有，循环遍历需要each()方法
//              $obj.each(
//                  function () {
//                      alert($(this).html());
//                  }
//              );
            });

js代码：得到同级的所有兄弟
$(function () {
//              alert($("#div1").siblings().html());

                //each
                $("#div1").siblings().each(function () {
                    alert($(this).html());
                })
            });

过滤选择器filter（6个）

一、基本过滤10个

得到第一个元素
得到最后一个元素
去除所有与给定选择器匹配的元素
匹配一个给定索引值的元素
匹配所有小于给定索引值的元素
匹配所有索引值为奇数的元素，从0开始计数
匹配所有索引值为偶数的元素，从0开始计数
匹配所有大于给定元素值的元素
匹配如h1~h6的标题元素
匹配有动画的元素

1.$("tr:first")
2.$("tr:last")
3.$("input:not(:checked)")
4.$("tr:eq(1)")
5.$("tr:lt(2)")
6.$("tr:odd")
7.$("tr:even")
8.$("tr:gt(0)") 
9.$(":header")
10.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    $("div:not(:animated)").animate({left:"+=800"},3000);
                });

                $("#btn2").click(function () {
                    $("div:animated").stop();
                });

            })  ;

        </script>

        <style type="text/css">
            #div1{
                width:200px;
                height:200px;
                background-color: yellow;
                position: relative;
            }

            #div1:hover{
                width:300px;
                height:300px;
                left:20px;
                top:20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">

        </div>
        <input type="button" id="btn1" name="btn1" value="点我让div1动起来"/>
        <input type="button" id="btn2" name="btn2" value="点我停止动画"/>
    </body>
</html>

二、内容过滤4个

匹配保函给顶文本的元素
匹配含有选择器所匹配的元素的元素
匹配含有子元素或者文本的元素
匹配所有不包含子元素或者文本的空元素

1.$("div:contains('John')") 
2.$("div:has(p)")
3.$("td:parent") 
4.$("td:empty")

三、可见性过滤2个

匹配所有的不可见元素
匹配所有的可见元素

1.$(function () {
                //获得html中隐藏的input隐藏域的value
                alert($("input:hidden").attr("value"));
            });
//          $("tr:hidden")
2.$("tr:visible")

四、属性过滤7个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //查找所有含有 id 属性的 div 元素 
            $("div[id]")
            //匹配给定的属性是某个特定值的元素
            $("input[name='newsletter']").attr("checked", true); 

            //匹配所有含有指定的属性，但属性不等于特定值的元素。
            $("input[name!='newsletter']").attr("checked", true); 

            //匹配给定的属性是以某些值开始的元素
            $("input[name^='news']") 

            //匹配给定的属性是以某些值结尾的元素
            $("input[name$='letter']") 

            //匹配给定的属性是以包含某些值的元素
            $("input[name*='man']") 

            //复合属性选择器，需要同时满足多个条件时使用。
            $("input[id][name$='man']") 

        </script>
    </head>
    <body>
    </body>
</html>

五、子元素过滤4个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //匹配其父元素下的第N个子或奇偶元素
$("ul li:nth-child(2)") 

            //匹配第一个子元素
            $("ul li:first-child") 

            //匹配最后一个子元素
            $("ul li:last-child") 


            //如果某个元素是父元素中唯一的子元素，那将会被匹配
$("ul li:only-child") 

        </script>
    </head>
    <body>
    </body>
</html>

六、表单对象属性过滤4个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //匹配所有可用元素
            $("input:enabled") 

            //匹配所有不可用元素 
            $("input:disabled") 

            //匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
            $("input:checked") 

            //匹配所有选中的option元素
            $("select option:selected") 

        </script>
    </head>
    <body>
    </body>
</html>

表格隔行换色jQuery实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $(".tableClass tbody tr:even").css("background-color","yellow");//偶数
                $(".tableClass tbody tr:odd").css("background-color","blue");//奇数
            })
        </script>
    </head>
    <body>
        <table class="tableClass">
            <tr class="tableHead">
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品描述</th>
                <th>商品种类</th>
            </tr>
            <tbody>
                <tr>
                <td>1</td>
                <td>Macbook air</td>
                <td>苹果轻薄笔记本</td>
                <td>笔记本</td>
            </tr>

            <tr class="winBlue">
                <td>2</td>
                <td>iPad air2</td>
                <td>苹果最新平板电脑</td>
                <td>平板电脑</td>
            </tr>

            <tr>
                <td>3</td>
                <td>iphone6 plus</td>
                <td>苹果最新手机</td>
                <td>手机</td>
            </tr>
            </tbody>

        </table>
    </body>
</html>

补充：each()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                //不用each是  CoffeeMilkSoda 
//              document.write($("li").text() + "<br/>");

//              $("li").each(function () {
//                  document.write($(this).text()+"<br/>");
//              })

//不用each，太复杂
//              var $obj = $("ul>li");
//              for(var i in $obj){
//                  if($obj[i] instanceof HTMLLIElement){
//                      document.write($obj[i].innerHTML+"<br/>");
//                  }
//              }

            });
        </script>
    </head>
    <body>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
            <li>Soda</li>
        </ul>
    </body>
</html>