jQuery选择器

于 2020-01-13 12:13:49 发布
阅读量106 收藏
点赞数
分类专栏： DOM和jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36826618/article/details/103952233
版权

先给个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
    评论
专栏目录
JQuery属性值选择器
肥陈
05-27 1463
$("[attribute|=‘value’]") 选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。 attribute: 一个属性名 value: 一个属性值 $(function(){ $(‘a[hreflang|=“en”]’).css(“border”,“2px solid red”); //查找hreflang属性值是英语的所有链接。 }); $("[...
ul li img标签 图片不显示的问题
MyLoveSunset7777的专栏
06-05 4611
可以吧img标签去掉，在li元素中设置 background-image:url('xx.png');的形式显示如果ul设置的是 “inline”，这通常是为了能够水平居中显示，还要确保li元素的宽度足够大，若不显示的li元素没有足够大的图片或文字，可以使用多个&amp;nbsp;代替，参考：&lt;ul&gt;&lt;li class="bianhao"&gt;Copyright© 2005-2...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
详解jQuery选择器
10-20
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧
jQuery 选择器详解
10-24
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下
jQuery 选择器理解
10-29
凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.
jquery选择器大全 全面详解jquery选择器
10-26
jQuery选择器的设计灵感来源于CSS（层叠样式表）选择器，但功能更加强大，允许开发者以简洁的语法获取特定的DOM元素。 1. **基本选择器** - `#id`：通过元素的ID属性来选取单个元素，如`$("#myID")`。 - `element...
jQuery选择器总结
10-26
jQuery选择器总结，网上下载的，非原创的，仅供参考，学习学习。
Jquery选择器 $实现原理
10-29
在此之前对于Microsoft Ajax的Sys和Jquery的$符号一直很好奇， 不明白为什么输入一个'$()'就可以实现选择器？
基于jQuery选择器的整理集合
10-27
jQuery选择器是jQuery库的核心部分，它提供了一种高效的方式来选取和操作DOM元素。这篇文章将对jQuery选择器进行深入的整理和介绍。 首先，jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器...
jquery 选择器部分整理
10-29
jquery 选择器，jquery学习与开发中需要用的到，大家可以收藏下，另外可以看下本站提供的学习jquery的资料。
jQuery选择器全集详解
10-25
本文结合图文代码，基本上将所有的jQuery选择器都讲解了一遍，非常的详尽，希望对大家能有所帮助。
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

痴心的萝卜

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

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

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

打赏作者

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

抵扣说明：

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

余额充值