jquery选择器篇

Posted 2020-07-07 Peng4Wang1

var j = jquery.noConflict();

让出对变量$的控制权，并将jquery付给别名j

jquery.noConflict(true);让出对变量$和jquery的控制权

jQuery(selector, context)  

selector 表示选择器

<div ><div><input/></div></div>

$(div <div <input)

$(div).find(div).find(input).eq(0)

context 表示jquery对象

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

var $li = $("ul li");
// 返回当前文档的document对象
document.writeln( $li.context ); // [object htmlDocument]
document.writeln( $li.context === document ); // true

var n1 = document.getElementById("n1");
var $n3 = $( "#n3", n1 );
// 返回n1
document.writeln( $n3.context ); // [object HTMLDivElement]
document.writeln( $n3.context === n1 ); // true

var $n2 = $("#n2");
var $n4 = $( "#n4", $n2 );
// 返回$n2的context属性：document对象
document.writeln( $n4.context ); // [object HTMLDocument]
document.writeln( $n4.context === document ); // true

var $n3 = $("#n3", n1);
var $n5 = $( "#n5", $n3 );
// 返回$n3的context属性：n1
document.writeln( $n5.context ); // [object HTMLDivElement]
document.writeln( $n5.context === n1 ); // true

jQuery.length 属性详解

length表示jquery对象封装的dom元素个数,如果该对象是一个空的jQuery对象，没有封装任何元素，则返回0。

jQuery.size() 函数详解

size()函数用于

返回当前jQuery对象封装的元素个数

。

jQuery.index() 函数详解

index()函数用于获取当前jQuery对象中指定DOM元素的索引值。

Jquery("#id") 通过id访问元素

Jquery("Div")通过TagName访问元素

Jquery(".className") 通过className访问元素

<div id="n1">
    <p id="n2" class="test"></p>
    <p id="n3" class="detail">
        <span id="n4" class="test codeplayer"></span>
    </p>
</div>

// 选择了id分别为n1、n2、n4的三个元素
$("#n1,#n2,span.test");

// 选择了id分别为n3、n2、n4的三个元素
$("p.detail,.test");

jQuery 选择器(parent > child)详解

// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>

// 选择了id分别为n3、n5的两个元素
// n6不是p标签的子元素，而是孙子辈的元素，因此无法匹配
$("p > span");

我们可以配合使用所有元素选择器(*)来实现只查找孙子辈元素的选择器。例如：我们想要查找id为n1的元素的孙子辈的span标签，对应的jQuery代码如下：

// 选择了id分别为n3、n5的两个元素
$("#n1 > * > span");

jQuery 选择器(prev + next)详解

选择器next的查找范围必须是与"prev元素"

相邻的下一个元素

，并且必须是"prev元素"的

同辈元素

。

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>

现在，我们想要查找与p标签相邻的下一个同辈p标签，则可以编写如下jQuery代码：

// 选择了id为n5的一个元素
$("p + p");

接着，我们查找与span标签相邻的下一个同辈span标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span");

查找与包含类名a的span标签相邻的下一个同辈span标签，对应的jQuery代码如下：

// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a，因此无法匹配其next——n9
$("span.a + span");

jQuery 选择器(prev ~ siblings)详解

jQuery的prev ~ siblings选择器用于匹配prev元素

之后

的所有

同辈

的siblings元素，将其封装为jQuery对象并返回。

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>

// 选择了id为n5的一个元素
$("p ~ p");

// 选择了id分别为n4、n8、n9的三个元素
// n9属于n7的~siblings，也是n8的~siblings，同一个元素只计入一次
$("span ~ span");

jQuery 选择器(:first)详解

jQuery的:first选择器用于

获取匹配到的第一个元素

，将其封装为jQuery对象并返回。:first选择器等价于:eq(0)选择器。

// 选择了id为n1的一个元素
$("div:first");

// 选择了id为n4的一个元素
// 虽然HTML中有两个ul标签，但:first不是分别取每个ul中的第一个li，而是从上到下只要找到一个符合条件的元素就立即返回
$("ul li:first");

jQuery 选择器(:last)详解

jQuery的:last选择器用于获取匹配到的最后一个元素，将其封装为jQuery对象并返回。

与该选择器相对的是:first选择器，用于获取匹配到的第一个元素。

// 选择了id为n7的一个元素
$("div:last");

Jquery选择器（：even）

jQuery的:even选择器用于匹配所有索引值为偶数的元素，将其封装为jQuery对象并返回。

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <table id="n8">
            <tr id="n9"><td>cell1</td></tr>
            <tr id="n10"><td>cell2</td></tr>
            <tr id="n11"><td>cell3</td></tr>
        </table>
    </div>
</div>

// 选择了id分别为n9、n11的两个元素
$("tr:even");

jquery(:odd)查找索引值为基数的元素

jQuery 选择器(:eq(index))详解

// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:eq(index)" )

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

现在，我们想要查找第2个div标签，则可以编写如下jQuery代码：

// 选择了id为n2的一个元素
$("div:eq(1)");

接着，获取匹配ul li选择器的元素中的第4个元素，则可以编写如下jQuery代码：

// 选择了id为n9的一个元素
$("ul li:eq(3)");

:gt(index)大于索引的元素

:lt(index)小于索引的元素

jQuery 选择器(:first-child)详解

jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(0)选择器。

<div id="n1">
    CodePlayer
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5" class="c">item2</li>
            <li id="n6" class="c">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

// 选择了id分别为n4、n9的两个元素
$("ul li:first-child");

jQuery 选择器(:only-child)详解

jQuery的:only-child选择器用于匹配作为父元素的唯一子元素的元素，将其封装为jQuery对象并返回。

<div id="n1">
    <div id="n2">
        CodePlayer--专注于编程开发技术分享
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
        </ul>
    </div>
</div>

现在，我们想要查找不同父辈元素的最后一个div标签，则可以编写如下jQuery代码：

// 选择了id为n9的一个元素
$("ul li:only-child");

查找作为父元素的"独生子"的ul标签，则可以编写如下jQuery代码：

// 选择了id分别为n3、n8的两个元素
// n3的父元素n2虽然有自己的文本内容，但是只有n3这一个子元素，因此n3也算是唯一子元素
$("ul:only-child");

jQuery 选择器(:nth-child(n))详解

jQuery的:nth-child(n)选择器用于匹配作为父元素下的第n个(或特定顺序的)子元素的元素，将其封装为jQuery对象并返回。

• :nth-child(odd)表示匹配作为父元素的奇数(第1、3、5、7……个)子元素的元素；
• :nth-child(even)表示匹配作为父元素的偶数(第2、4、6、8……个)子元素的元素；
• :nth-child(3n)表示匹配作为父元素的第3n个子元素的元素(n表示包括0在内的自然数，下同)；
• :nth-child(3n+1)表示匹配作为父元素的第3n+1个子元素的元素；
• :nth-child(3n+2)表示匹配作为父元素的第3n+2个子元素的元素；

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4" class="c">item1</li>
            <li id="n5">item2</li>
            <li id="n6" class="c">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

现在，我们想要为每个ul标签内查找它的第2个li标签，则可以编写如下jQuery代码：

// 选择了id分别为n5、n10的两个元素
$("ul li:nth-child(2)");

接着，为每个ul标签查找自然顺序为奇数的li标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6、n9的3个元素
$("ul li:nth-child(odd)");

jQuery 选择器(:nth-last-child(n))详解

jQuery的:nth-last-child(n)选择器用于匹配作为父元素下的倒数第n个子元素或符合特定顺序规则的元素，将其封装为jQuery对象并返回。

jQuery 选择器(:first-of-type)详解

jQuery的:first-of-type选择器用于匹配作为父元素的第一个该类型的子元素的元素，将其封装为jQuery对象并返回。:first-of-type选择器等价于:nth-of-type(1)选择器。

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>

现在，我们查找作为父元素的span类型子元素中的"长子"的span标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n8的两个元素
// n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配
$("span:first-of-type");

接着，查找所有包含类名abc的元素，而且它们必须是父元素的该类型子元素中的"长子"，则可以编写如下jQuery代码：

// 选择了id分别为n2、n8的两个元素
// .abc可以匹配id分别为n2、n5、n8的3个元素，n2是n1所有div类型子元素中的第一个，n8是n7所有span类型子元素中的第一个，但n5不是n2所有span类型子元素中的第一个，因此不能匹配n5。
$(".abc:first-of-type");

jQuery 选择器(:has(selector))详解

jQuery的:has(selector)选择器用于匹配所有包含selector元素的元素，将其封装为jQuery对象并返回。

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
        <span id="n4">Hello</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">World
            <span id="n7" class="a">http://365mini.com</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>

现在，我们想要在id为n1的div标签内查找所有包含span标签的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n5、n6的3个元素
$("#n1 :has(span)");

接着，我们在id为n1的div标签内查找包含类名为b的span标签的元素，则可以编写如下jQuery代码：

// 选择了id为n5的一个元素
$("#n1 :has(span.b)");

jQuery 选择器(:not(selector))详解

jQuery的:not(selector)选择器用于排除所有与选择器selector匹配的元素，并将剩余的其他DOM元素封装为jQuery对象并返回。

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

现在，我们想要查找除了id为n2的元素以外的所有元素，则可以编写如下jQuery代码：

// 选择除了id为n2的元素以外的所有元素，包括html、head、style、link、title、meta、script等
$(":not(#n2)"); // 这相当于 $("*:not(#n2)");

接着，查找所有ul标签中除了id为n5的li标签以外的所有li标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6、n9、n10的4个元素
$("ul li:not(#n5)");

jQuery 选择器(:contains(text))详解

jQuery的:contains(text)选择器用于匹配包含指定文本的元素，将其封装为jQuery对象并返回。

<div id="n1">
    <div id="n2">
            <span id="n3">张三</span>
            <span id="n4">CodePlayer</span>
    </div>
    <div id="n5">
        <span id="n6">CodePlayer</span>
    </div>
    <div id="n7">
        CodePlayer
    </div>
</div>

现在，我们想要在id为n1的div标签内查找所有包含字符串"CodePlayer"的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n4、n5、n6、n7的5个元素
// n5的子元素n6中包含"CodePlayer"，因此n5也会被计入在内
$("#n1 :contains(CodePlayer)");

接着，在id为n1的div标签内查找所有包含字符串"张三"的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n3的两个元素
// n2的子元素n3包含"张三"，因此n2也会被计入在内
$("#n1 :contains(张三)");

jQuery 选择器(:empty)详解

空的元素，是指该元素既不包含子元素，也不包含文本内容(哪怕是空格或换行符，也算有文本内容)。

以下面这段HTML代码为例：

<div id="n1">
    <div id="n2">
            <span id="n3">张三</span>
            <span id="n4"> </span>
    </div>以上是关于jquery选择器篇的主要内容，如果未能解决你的问题，请参考以下文章
 
 JQ 选择器篇1
 JQ选择器篇2
 [Hadoop]-Yarn-调度器篇
 几个非常实用的JQuery代码片段
 jquery中的$的特殊用法
 JVM类加载器篇(下)