jQuery学习笔记1 - jQuery选择器

发表于   |   分类于   |     |   阅读次数

jQuery选择器

选择器是一种选中页面元素的方式。只要把元素选中，我们才能对被选中的元素进行各种操作。不同的选择器，在于它们选取方式的不同。
jQuery选择器的功能就是把元素选中，然后我们才能对选中的元素进行各种操作。
jQuery选择器的格式如下：

1
$("选择器")

参考：jQuery选择器一览表

jQuery基础选择器

基本选择器；

所谓的基本选择器，指的是在jQuery中使用最频繁的选择器。在jQuery中，基本选择器共有5种：
（1）元素选择器；$("元素名")
元素选择器，就是“选中”相同的元素，然后对相同的元素进行操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("div").css("color","red");
        })
    </script>
</head>
<body>
    <div>前端学习网</div>
    <p>绿叶学习网</p>
</body>
</html>

分析：
$(function () {//这里是你的jQuery代码})：
这句代码功能类似于JavaScript中的window.onload = function(){}，也就是在文档加载完成之后执行的代码。以后我们写jQuery代码都在$(function(){})里面写。

在这个例子中，$(“div”)表示选中所有的div元素，css(“color”,”red”)表示将选中的元素的color属性设置为红色。css()方法是jQuery操作CSS样式的方法。由于css()是对象的一个方法，因此我们使用点运算符来调用，如$(“div”).css()。

jQuery选择器是跟CSS选择器完全一样的！我们只需要把CSS选择器的写法套进$(“”)中，就变成了jQuery选择器，非常简单！
jQuery选择器

（2）id选择器；$("#id名")
id选择器，就是选中某个id的元素，然后对该元素进行各种操作。

1
2
3
4
5
6
<script type="text/javascript">
        $(function () {
            $("#div1").css("color","red");
        })
    //设置id为div1的元素的color属性为red.
    </script>

（3）class选择器；$(".类名")

（4）群组选择器；$("选择器1 , 选择器2 ,……,选择器n")
群组选择器，就是同时对几个选择器进行相同的操作。对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("div,p").css("color","red");
        })
        //设置div、p元素的color为red.
    </script>
</head>
<body>
    <div>前端学习网</div>
    <p>绿叶学习网</p>
</body>
</html>

（5）选择器 选择器，也成为“全选选择器”，用于选择所有的元素。

层次选择器；

层次选择器，就是通过元素之间的层次关系来获取元素。
常见的层次关系包括：父子、后代、兄弟、相邻。

在jQuery，层次选择器共有4种：

选择器 | 说明
| —- | —- |
| — | — |
| $("M N") | 后代选择器，选择M元素内部后代N元素（所有N元素）|
| $("M>N") | 子代选择器，选择M元素内部子代N元素（所有第1级N元素）|
| $("M~N") | 兄弟选择器，选择M元素后所有的同级N元素|
| $("M+N") | 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）|

属性选择器；

在jQuery中，除了直接使用id和class属性作为选择器之外，还可以把各种属性作为选择器，这就是我们所说的属性选择器。
在jQuery中，常见的属性选择器如下：

选择器 说明
$("selector[attr]") 选择包含给定属性的元素
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
$("selector[attr!='value']") 选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr*='value']") 选择给定的属性是以包含某些值的元素
$("selector[attr^='value']") 选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr$='value']") 选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器，需要同时满足多个条件时使用

备注：selector指的是选择器，attr指的是属性（attribute），value指的是属性值。
案例
（1）选择含有class属性的div元素。
$("div[class]")
（2）选择type属性值为checkbox的input元素（也就是选择所有复选框元素）：
$("input[type= 'checkbox']")
（3）选择type属性值不是checkbox的input元素：
$("input[type!= 'checkbox']")
（4）选择class属性包含nav的div元素（因为class属性可以包含多个值）：
$("div[class*= 'nav']")
（5）选择name属性以group开始的input元素，例如<input type="radio" name="group-fruit"/>:
$("input[name^= 'group']")
（6）选择name属性以group结尾的input元素，例如<input type="radio" name="fruit-group"/>：
$("input[name$= 'group']")
（7）选择具有id属性并且class属性是以nav开头的div元素，例如<div id="div1" class="lvye-div">绿叶学习网</div>：
$("div[id][class^='nav']")

jQuery伪类选择器

伪类选择器，可以看成是一种特殊的选择器。伪类选择器都是以英文冒号“:”开头。jQuery参考css选择器的形式，为我们提供了大量的伪类选择器，使得我们可以快速地选择我们想要获取的元素。

在jQuery中常见的伪类选择器分为以下6种：
（1）简单伪类选择器；
（2）子元素伪类选择器；
（3）可见性伪类选择器；
（4）内容伪类选择器；
（5）表单伪类选择器；
（6）表单属性伪类选择器；

简单伪类选择器；

jQuery为我们提供了大量的伪类选择器，其中最常用的伪类选择器，我们称为“简单伪类选择器”。
在jQuery中，简单伪类选择器如下：

伪类选择器 说明
:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素（非子元素）
:last或last() 选择某元素的最后一个元素（非子元素）
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素（锚点）

案例

  • 除了id为myLi之外的其他li元素。
    $("li:not(#myLi)").css("color", "red")
  • 选择第一个li元素和最后一个li元素
    $("li:first,li:last").css("color", "red");
  • 选择索引值为奇数的li元素。（索引值是从0开始，而不是从1开始。）
    $("li:odd").css("color", "red");
子元素伪类选择器；

子元素伪类选择器，就是选择某一个元素下面的子元素的方式。
在jQuery中，子元素伪类选择器如下：

| 选择器 | 说明 |
| 第一类子元素伪类选择器 | 说明 |
| —- | —- |
| :first-child 选择父元素的第1个子元素 |
| :last-child 选择父元素的最后1个子元素 |
| :nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even” |
| :only-child 选择父元素中唯一的子元素（该父元素只有一个子元素） |
| 第二类子元素伪类选择器 | 说明 |
| —- | —- |
| :first-of-type 选择父元素下的同元素类型的第1个同级兄弟元素 |
| :last-of-type 选择父元素下的同元素类型的最后1个同级兄弟元素 |
| :nth-of-type 选择父元素下的同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even” |
| :only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素） |

“第1类选择器不分元素类型，第2类选择器区分元素类型。”

可见性伪类选择器；

可见性伪类选择器，就是根据元素的“可见”与“不可见”这2种状态来选取元素。
在jQuery中，可见性伪类选择器只有2种：

选择器 说明
:hidden 选取所有不可见元素
:visible 选取所有可见元素，与:hidden相反

“:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。

内容伪类选择器；

内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
jQuery内容伪类选择器包括：

选择器 说明
:contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素（跟:empty相反）

案例：

  • $("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。
  • $("div:has(span)")表示选择内部含有span元素的div元素。
  • $("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。:has(selector)中的selector是一个群组选择器。
  • $("td:empty")表示选择内部没有文本内容也没有子元素的td元素。
表单伪类选择器；

jQuery为方便我们操作表单元素提供了完善的伪类选择器。
表单伪类选择器，指的是根据“表单类型”来选择的伪类选择器。
在jQuery中，常用的表单伪类选择器如下

选择器 说明
:input 选择所有input元素
:button 选择所有普通按钮，即type=”button”的input元素
:submit 选择所有提交按钮，即type=”submit”的input元素
:reset 选择所有重置按钮，即type=”reset”的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

案例：
$("input:checkbox")表示选择所有复选框元素

表单属性伪类选择器；

除了表单伪类选择器，jQuery为了更加方便开发者快速选择表单元素进行操作，还提供了一系列的表单属性伪类选择器。
表单属性伪类选择器，就是根据表单元素的标签属性来选取某一类表单元素。
在jQuery中，表单属性伪类选择器如下：

选择器 说明
:checked 选择所有被选中的表单元素，一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input、select和textarea
:disabled 选择所有不可用元素，一般用于input、select和textarea
:read-only 选择所有只读元素，一般用于input和textarea
:focus 选择获得焦点的元素，常用于input和textarea

案例：
$("input:checked").val()表示选择“被选中”的单选框或复选框（因为只有单选框和复选框有checked属性），并且获取表单元素的value值。

坚持原创技术分享，您的支持将鼓励我继续创作！