【jQuery01】jQuery选择器

zoukankan html css js c++ java

【jQuery01】jQuery选择器
本文将从“基本选择器”、“层次选择器”、“表单选择器”、“过滤选择器”四个方面来介绍jQuery选择器

基本选择器

1. ("#id") 选择一个具有给定id属性的单个元素，例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $("#demo").css({
                    "width": "100px",
                    "height": "100px",
                    "background-color": "red"
                });
            });
        </script>
```
2. (".class") 选择给定样式类名的所有元素，例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $(".demo").css({
                    "width": "100px",
                    "height": "100px",
                    "background-color": "red"
                });
            });
        </script>
```
3. (“element”) 根据HTML标记名称选择所有元素，例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $("div").css({
                    "width": "100px",
                    "height": "100px",
                    "background-color": "red"
                });
            });
        </script>
```
4. ("") 选择所有元素，例如：*
```
<script type="text/javascript">
            $(document).ready(function() {
                $("*").css({
                    "width": "100px",
                    "height": "100px",
                    "background-color": "red"
                });
            });
        </script>
```
警告：除非被它自己使用，否则 * 选择器的速度是极其慢的。
5. (“selector1, selector2, selectorN”) 将每一个选择器匹配到的元素合并后一起返回，例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $("div, a, p").css({
                    "width": "100px",
                    "height": "100px",
                    "background-color": "red"
                });
            });
        </script>
```
层次选择器

1. (“祖先元素后代元素”) 选中给定祖先元素中的所有后代元素，后代元素可能是该元素的一个孩子、孙子、曾孙等。例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $(".demo a").css({ // 选择类名为demo的元素的所有后代a元素，并设置字体大小
                    "font-size": "30px" 
                });
            });
        </script>
```
2. (“祖先元素 > 后代元素”) 选择所有指定父元素中指定的直接子元素，例如：
```
<script type="text/javascript">
            $(document).ready(function() {
                $(".demo>a").css({ // 选择类名为demo的元素直接子元素a，并设置字体大小
                    "font-size": "30px" 
                });
            });
        </script>
```
3. (“prev + next”) prev 和 next是两个同级别的元素，选择在prev元素后边的next元素，例如：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <div class="demo">
            <div class="demo">shiyanlou</div>
            <a href="http://www.shiyanlou.com/">SHIYANLOU</a>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".demo+a").css({
                    "font-size": "30px"
                });
            });
        </script>
    </body>
</html>
```
4. (“prev ~ siblings”) 匹配prev元素之后的所有兄弟元素。例如：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <div class="demo">demo</div>
        <a href="http://www.shiyanlou.com/">shiyanlou</a>
        <a href="http://www.shiyanlou.com/">SHIYANLOU</a>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".demo~a").css({
                    "font-size": "30px"
                });
            });
        </script>
    </body>
</html>
```
注意：prev+next 和 prev~siblings 之间的区别是他们各自可及的范围，前者只能到达紧随的同级元素，后者可以扩展达到其所有的同级元素。

**在层次选择器中，第一个和第二个是比较常用的，而后面两个有更简单的方法来代替 **
比如：

· 可以使用next()方法来代替 $("prex + next")选择器，比如$ (".one + div); 和 $(".one").next("div");是等价的 · 可以使用nextAll()方法来代替$ (“prex ~ next”)选择器，比如$("#prev ~ div); 和 $("#prev").nextAll(“div”);是等价的

表单选择器
```
/*
:input 选取所有的 <input> 、<textarea>、<select>和 <button>元素。
:text 选取所有的单行文本框。
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素
*/
```
过滤选择器

***基本过滤选择器 ***

:animated Selector 选择所有正在执行动画效果的元素.
:eq() Selector 在匹配的集合中选择索引值为 index 的元素。
:even Selector 选择索引值为偶数的元素，从 0 开始计数。也可以查看 odd.
:first Selector 选择第一个匹配的元素。
:focus Selector 选择当前获取焦点的元素。
:gt() Selector 选择匹配集合中所有大于给定 index（索引值）的元素。
:header Selector 选择所有标题元素，像 h1, h2, h3 等.
:lang() Selector 选择指定语言的所有元素。
:last Selector 选择最后一个匹配的元素。
:lt() Selector 选择匹配集合中所有索引值小于给定 index 参数的元素。
:not() Selector 选择所有元素去除不匹配给定的选择器的元素。
:odd Selector 选择索引值为奇数元素，从 0 开始计数。同样查看偶数 even.
:root Selector 选择该文档的根元素。
:target Selector 选择由文档 URI 的格式化识别码表示的目标元素。

***内容过滤选择器 ***

:contains() Selector 选择所有包含指定文本的元素。
:empty Selector 选择所有没有子元素的元素（包括文本节点）。
:has() Selector 选择元素其中至少包含指定选择器匹配的一个种元素。
:parent Selector 选择所有含有子元素或者文本的父级元素。

***可见性过滤选择器 ***

:hidden Selector 选择所有隐藏的元素。
:visible Selector 选择所有可见的元素。

***属性过滤选择器 ***

Attribute Contains Prefix Selector [name|=“value”] 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
Attribute Contains Selector [name*=“value”] 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
Attribute Contains Word Selector [name~=“value”] 选择指定属性用空格分隔的值中包含一个给定值的元素。
Attribute Ends With Selector [name$=“value”] 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
Attribute Equals Selector [name=“value”] 选择指定属性是给定值的元素。
Attribute Not Equal Selector [name!=“value”] 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
Attribute Starts With Selector [name^=“value”] 选择指定属性是以给定字符串开始的元素
Has Attribute Selector [name] 选择所有具有指定属性的元素，该属性可以是任何值。
Multiple Attribute Selector [name=“value”][name2=“value2”] 选择匹配所有指定的属性筛选器的元素

***子元素过滤选择器 ***

:first-child Selector 选择所有父级元素下的第一个子元素。
:first-of-type Selector 选择所有相同的元素名称的第一个兄弟元素。
:last-child Selector 选择所有父级元素下的最后一个子元素。
:last-of-type Selector 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
:nth-child() Selector 选择的他们所有父元素的第 n 个子元素。
:nth-last-child() Selector 选择所有他们父元素的第 n 个子元素。计数从最后一个元素开始到第一个。
:nth-last-of-type() Selector 选择的所有他们的父级元素的第 n 个子元素，计数从最后一个元素到第一个。
:nth-of-type() Selector 选择同属于一个父元素之下，并且标签名相同的子元素中的第 n 个。
:only-child Selector 如果某个元素是其父元素的唯一子元素，那么它就会被选中。
:only-of-type Selector 选择所有没有兄弟元素，且具有相同的元素名称的元素。

***表单对象过滤选择器 ***

:enabled Selector 选择所有可用的（注：未被禁用的元素）元素。
:disabled Selector 选择所有被禁用的元素。
:checked Selector 匹配所有勾选的元素。
:selected Selector 获取 select 元素中所有被选中的元素。
查看全文

相关阅读:
zoj 1239 Hanoi Tower Troubles Again!
zoj 1221 Risk
uva 10192 Vacation
uva 10066 The Twin Towers
uva 531 Compromise
uva 103 Stacking Boxes
稳定婚姻模型
 Ants UVA
Golden Tiger Claw UVA
关于upper、lower bound 的探讨

原文地址：https://www.cnblogs.com/mqjing/p/13629283.html

【jQuery01】jQuery选择器

基本选择器

层次选择器

表单选择器

过滤选择器