美文网首页
jQuery——选择器

jQuery——选择器

作者: DHFE | 来源:发表于2018-04-26 17:37 被阅读11次

基本选择器

基本选择器是jquery中最常见的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每一个id名称只能使用一次，class允许重复使用。

示例HTML与CSS：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    div,
    span,
    p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
    }

    div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
    }

    div.hide {
        display: none;
    }

    h1 {
        color: red;
    }
</style>

<body>
    <div class="one" id="one">
        ID为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div class="none" style="display: none">
        style的display为"none"的div
    </div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <span id="mover">正在执行动画的span元素</span>
</body>
<script src="./js/js.js"></script>

</html>

初始效果：


初始效果
#id
$("#one").css("background","#bbffaa");

功能描述：改变id为one的元素的背景色


$("#one").css("background","#bbffaa")
.class
$(".mini").css("background","#bbffaa");

功能描述：改变class为mini的所有元素的背景色

$(".mini").css("background","#bbffaa")
element

代码示例：

$("div").css("background","#bbffaa");

功能描述：改变元素名是<div>的所有元素的背景色

$("div").css("background","#bbffaa")
*

代码示例：

    $("*").css("background","#bfa");

功能描述：改变所有元素的背景色

$("*").css("background","#bfa");
selector1,selector2,.......,selectorN

将每一个选择器匹配到的元素合并后一起返回

代码示例：

    $("span, #two").css("background","#bbffaa");

功能描述：改变所有的<span>元素和id为two元素的背景色

$("span, #two").css("background","#bbffaa");

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

$("ancestor descendant")

选择ancestor元素里的所有descendant（后代）元素。（递归的选取子代，子子代）

    $("body div").css("background","#bbffaa");

功能描述：改变<body>内所有<div>元素的背景色

$("body div").css("background","#bbffaa");
$("parent > child")

选取parent元素下的child（子元素）元素。（仅子元素，无递归）

   $("body > div").css("background","#bbffaa");

功能描述：改变<body>内子元素<div>的背景色

$("body > div").css("background","#bbffaa");

类比W3C的CSS选择器示例：

element>element 选择器用于选取带有特定父元素的元素。 注释：如果元素不是父元素的直接子元素，则不会被选择。
$("parv + next")

选取紧接在prev元素后的next元素

       $(".one + div").css("background","#bbffaa");

功能描述：改变class为one的下一个<div>同辈元素背景色

$(".one + div").css("background","#bbffaa");

可以类比W3C的CSS选择器示例：

element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。
$("prev ~ siblings")

选取prev元素之后的所有siblings元素

    $("#two ~ div").css("background","#bbffaa");

功能描述：改变id为two的元素后面的所有<div>同辈元素的背景色。

$("#two ~ div").css("background","#bbffaa");

类比CSS选择器示例：

element1~element2 选择器 element1 之后出现的所有 element2。 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

在层次选择器中，第一个和第二个比较常用，后面两个因为在jquery里可以用更加简单的方法代替，所以使用的机率相对少些。

可以使用next()方法来代替$("prev + next")选择器

                $("prev + next")选择器与next()方法的等价关系
                
                    选择器                            方法
等价关系        $(".one + div");             $(".one").next("div")

可以使用nextAll()方法来代替$("prev ~ siblings")选择器

                $("#prev ~ div")选择器与nextAll()方法的等价关系

                    选择器                            方法
等价关系        $("#prev ~ div");             $("#prev").nextAll("div");
siblings()

这里多提一个siblings()方法：

$("#two").siblings("div").css("background","#bbffaa");

功能描述：选取id为two元素的所有同辈div元素，无论前后位置

$("#two").siblings("div").css("background","#bbffaa");

siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
而$("#prev ~ div")和$("prev").nextAll()匹配到的DIV元素都是在#prev元素之后的。

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见
性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

:first
$("div:first").css("background","#bbffaa");

功能描述：改变第一个<div>元素的背景色

$("div:first").css("background","#bbffaa");
:last
$("div:last").css("background","#bbffaa");

功能描述：改变最后一个<div>元素

$("div:last").css("background","#bbffaa");
:not(selector)
$("div:not(.one)").css("background","#bbffaa");

功能描述：去除所有与给定选择器匹配的元素，即取反。


$("div:not(.one)").css("background","#bbffaa");
:even

选取索引是偶数的所有元素，索引从0开始。

$("div:even").css("background","#bbffaa");

功能描述：改变索引值为偶数的<div>元素的背景色

$("div:even").css("background","#bbffaa");
:odd

选取索引是奇数的所有元素，索引从0开始。

$("div:odd").css("background","#bbffaa");

功能描述：改变索引值为奇数的<div>元素的背景色

$("div:odd").css("background","#bbffaa");
:eq(index)

选区索引等于index的元素，index从0开始

$("div:eq(3)").css("background","#bbffaa");

功能描述：改变索引值等于3的<div>元素的背景色。

$("div:eq(3)").css("background","#bbffaa");
:gt(index)

选区索引大于index的元素，index从0开始

$("div:gt(3)").css("background","#bbffaa");

功能描述：改变索引值大于3的<div>元素的背景色。

$("div:gt(3)").css("background","#bbffaa");
:lt(index)

选区索引小于index的元素，index从0开始

$("div:lt(3)").css("background","#bbffaa");

功能描述：改变索引值小于3的<div>元素的背景色。

$("div:lt(3)").css("background","#bbffaa");
:header

选取所有的标题元素，例如h1,h2,h3等

$(":header").css("background","#bbffaa");

功能描述：改变所有的标题元素的背景色。

$(":header").css("background","#bbffaa");
:animated

选取当前正在执行动画的所有元素

$(":animated").css("background","#bbffaa");

功能描述：改变当前正在执行动画的元素的背景色

:focus

选取当前获取焦点的元素

$(":focus").css("background","#bbffaa");

功能描述：改变当前获取焦点的元素的背景色

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

:contains(text)

选取含有文本内容为"text"的元素

$("div:contains(di)").css("background","#bbffaa");

功能描述：选取含有文本内容为"di"的的元素

$("div:contains(di)").css("background","#bbffaa");
:empty

选取不包含子元素或者文本的空元素。（空格符也不许有哦）

$("div:empty").css("background","#bbffaa");

功能描述：改变不包含子元素（包括文本元素）的<div>空元素的背景色。

:has(selector)

选取含有选择器所匹配的元素的元素。

$("div:has('.mini')").css("background","#bbffaa");

功能描述：改变，含有class为mini元素的<div>元素的背景色。


$("div:has('.mini')").css("background","#bbffaa");
:parent

选取含有子元素或者文本的元素。（含有空格符也会被选中）

$("div:parent").css("background","#bbffaa");

功能描述：改变含有子元素的<div>元素的背景色

$("div:parent").css("background","#bbffaa");

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态选择相应的元素。

:hidden

选取所有不可见的元素

$("div:hidden").show(2000);

功能描述：显示隐藏的<div>元素


$("div:hidden").show(2000);
:visible

选取所有可见的元素

$("div:visible").css("background","#ff6500");

功能描述：改变所有可见的<div>元素的背景色

$("div:visible").css("background","#ff6500");

**在可见性选择器中，需要注意:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域（<input type="hidden" />）和visibility:hidden之类的元素。

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

[attribute]

选取拥有此属性的元素

    $("div[title]").css("background","#bbffaa");

功能描述：改变含有属性title的<div>元素的背景色。

$("div[title]").css("background","#bbffaa");
[attribute=value]

选取属性的值为value的元素

$("div[title=test]").css("background","#bbffaa");

功能描述：改变属性title值等于“test”的<div>元素的背景色


$("div[title=test]").css("background","#bbffaa");
[attribute!=value]

选取属性的值不等于value的元素

    $("div[title!=test]").css("background","#bbffaa");

功能描述：改变属性title值不等于"test"的<div>元素

$("div[title!=test]").css("background","#bbffaa");
[attribute^=value]

选取属性的值以value开始的元素

    $("div[title^=te]").css("background","#bbffaa");

功能描述：改变属性title值以"te"开始的<div>元素的背景色

$("div[title^=te]").css("background","#bbffaa");
[attribute$=value]

选取属性的值以value结束的元素

    $("div[title$=est]").css("background","#bbffaa");

功能描述：改变属性title值以"est"结束的<div>元素的背景色


$("div[title$=est]").css("background","#bbffaa");
[attribute*=value]

选取属性的值含有value的元素

    $("div[title*=es]").css("background","#bbffaa");

功能描述：改变属性title值含有"es"的<div>元素的背景色

$("div[title*=es]").css("background","#bbffaa");
jQuery属性选择器的过滤规则比较多，特别容易混淆，为此，把几个容易混淆的单独做一个例子。

HTML：

    <div title="en">title为 en 的div元素</div>
    <div title="en-UK">title为 en-UK 的div元素</div>
    <div title="english">title为 english 的div元素</div>
    <div title="en uk">title为 en uk 的div元素</div>
    <div title="uken">title为 uken 的div元素</div>

初始效果图：


[attribute^=value]
    $("div[title^='en']").css("background","#bbffaa");

功能：改变属性title值以“en”开始的<div>元素的背景色


$("div[title^='en']").css("background","#bbffaa");
[attribute*=value]
    $("div[title*='en']").css("background","#bbffaa");

功能：改变属性title值含有“en”的<div>元素的背景色


$("div[title*='en']").css("background","#bbffaa");
[attribute|=value]

选取属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个-）的元素

    $("div[title|='en']").css("background","#bbffaa");

功能：改变属性title值等于en，或以en为前缀（后跟一个-）的元素的背景色

$("div[title|='en']").css("background","#bbffaa");
[attribute~=value]

选取属性用空格分隔的值中包含一个给定值的元素。

        $("div[title~='uk']").css("background","#bbffaa");

功能：改变属性title用空格分隔的值中包含字符uk的元素的背景色。

$("div[title~='uk']").css("background","#bbffaa");

子元素过滤器

子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，要注意它与普通的过滤选择器的区别。

:nth-child(index/even/odd/equation)

选取每个父元素下的第index个子元素或奇偶元素（index从1算起）

$("div.one :nth-child(2)").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的第2个子元素的背景色。


$("div.one :nth-child(2)").css("background","#bbffaa");
:first-child

选取每个父元素的第1个子元素

$("div.one :first-child").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的第1个子元素的背景色。

$("div.one :first-child").css("background","#bbffaa");
:last-child

选取每个父元素的最后一个子元素

$("div.one :last-child").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的最后一个子元素的背景色。

$("div.one :last-child").css("background","#bbffaa");
:only-child

如果某个元素，是它父元素中唯一的子元素，那么将会匹配。如果父元素中含有其他元素，则不匹配。

$("div.one :only-child").css("background","#bbffaa");

功能描述：如果class为one的<div>父元素下只有一个子元素，那么改变这个子元素的背景色。

$("div.one :only-child").css("background","#bbffaa");

nth-child()选择器是很常用子元素过滤选择器

  1. :nth-child(even)：选取每个父元素下的索引值是偶数的元素
  2. :nth-child(odd)：选取每个父元素下的索引值是奇数的元素。
  3. :nth-child(2)：选取每个父元素下的索引值等于2的元素。
  4. :nth-child(3n)：选取每个父元素下的索引值是3的倍数的元素，（n从1开始）。
  5. :nth-child(3n+1)：选取每个父元素下的索引值是（3n+1）的元素，（n从1开始）。

表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

演示HTML：

    <form id="form1" action="#">
        可用元素：
        <input type="add" value="可用文本框"><br/> 
        不可用元素：
        <input name="email" disabled="disabled" value="不可用文本框"><br/> 
        可用元素：
        <input name="che" value="可用文本框"><br/> 
        不可用元素：
        <input name="name" disabled="disabled" value="不可用文本框"><br/>
        <br/>
        多选框：<br/>
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
![1.jpg](https://img.haomeiwen.com/i1666407/2f098c9abe34f9a3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <input type="checkbox" name="newsletter" value="test2" />test2
        <input type="checkbox" name="newsletter" value="test3" />test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
        <input type="checkbox" name="newsletter" value="test5" />test5
        <div></div>
        <br/><br/>
        下拉列表1：<br/>
        <select name="test" multiple="multiple" style="height: 100px">
            <option>浙江</option>
            <option selected="selected">湖南</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br/><br/>
        下拉列表2：<br/>
        <select name="test2">
            <option>浙江</option>
            <option>湖南</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <div></div>
    </form>

初始状态：


初始
:enabled

选取所有可用元素

    $("#form1 input:enabled").val("这里变化了！").css("color","red");

功能描述：改变表单内可用<input>元素的值和字体颜色


$("#form1 input:enabled").val("这里变化了！").css("color","red");
:disabled

选取所有不可用元素

    $("#form1 input:disabled").val("这里变化了！").css("color","red");

功能描述：改变表单内不可用<input>元素的值和字体颜色


$("#form1 input:disabled").val("这里变化了！").css("color","red");
:checked

选取所有被选中的的元素（单选框，复选框）

        $("input:checked").length;

功能描述：获取多选框选中的个数


$("input:checked").length;
:selected

选取所有被选中的选项元素（下拉列表）

$("select :selected").text();

功能描述：获取下拉框选中的内容


表单选择器

为了是用户能够更加灵活的操作表单，jQuery中专门加入表单选择器。

HTML：

    <form action="#" id="form1">
        <input type="button" value="Button"><br/>
        <input type="checkbox" name="c">1
        <input type="checkbox" name="c">2
        <input type="checkbox" name="c">3<br/>
        <input type="file"><br/>
        <input type="hidden"><div style="display: none;">test</div><br/>
        <input type="image"><br/>
        <input type="password"><br/>
        <input type="radio" name="a">1<input type="radio" name="a">2<br/>
        <input type="reset"><br/>
        <input type="submit" value="提交"><br/>
        <input type="text"><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>

初始效果：


:input

选取所有的<input>，<textarea>，<select>，<button>元素。

:text

选取所有的单行文本框

:password

选取所有的密码框

:radio

选取所有的单选框

:checkbox

选取所有的复选框

:submit

选取所有的提交按钮

:image

选取所有的图像按钮

:reset

选取所有的重置按钮

:button

选取所有的按钮

:file

选取所有的上传域

:hidden

选取所有的不可见元素

选择器中的一些注意事项

选择器中含有特殊符号的注意事项

  1. 选择器中含有特殊字符
    HTML：
    <div id="id#b">bb</div>
    <div id="id[1]">cc</div>

如果按照普通的方式获取，例如：

    $("#id#b");
    $("#id[1]");

以上代码不能正确获取到元素，正确写法如下：

$("#id\\#b");
$("#id\\[1\\]");

2.选择器中含有空格的注意事项
选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。
HTML：

    <div class="test">
        <div style="display: none">aa</div>
        <div style="display: none">bb</div>
        <div style="display: none">cc</div>
        <div class="test" style="display: none">dd</div>
    </div>
    <div class="test" style="display: none">ee</div>
    <div class="test" style="display: none">ff</div>

使用如下的jQuery选择器分别获取它们。

    var $t_a = $(".test :hidden");      // 带空格的JQuery选择器
    var $t_b = $(".test:hidden");       // 不带空格的JQuery选择器
    var len_a = $t_a.length;
    var len_b = $t_b.length;

    console.log(len_a);     // 4
    console.log(len_b);     // 3

之所以结果不同，是因为后代选择器与过滤选择器的不同。

    var $t_a = $(".test :hidden");

选取class为test的元素里面的隐藏元素

    var $t_b = $(".test:hidden");

选取隐藏的class为test的元素。

相关文章

  • jquery选择器书目录

    jquery选择器-基本选择器 jquery选择器-层级选择器 jquery选择器-基本过滤选择器 jquery选...

  • JQUERY一

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery 事件 jQuery...

  • jQuser有选择器

    jQuery基本选择器 jQuery过滤选择器 jQuery层级选择器 jQuery筛选选择器(方法)

  • 选择器

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery选择器

    一、jQuery常用选择器 二、jQuery选择器优势 三、jQuery常用基本选择器 四、jQuery常用层次选...

  • JQuery基础知识

    jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样式 css操作...

  • jQuery相关知识

    1、什么是jQuery选择器？ jQuery选择器

  • jQuery选择器

    jQuery选择器 jQuery选择器完全继承了CSS的风格。学会使用选择器是学习jQuery的基础，jQuery...

网友评论

      本文标题：jQuery——选择器

      本文链接：https://www.haomeiwen.com/subject/muepsxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|jQuery——选择器|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！