jquery选择器

最新推荐文章于 2023-04-01 11:09:28 发布

pleasecallme_522

最新推荐文章于 2023-04-01 11:09:28 发布

阅读量525

点赞数

分类专栏： jquery学习文章标签： jquery

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/53483498

版权

jquery学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.基本
1.'*' :选择所有的元素
eg:$('*').css('background','red');
2.'.class':按照类选择器名选择元素
（jQuery使用JavaScript的原生getElementsByClassName()函数来实现。）

eg:$('.myclass').css('background','red');
虽然简单，但是还是应该注意下面这组区别：
A
这里写图片描述

B

3.'element':通过指定DOM元素的标签名来选择元素(调用JavaScript的 getElementsByTagName()函数，当该表达式使用时返回相应的元素。)
eg:$('div').css('background','red');

4.#id:通过指定DOM元素的id选择器名来选择元素（jQuery使用JavaScript函数document.getElementById()）

还应注意以下几点：
a.当另一个选择是附加到ID选择器，比如h2#pageTitle，在确定作为匹配的元素前，jQuery执行一个额外的检查。
b.调用 jQuery() (或 $()) 带上一个选择器作为它的参数，将返回一个jQuery对象包含零个或一个DOM元素的集合。
c.每个id值在一个文件中只能使用一次。如果多个元素分配了相同的ID，将只匹配该ID选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的文件使用相同的ID是无效的。
d.如果ID包含点号或冒号字符字符，你必须将这些字符反斜杠转义.
eg:

<body>
  <div id="myID.entry[0]">id="myID.entry[0]"</div>

  <div id="myID.entry[1]">id="myID.entry[1]"</div>
  <div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script>
</body>

5.$( "selector1, selector2, selectorN..." ):同时选择多个元素
eg:
注意：因为他们将按在文件的顺序，DOM元素的顺序在返回的jQuery对象中可能不相同，为解决这种冲突，可以采用list列表的方法，具体请看jquery文档此部分内容[http://www.css88.com/jqapi-1.9/multiple-selector/]

二.层级
1.$( "parent > child" ):子元素组合选择器(这个子元素组合选择器‘E > F ‘相比后代选择器‘E F’,只选择第一级的所有子元素)
eg:来看上述两点的对比：
A.后代选择器 E F
这里写图片描述

B.子元素组合选择器

2.$("ancestor descendant"):用来选择后代元素（根据需要选择该元素的一个孩子，孙子，曾孙等后代元素。）
ancestor：任意类型的选择器表示父级元素
descendant：一个用来筛选后代元素的选择器。
eg:

<body>
<form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />

    <fieldset>
        <label>Grandchild:</label>
        <input name="newsletter" />
    </fieldset>

</form>
Sibling to form: <input name="none" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $("form input").css("border","2px dotted blue");
</script>
</body>

这里写图片描述

3.$("prev + next"):相邻兄弟选择器，用来选择紧跟在prev后面的一个同级元素
4.$( "prev ~ siblings"):一般兄弟选择器，用来选择跟在prev后的所有同级元素
注：下一个相邻兄弟选择器（ prev + next ）和一般兄弟选择器（ prev ~ siblings ）所选择到的元素，必须在同一个父元素下。

三.基本筛选
1.$(":eq(index)" ):在匹配的元素中选择索引值为index(从0开始)的元素
eg:

<body>
<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $("tr:eq(2)").css("color","red");
    $("td:eq(2)").css("color","red");
</script>
</body>

这里写图片描述

这部分其余的以后再学习

四.子元素筛选
1.$(':first-child'):为冒号前的每一个父元素匹配第一个子元素，相当于:nth-child(1)
eg:

<body>
<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>

</div>
<div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $("div span:first-child").css("color","red");
    //注意，first-child是对于子元素集而言的
</script>
</body>

2.$(':last-child'):为冒号前的每一个父元素匹配最后一个子元素，同上

3.$(':nth-child(index/even/odd/equation)')
括号里的值可以是：
index：子元素集合的索引值（因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n从1开始计数。对于所有其他选择器表达式，jquery遵循JavaScript的“0索引”的计数。因此，给定一个单一ul包含两个li,$('li:nth-child(1)')选择第一个li，而$('li:eq(1)')选择第二个。）
even:字符串even表示每“偶数个”子元素时
odd：字符串odd表示每“奇数个”子元素时
equation：可以是表达式，如2n之类

eg:

<body>
<div>
    <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Brandon</li>

    </ul>
</div>
<div>
    <ul>
        <li>Sam</li>
    </ul>
</div>
<div>
    <ul>
        <li>Glen</li>
        <li>Tane</li>
        <li>Ralph</li>
        <li>David</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $("div ul li:nth-child(2)").append("<span> - 2nd!</span>");
</script>
</body>

这里写图片描述

———————————–补充：————————————–
:nth-child(n)伪类很容易混淆:eq(n)，即使两个可能导致完全不同的匹配的元素。用:nth-child(n)时，所有子元素都计算在内，不管它们是什么，并且指定的元素被选中仅匹配连接到伪类选择器。而用:eq(n)时，只有与这个伪类前面的选择相匹配的元素才会被计数（即，成为候选元素），不限于任何其他元素的孩子，而且第（n +1）个一（n是基于0）被选中。

直接复制的jquery文档里的一段话，接下来看一个例子：

<body>
<div>
    <button>:nth-child(even)</button>
    <button>:nth-child(odd)</button>
    <button>:nth-child(3n)</button>
    <button>:nth-child(2)</button>
</div>
<div>
    <button>:nth-child(3n+1)</button>
    <button>:nth-child(3n+2)</button>
    <button>:even</button>
    <button>:odd</button>
</div>

<div>
    <table>
        <tr><td>John</td></tr>
        <tr><td>Karl</td></tr>
        <tr><td>Brandon</td></tr>
        <tr><td>Benjamin</td></tr>
    </table>
</div>
<div>
    <table>
        <tr><td>Sam</td></tr>
    </table>
</div>
<div>
    <table>
        <tr><td>Glen</td></tr>
        <tr><td>Tane</td></tr>
        <tr><td>Ralph</td></tr>
        <tr><td>David</td></tr>
        <tr><td>Mike</td></tr>
        <tr><td>Dan</td></tr>
    </table>
</div>

<span>tr<span id="inner"></span></span>

仍然一脸懵逼··········

—————————————-补充end———————————

pleasecallme_522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器

一.基本 1.'*' :选择所有的元素 eg:$('*').css('background','red'); 2.'.class':按照类选择器名选择元素（jQuery使用JavaScript的原生getElementsByClassName()函数来实现。）eg:$('.myclass').css('background','red'); 虽然简单，但是还是应该注意下面这组区别：
复制链接

扫一扫

专栏目录