2018218jquery 其他选择器

xiaoxiao2021-02-28  46

jquery 其他选择器

1)层级选择器

 

符号

说明

用法

空格

后代选择器

选择所有的后代元素

$(“div span”). css(“background”,”red”);

子代选择器

选择所有的子代元素

$(“div > span”). css(“background”,”red”)

+

紧邻选择器

选择紧挨着的下一个元素

$(“div + p”). css(“background”,”red”)

~

兄弟选择器

选择后面的所有的兄弟元素

$(“div ~ p”). css(“background”,”red”)

层级选择器选择了选择符后面那个元素,比如,div  >  p,是选择>后面的p元素。

 

2)过滤选择器

基本过滤选择器

符号

说明

用法

:eq(index)

index是从0开始的一个数字,选择序号为index的元素。选择第一个匹配的元素。

$(“li:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是从0开始的一个数字,选择序号大于index的元素

$(“li:gt(2)”). css(“background”,”red”)

:lt(index)

Index是从0开始的一个数字,选择小于index 的元素

$(“li:lt(2)”). css(“background”,”red”)

:odd

选择所有序号为奇数行的元素

$(“li:odd”). css(“background”,”red”)

:even

选择所有序号为偶数的元素

$(“li:even”). css(“background”,”red”)

:first

选择匹配第一个元素

$(“li:first”). css(“background”,”red”)

:last

选择匹配的最后一个元素

$(“li:last”). css(“background”,”red”)

 

属性选择器

符号

说明

用法

$(“a[href]”)

选择所有包含href属性的元素

$(“a[href]”). css(“background”,”red”)

$(“a[href=’itcast’]”)

选择href属性值为itcast的所有a标签

$(“a[href=’itcast’]”). css(“background”,”red”)

$(“a[href!=’baidu’]”)

选择所有href属性不等baidu的所有元素,包括没有href的元素

$(“a[href!=’baidu’]”). css(“background”,”red”)

$(“a[href^=’web’]”)

选择所有以web开头的元素

$(“a[href^=’web’]”). css(“background”,”red”)

$(“a[href$=’cn’]”)

选择所有以cn结尾的元素

$(“a[href$=’cn’]”). css(“background”,”red”)

$(“a[href*=’i’]”)

选择所有包含i这个字符的元素,可以是中英文

$(“a[href*=’i’]”). css(“background”,”red”)

$(“a[href][title=’我’]”)

选择所有符合指定属性规则的元素,都符合才会被选中。

$(“a[href][title=’我’]”). css(“background”,”red”)

 

筛选选择器参考上课讲的 11 筛选选择器.html

转载请注明原文地址: https://www.6miu.com/read-2631167.html

最新回复(0)