jQuery中常用的选择器；

jQuery中常用的选择器，有

$('标签名') 标签选择器

$('#id名') id选择器

$('.class名') 类选择器

层次选择器；

$('A B') 获得A元素内部的所有子元素B

$('A > B') 获得A元素内部的第一层所有子元素B

$('A + B') 获得A元素同级下一个B元素

$('A ~ B') 获得A元素后面的所有同级B元素

属性选择器；

$('A[属性名]') 获得有属性名的A元素‘；

$('A[属性名=值]') 获得属性名等于值的A元素；

$('A[属性名!=值]') 获得属性名不等于值的A元素；

过滤选择器；

$('A:first') 过滤出第一个；

$('A:last') 过滤出最后一个；

$('A:not(选择器)') 排除指定的元素；

第一排使用层级选择器，第二排按钮使用过滤选择器，来实现需求；

（1）创建视图；

（2）使用选择器完成需求；

（1）head部分；

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                $("div").css("background", "red");
            });
            $("#b2").click(function () {//
                $("body>div").css("background", "red");
            });
            var inputs = $("input");
            inputs.eq(2).click(function () {
                $("#one+div").css("background", "red")
            });
            inputs.eq(3).click(function () {
                $("#two~div").css("background", "red")
            });
        });
    </script>
    <!--属性选择器-->
    <script type="text/javascript">

    </script>
    <!--过滤选择器  "A:first" ,"A:not(选择器)"-->
    <script type="text/javascript">
        $(function () {
            var inputs=$("input");
            inputs.eq(4).click(function () {//这是下标为4的input标签
                $("div:first").css("background","blue");
            });
            inputs.eq(5).click(function () {//这是下标为5的input标签
                $("div:last").css("background","blue");
            });
            inputs.eq(6).click(function () {//这是下标为6的input标签
                $("div:not(.one)").css("background","blue");
            });
        });

    </script>

    <style type="text/css">
        span, div {
            width: 150px;
            height: 150px;
            float: left;
            border: black solid 1px;
            margin: 10px;
            background-color: lightskyblue;
        }

        .mini {
            width: 50px;
            height: 50px;
            float: left;
            border: black solid 1px;
            background-color: pink;
        }
    </style>
</head>

（2）body部分；

<body>
<input type="button" value="改变所有 <div>bgcolor红色" id="b1">
<input type="button" value="改变第一个子 <div>bgcolor红色" id="b2">
<input type="button" value="改变 id=one 的下一个 <div>bgcolor红色" id="b3">
<input type="button" value="改变 id=two后面的所有兄弟<div>bgcolor红色" id="b4">
<hr/>

<input type="button" value=" 改变第一个 div 元素的背景色为 蓝色" id="bt1">
<input type="button" value=" 改变最后一个 div 元素的背景色为 蓝色" id="bt2">
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 蓝色" id="bt3">
<hr/>
<div id="one">
    <div class="mini">1-1</div>
</div>
<div id="two">
    <div class="mini">2-1</div>
    <div class="mini">2-2</div>
</div>
<div class="one">
    <div class="mini">3-1</div>
    <div class="mini">3-2</div>
</div>
<div class="one">
    <div class="mini">4-1</div>
    <div class="mini">4-2</div>
    <div class="mini">4-3</div>
</div>
<span class="spanone">span</span>
</body>

筛选选择器；

jq对象.parent() 当前元素的亲生父级元素

jq对象.parents() 当前元素的所有父级元素

jq对象.siblings() 选出除了自己以外的所有同级元素，兄弟姐妹选择器

jq对象.children() 当前元素的第一层子元素

jq对象.find() 当前元素的指定子级元素

表单属性选择器；

$(':enabled') 选择可用的input标签

$(':disabled') 选择不可用的input标签

$(':checked') 选择选中的radio或者checkbox

$(':selected') 选择选中的<select>

案例，全选全不选；

使用 prop() 的形式来获取，比如表单元素的checked属性。

使用隔行换色，$(" tr:gt(1):even ")来跳过前两行；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
    <!--全选，全不选-->
    <script type="text/javascript">
        $(function () {
            $("#selectAll").click(function () {
                $(".itemSelect").prop("checked",this.checked);
            });

            $("tr:gt(1):even").css("background","yellow");
            $("tr:gt(1):odd").css("background","skyblue");
        });
    </script>

</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
    </tr>
    <tr>
        <th>全选<input type="checkbox" id="selectAll" ></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
</table>
</body>
</html>

jQuery中常用的选择器；

猜你喜欢