【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 元素中所有被选中的元素。
查看全文

相关阅读:
Javascript 与 c# 数据加密互通 DEC
Auto.js 隐藏日志信息、定时器
 Auto.js 检测开启无障碍
 Auto.js 初学碰到的坑
 SmartAssembly 汉化说明
 espcms 表结构说明
 处理器调度
 进程死锁与避免
 并发程序设计
 Mysql性能调优

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

【jQuery01】jQuery选择器

基本选择器

层次选择器

表单选择器

过滤选择器