jQuery选择器

jQuery选择器允许你对HTML元素组或单个元素进行操作。

在jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,它还有一些自定义的选择器。

为了方便记忆和根据工作经验,我将jQuery选择器分为基础选择器伪类选择器:

一、基础选择器:

1、基本选择器、2、层次选择器、3、属性选择器

1、基本选择器

(1)元素选择器

在页面中选取所有<p>元素

$("p")

(2)id选择器

选取所有id等于test的元素

$("#test")

(3)class选择器

选取所有class属性中包含test的元素 

$(".test")

(4)群组选择器

将每一个选择器匹配的元素集合并

$("选择器1 , 选择器2 ,……,选择器n")

(5)*选择器

用于选择所有元素

*{box-sizing:border-box}

(6)CSS选择器

CSS选择器可用于改变HTML的CSS属性

$("p").css("background-color","red");

2、层次选择器

层次选择器通过html的dom元素间的层次关系获取元素,主要层次关系有后代、父子、相邻兄弟和通用兄弟。

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

3、属性选择器  (1)$("M+N")可以使用“$(M元素).next()”代替; (2)$("M~N")可以使用“$(M元素).nextAll()”代替;

属性选择器可以根据元素的属性及属性值来选择元素。  

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

二、伪类选择器

伪类选择器,可以看成一种特殊的选择器。伪类选择器都是以英文冒号“:”开头。

1、简单伪类选择器;2、动态伪类选择器;3、其他伪类选择器

1、简单伪类选择器  

 简单伪类选择器说明 
 :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 选择当前活动的目标元素(锚点)

2、动态伪类选择器  

动态伪类选择器 说明 
 :link 选择器用于选取未被访问的链接
 :visited 选择器用于选取已被访问的链接
 :hove 选择器用于选择鼠标指针浮动在上面的元素
 :active 选择器用于选择活动链接

3、其他伪类选择器  

其他伪类选择器 说明 
 :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 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
 :hidden 选取所有不可见元素
 :visible 选取所有可见元素,与:hidden相反
 :contains(text) 选择包含给定文本内容的元素
 :has(selector) 选择含有选择器所匹配元素的元素
 :empty 选择所有不包含子元素或者不包含文本的元素
 :parent 选择含有子元素或者文本的元素(跟:empty相反)
 :input 选择所有input元素
 :button 选择所有普通按钮,即type="button"的input元素
 :submit 选择所有提交按钮,即type="submit"的input元素
 :reset 选择所有重置按钮,即type="reset"的input元素
 :text 选择所有单行文本框
 :textarea 选择所有多行文本框
 :password 选择所有密码文本框
 :radio 选择所有单选按钮
 :checkbox 选择所有复选框
 :image 选择所有图像域
 :hidden 选择所有隐藏域
 :file 选择所有文件域
 :checked 选择所有被选中的表单元素,一般用于radio和checkbox
 option:selected 选择所有被选中的option元素
 :enabled 选择所有可用元素,一般用于input、select和textarea
 :disabled 选择所有不可用元素,一般用于input、select和textarea
 :read-only 选择所有只读元素,一般用于input和textarea
 :focus 选择获得焦点的元素,常用于input和textarea


上一篇: jQuery 文档就绪事件
下一篇: jQuery事件
作者邮箱: 203328517@qq.com