jQuery选择器

先给个demo,下面给出的jQuery语句请逐行注释看效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器 - 选择器</title>
    <style>
        ul {
            width: 600px;
            list-style: none;
        }
        li {
            margin-top: 10px;
            padding: 20px;
            border: 2px dotted #ccc;
        }
    </style>
</head>
<body>
    <h1>jQuery选择器 - 选择器</h1>
    <hr>
    <ul id="firstList">
        <li>a b c d e f g</li>
        <li class="item" id="myItem">a b c d e f g</li>
        <li lang="cn">a b c d e f g</li>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <li></li>
        <li></li>
    </ul>


    <ul id="secondList">
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <li>a b c d e f g
            <ul>
                <li>hello li</li>
                <li class="current">hello li</li>
                <li>hello li 同志</li>
                <li>hello li</li>
            </ul>
        </li>
        <li class="item">a b c d e f g</li>
        <li>a b c d e f g</li>
    </ul>
    <hr>
    <p class="item">a b c d e f g</p>

    <img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg">
    <img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello world">
    <img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello you">
    <img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="abc">
    <img style="width: 150px" src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="hello" title="bbd">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
			// 内容
		})
    </script>
    </body>
</html>
1. 基本选择器
  • ID 选择器 #IDName
  • CLASS选择器 .className
  • 标签名选择器 tagName
  • 组合选择器
  • * 全局选择器
  • selector,selector,selector
          // 基本选择器
          // ID 选择器
          $("#firstList").css("border", "2px solid red");

            // class 选择器
            $(".item").css("border", "2px solid yellow");

            // 标签名选择器
            $("li").css("border", "3px solid green");

            // 全局选择器
            $("*").css("border", "1px solid purple");

            // 组合选择器
            $("li.item").css("border", "1px solid red");

            // 多个选择器
            $("li,p").css("border", "1px solid yellow");
2. 层级选择器
  • 选择器 选择器 ul li 后代元素
  • 选择器>选择器 ul>li 子元素
  • 选择器+选择器 ul+li 紧邻的兄弟元素
  • 选择器~选择器 ul~li 后面所有的兄弟元素
            // 层级选择器
            // 后代元素
            $("#secondList li").css("border", "3px solid red");

            // 子元素
            $("#secondList>li").css("border", "3px solid red");

            // 紧邻的兄弟元素
            $("#myItem+li").css("border", "2px solid green");

            // 后面所有的兄弟元素
            $("#myItem~li").css("border", "2px solid black");

3. 筛选选择器
  • :first
  • :last
  • :eq(index) 从0开始
  • :lt(index) <
  • :gt(index) >
  • :odd 奇数
  • :even 偶数
  • :not(选择器)
  • :lang()
  • :root
  • :header 所有的标题标签
  • :focus 获取焦点的元素
  • :target 锚点指向的元素
  • :animated 正在执行动画的元素
            // 筛选选择器
            // $("#secondList li").css("border", "2px solid pink");
            $("#secondList li:first").css("border", "2px solid pink");
            $("#secondList li:last").css("border", "2px solid yellow");
            // 从第0个开始数,满足冒号前面选择器里面的集合中的第4个
            $("#secondList li:eq(4)").css("border", "2px solid red");
            // 从第0个开始数,满足冒号前面选择器里面的集合中大于第二个的
            $("#firstList li:gt(2)").css("border", "5px solid red");
            // 从第0个开始数,满足冒号前面选择器里面的集合中小于第二个的
            $("#firstList li:lt(2)").css("border", "5px solid red");
            // 奇数行
            $("#firstList li:odd").css("background", "#ccc");
            // 偶数行
            $("#firstList li:even").css("background", "#369");
            // 除了class是item的
            $("#firstList li:not(.item)").css("background", "green");
            // 语言为en的都是黄色
            $("#firstList li:lang(en)").css("background", "yellow");

            $(":first").css("border","10px solid red");
            // 上下两种写法相等
            $("*:first").css("border","10px solid red");
            // 所有h标签都满足 h1、h2、h3等等
            $(":header").css("color","red");
            // 获得焦点时
            $(":focus").css("border", "2px solid red");
            // 过滤出根元素
            $(":root").css("border", "2px solid #999");
            // 过滤出 锚点正在指向的元素 在网址后面添加#firstList后刷新会自动跳到该位置,如xxx.html#firstList
            $(":target").css("border", "2px solid red");

4. 内容选择器
  • :contains(text) 包含指定的文本
  • :has(selector) 包含满足条件的后代元素的元素
  • :empty 没有内容也没有子元素
  • :parent 跟empty相反
            // 内容选择器
            // 过滤文本内容有同志的li标签
            $("li:contains('同志')").css("border","2px solid red");
            // 必须包含一个class是current的后代元素 的 li标签
            $("li:has('.current')").css("border", "2px solid red");
            // 不能有内容 也不能有子元素
            $("#firstList li:empty").css("border", "2px solid green");
            // 要么有内容 要么有子元素
            $("#firstList li:parent").css("border", "2px solid purple");

5. 可见性选择器
  • :hidden 不可见的元素
  • visible 可见的元素
            // 可见性选择器
            // 可见的元素
            $(":visible").css("border", "1px solid red");
6. 属性选择器
  • [attrName]
  • [attrName=value]
  • [attrName!=value]
  • [attrName^=value]
  • [attrName$=value]
  • [attrName*=value]
  • [][][]
            // 属性选择器
            // 选择带有alt属性的img标签
            $("img[alt]").css("border", "5px solid green");
            // alt为abc
            $("img[alt='abc']").css("border", "5px solid green");
            // alt不是abc
            $("img[alt!='abc']").css("border", "5px solid green");
            // 以hello开头的
            $("img[alt^='hello']").css("border", "5px solid blue");
            // 以d结尾的
            $("img[alt$='d']").css("border", "5px solid red");
            // 包含o字符都是
            $("img[alt*='o']").css("border", "5px solid black");
            // 包含o字符并且还有title属性的
            $("img[alt*='o'][title]").css("border", "5px solid purple");

7. 子元素选择器
  • :first-child
  • :last-child
  • :nth-child(index) 从1开始
  • :nth-last-child(index)
  • only-child
  • filrst-of-type
  • last-of-type
  • nth-of-type(index)从1开始
  • nth-last-of-type(index)
  • :only-of-type
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器 - 选择器</title>
    <style>
        ul {
            width: 600px;
            list-style: none;
        }
        li,p {
            margin-bottom: 10px;
            padding: 20px;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>jQuery选择器 - 子元素选择器</h1>
    <hr>
    <ul>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <li>a b c d e f g
            <ol>
                <li>a b c d e f g</li>
                <li>a b c d e f g</li>
                <li>a b c d e f g</li>
                <li>a b c d e f g</li>
                <li>a b c d e f g</li>
            </ol>
        </li>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
    </ul>
    <ul id="myList">
        <p style="background-color: #f5f5f5">a b c d e f g</p>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <p style="background-color: #f5f5f5">a b c d e f g</p>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <li>a b c d e f g</li>
        <p style="background-color: #f5f5f5">a b c d e f g</p>
        <li>a b c d e f g</li>
    </ul>
    <ul>
        <li>hello world</li>
    </ul>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            // *-child  *-of-type

            // -child系列的
            // 选择一个 是所有兄弟元素里面第一个的 li元素
            $("li:first-child").css("border", "2px solid red");
            // 与first-child相反
            $("li:last-child").css("border", "2px solid red");
            // 所有兄弟元素中的第三个li
            $("li:nth-child(3)").css("border", "2px solid red");
            $("li:nth-last-child(3)").css("border", "2px solid red");
            // 没有兄弟元素的li
            $("li:only-child").css("border", "2px solid yellow");


            // -of-type系列
            // 选择 所有兄弟元素里面的第五个
            $("#myList li:nth-child(5)").css("border", "2px solid red");
            // 选择 所有兄弟元素里面相同标签的第五个, 它不会考虑其他元素位置的影响,只对li标签的位置排序
            $("#myList li:nth-of-type(5)").css("border", "2px solid red");
            // 其他-of-type系列也是这种区别
        })
    </script>
</body>
</html>
8. 表单选择器
  • :input 所有的表单控件(input textarea select button …)
  • :text / :password / :radio / :checkbox / :file / :reset / 根据input的type值
  • :submit 所有具有提交功能的按钮 (button input:submit)
  • :button button元素 input:button
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单选择器</title>
    <style>
        ul {
            width: 600px;
            list-style: none;
        }
        li,p {
            margin-bottom: 10px;
            padding: 20px;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>jQuery表单选择器</h1>
    <hr>
    <form action="#">
        <table>
            <tr>
                <td>Text:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>Pwd:</td>
                <td><input type="password" name="pwd" id="" disabled></td>
            </tr>
            <tr>
                <td>radio:</td>
                <td>
                    <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="w"></td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>
                    <input type="checkbox" name="">
                    <input type="checkbox" name="">
                    <input type="checkbox" name="">
                    <input type="checkbox" name="" checked>
                </td>
            </tr>
            <tr>
                <td>file</td>
                <td>
                    <input type="file" name="">
                </td>
            </tr>
            <tr>
                <td>select</td>
                <td>
                    <select name="">
                        <option value="1">A</option>
                        <option value="2" selected>B</option>
                        <option value="3" disabled>C</option>
                        <option value="4">D</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>textarea</td>
                <td>
                    <textarea name="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>按钮:</td>
                <td>
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                    <input type="button" value="普通按钮">
                    <button>button</button>
                    <button type="button">不能提交的button</button>
                </td>
            </tr>
        </table>
    </form>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            // 所有的表单控件
            $(":input").width(150).height(40).css("border","1px solid red");
            $(":text").css("border","1px solid red");
            $(":password").css("border","1px solid red");
            $(":radio").width(100).height(100);
            $(":checkbox").width(100).height(100);
            $(":file").css("border", "1px solid red");
            // 具有提交功能的按钮
            $(":submit").css("border","1px solid red");
            $(":reset").css("border","1px solid yellow");
            $(":button").css("border","1px solid purple");
        })
    </script>
</body>
</html>
9. 表单对象选择器
  • :disabled
  • :enabled
  • :checked
  • :selected
            // 表单对象选择器
            // 不可用的变黄
            $(":disabled").css("background-color","yellow");
            // 可用的
            $(":enabled").css("background-color","red");
            // $(":checked").width(50).height(50);
            // $(":selected").css("color","blue");
10. 混淆选择器
  • $.escapeSelector(selector) className或IDName是有特殊符号
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器 - 混淆选择器</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <div class="box" id="#item"></div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            // 如果id是个特殊的名字,就用$.escapeSelector
            $("#"+$.escapeSelector("#item")).css("background-color", "red");
        })
    </script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

痴心的萝卜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值