jquery选择器

jquery选择器就是为了选择界面上的元素的。

jquery 选择器=css选择器选择器{属性:属性值}+自定义选择器

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

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

jQuery 中所有选择器都以美元符号开头:$()。

1.基本选择器

1. 元素选择器:基于元素名选取元素。

最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素

比如p,h2,span,a,div乃至html

使用方式:$("element")

多个元素:$("element1,element2,element3,...")

2.类选择器 .class 通过指定的 class 查找元素。

2.1 单类选择器

单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)要使用类选择器我们需要首先对文件元素添加一个class属性,

使用方法:点号”.”加上类名就组成了一个类选择器$(".class")

2.2 多类选择器

在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。

注意会选择含有此类的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序。

使用方式:$(".class1,.class2")

3.id选择器:#id 唯一 元素添加一个id属性,

ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素)。类似类属性,在使用ID选择器前首先要在元素中添加ID属性。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。它是唯一属性,区别于类选择器。

使用方式:$("#id值")

4.通配符选择器 *

选取所有的元素$("*")

5.上下文选择器 (contextual selectors)

,后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为:…的后代。多个选择器的情况如下: ul li li { ...}

6. 组合选择器

$(".classname .classname1 #id1") 使用空格分开就是取交集 同时满足 与后面的属性选择器相似

$(".classname,.classname1,#id1") 使用逗号分开就是取并集

2.层级选择器

ancestor descendant //后代元素选择器

("parent descendant")选择器选取指定元素的后代的所有元素。

$("#id .classname ")

parent > child //子元素选择器。

$("#id>.classname ") 选取指定元素的直接子元素的所有元素

prev + next //相邻兄弟元素选择器 匹配所有紧接在 prev 元素后的 next 元素

$("#id + .classname ")

prev ~ sibling //通用兄弟元素选择器 匹配 prev 元素之后的所有同辈 siblings 元素

$("#id ~ .classname ")

3.过滤选择器:基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.

基本过滤选择器

:first 相同的多个元素时选取第一个,不用管该元素属于谁

$("li:first")

:last

$("li:last") //最后一个li

:not(selector)

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

注意选择器不需要使用引号

:even

$("li:even") //挑选下标为偶数的li

:odd

$("li:odd") //挑选下标为奇数的li

:eq(index)

$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)

:gt(index)

$("li:gt(2)") //下标大于 2 的li 不包括2

:lt(index) 匹配所有小于给定索引值的元素

$("li:lt(2)") //下标小于 2 的li 不包括2

:header 匹配如 h1, h2, h3之类的标题元素

:animated 匹配所有正在执行动画效果的元素

:focus 匹配当前获取焦点的元素。

lang 选择匹配语言的元素

对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。

target

root

在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。

内容过滤选择器

:empty

匹配所有不包含子元素或者文本的空元素

:parent

匹配包含文本(text)或者含有子元素的元素

:has(selector)

包含指定子元素的元素

:contains(text)

包含指定文本内容的指定元素

使用方式:$("元素名称:empty")

可见性过滤选择器

$("li:hidden") //匹配所有不可见元素,或type为hidden的元素

$("li:visible") //匹配所有可见元素

属性过滤选择器

注意属性与属性值的区别

[attribute] 选择含有属性attr的元素

[attribute=value] 选择属性值等于value的元素

[attribute!=value] 选择属性值不等于value的元素

[attribute^=value] 选择属性值以value开始的元素

[attribute$=value]选择属性值以value结束的元素

[attribute*=value]选择属性值包含value结束的元素

[attrSel1][attrSel2][attrSelN] 选取同时满足多个属性的条件的元素

$("div[id]") //所有含有 id 属性的 div 元素

$("div[id='123']") // id属性值为123的div 元素

$("div[id!='123']") // id属性值不等于123的div 元素

$("div[id^='qq']") // id属性值以qq开头的div 元素

("div[id='zz']") // id属性值以zz结尾的div 元素

$("div[id*='bb']") // id属性值包含bb的div 元素

("input[id][name='man']") //多属性选过滤,同时满足两个属性的条件的元素

子元素过滤选择器

:first-child

:last-child

:nth-child

:only-child

:nth-last-child()

:first-of-type

:last-of-type

:nth-last-of-type()

:nth-of-type()

:only-of-type

表单对象属性过滤选择器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

:selected 匹配所有选中的option元素

$("input:enabled") // 匹配可用的 input

$("input:disabled") // 匹配不可用的 input

$("input:checked") // 匹配选中的 input

$("option:selected") // 匹配选中的 option

4.表单选择器

$(":input") //匹配所有 input, textarea, select 和 button 元素

(":text") //所有的单行文本框,(":text") 等价于("[type=text]"),推荐使用("input:text")效率更高,下同

$(":password") //所有密码框

$(":radio") //所有单选按钮

$(":checkbox") //所有复选框

$(":submit") //所有提交按钮

$(":reset") //所有重置按钮

$(":image") //匹配所有图像域

$(":hide") //匹配所有不可见元素,或者type为hidden的元素

$(":button") //所有button按钮

$(":file") //所有文件域

5.其他选择器

this选择器

| $(this) | 选取当前 HTML 元素 |

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容