jQuery之过滤选择器学习笔记

最新推荐文章于 2024-05-21 19:09:41 发布

somnus5261

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量376

点赞数

文章标签： javascript jquery 语言标签脚本

本文链接：https://blog.csdn.net/somnus5261/article/details/42031107

版权

过滤选择器：

包括简单过滤选择器、内容过滤选择器、属性过滤选择器、子元素过滤选择器、表单域属性过滤选择器、可见性过滤选择器.

1】简单过滤选择器:需要与另外一个选择器一起使用

1):first选择器：对当前jquery集合进行过滤并选择出第一个匹配元素

语法：$(“selector:first”)

Eg:

<table>

<tr>

</tr>

</table>

执行：$(“td:first”).css(“.......”);

2):last选择器

语法：$(“selector:last”)

3):odd选择器

语法：$(“selector:odd”)//(索引为奇数，从0开始计数)

$(“td:odd”).css(“......”);

4):even选择器:理解同3）

语法：$(“selector:even”)

5):eq()选择器:用于从匹配的集合中选择索引等于给定值的元素

语法：$(“selector:eq(index)”)//index从0开始

6):gt()选择器：用于从匹配的集合中选择索引大于给定值的元素

语法：$(“selector:gt(index)”)//index从0开始

7):lt()选择器:用于从匹配的集合中选择索引小于给定值的元素

语法：$(“selector:lt(index)”)//index是非负整数（最小也是0）

查找索引大于n1且小于n2的所有元素，可使用群组选择器

语法：$(“selector:gt(n1),selector:lt(n2)”)

8):not()选择器:用于从匹配的集合中去除所有与给定选择器匹配的元素

语法：$(“selector1:not(selector2)”)//除了selector2其他都起作用

9):header选择器：用于选择所有诸如h1,h2,h3之类的标题元素

10):animated选择器：用于选择所有正在执行动画效果的元素

语法：$(“selector:animated”)

综合例子：

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

<h3 align="center">简单过滤选择器应用实例</h3>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

$(document).ready(function(){

$(":header").css("color","#999");

$("tr:first").css("background","#FCF");

$("td:last").css("background","#FCF");

$("td:odd").css("background","yellow");

$("td:even").html("偶数");

$("td:eq(1)").css("border","1px solid red");

$("td:gt(6)").css("border","1px solid blue");

$("td:lt(6)").css("color","blue");

$("td:not(:first,:last)").css("color","red");

})

</script>

</body>

</html>

效果图：

2】内容过滤选择器

1）：contains选择器：用于选择包含给定文本的所有元素

语法：$(“selector:contains(text)”)

$(“p:contains(‘《社保局检查》’)”).css(“background”,”#FCF”);

2）:has选择器：用于选择含有给定子元素的元素

语法：$(“selector1:has(selector2)”)

$(“li:has(p)”).css(“background”,”#FCF”);

3）:empty选择器:用于选择不包含子元素或文本的所有空元素

语法：$(“selector:empty”)

$(“td:empty”).css(“background”,”#FCF”);

4）:parent选择器:用于选择包含子元素或文本的元素，与:empty选择器的作用相反

语法：$(“selector:parent”)

$(“td:parent”).css(“background”,”#FCF”);

3】属性过滤选择器

1）包含属性选择器：用于选择包含给定属性的所有元素

语法：$(“selector[attribute]”)

Eg:$(“div[id]”)

2）属性等于选择器：用于选择给定属性等于某特定值的所有元素

语法：$(“selector[attribute=value]”)

注：大多数情况下引号可以省略，但是遇到属性值包含“]”时必须用引号，也可用变量作为属性值，如：“[attribute=”+value+”]”

Eg:

执行：$(“input[name=accept]”).attr(“checked”,”true”);

3）属性包含选择器:用于选择指定属性值包含给定子字符串的所有元素

语法：$(“selector[attribute*=value]”)

Eg:

执行：$(“input[name*=’news’]”).val(“name中包含news的元素”);

//给name中包含news的文本框添加文本值

4）属性包含单词选择器：用于选择指定属性值中包含给定单词（由空格分隔）的元素

语法：$(“selector[attribute~=value]”)

Eg:

执行：$(“input[name~=’news’]”).val(“name中包含news单词的元素”);

//给name中包含news的文本框添加文本值

5）属性不等于选择器：用于选择不包含指定属性或者包含指定属性但该属性不等于某个值的所有元素

语法：$(“selector[attribute!=value]”) 注：引号可选

6）属性开始选择器：用于选择给定属性是以某特定值开始的所有元素

语法：$(“selector[attribute^=value]”) 注：引号可选

7）属性结尾选择器：用于选择给定属性是以某特定值结尾的所有元素

语法：$(“selector[attribute$=value]”) 注：引号可选

8）复合属性选择器：用于选择同时满足多个条件的所有元素

语法：$(“selector[selector1][selector2][selector3]...[...N]”)

Eg:

执行：$(“input[id][name^=’news’]”).val(“符合条件”);

4】子元素过滤选择器

该选择器必须与某个选择器一起使用

1）:first-child选择器：用于选择其父级的第一个子元素的所有元素

语法：$(“selector:first-child”)//selector为任意选择器，:first-child不同于:first

Eg:

<ul>

</ul>

<ul>

</ul>

执行：$(“ul:first-child”).css(“text-decoration”,underline).css(“color”,”blue”);

//执行完第一个列表的文本都被添加了下划线，且颜色都变成了蓝色。

2）：last-child:用于选择其父级的最后一个子元素的所有元素

语法：$(“selector:last-child”) 理解同上

3）：nth-child:用于选择父元素下的第N个子元素或奇偶元素

语法：$(“selector:nth-child(index/even/odd/equation)”)

//selector为任意选择器，用于指定待选择元素的父元素

//index：表示待查找元素的索引值（最小为1）

//even和odd:分别表示查找父元素下索引值为偶数或奇数的元素

//equation:表示待查找元素的索引值

Eg：<ul>

</ul>

执行：$(“ul li:nth-child(4)”).css(“color”,”red”);

效果图：

4）：only-child选择器：用于选择某元素的唯一选择器

语法：$(“selector:only-child”)

综合例子：

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

<div><h3 align="center">子元素过滤器选择器应用实例</h3></div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

$(document).ready(function(){

$("table tr:first-child").css("background","#FCF");

$("table tr:last-child").css("background","yellow");

$("tr td:nth-child(even)").css("border","1px solid red");

$("div h3:only-child").css("color","#999");

})

</script>

</body>

</html>

效果图：

5】表单域属性过滤选择器

表单内包含各种各样的表单域，使用该选择器可轻松获取已被选中的单选按钮、复选框、列表项；也可以根据是否可用从文档中查找表单域。

1）:checked选择器：用于选择所有被选中的表单域

语法：$(“selector:checked”)//selector是一个选择器，用于指定要查找的元素，可以是input,radio,checkbox.

2）:enabled选择器:用于选择所有可用的表单域

语法：$(“selector:enabled”)

3）:disabled选择器:用于选择所有被禁用的表单域

语法：$(“selector:disabled”)

4）:selected选择器:用于选择从列表框选择所有选中的option元素

语法：$(“selector:selected”)

6】可见性过滤选择器

可见性：即某元素及其父元素在文档中占据空间

1）:hidden选择器：用于选择所有的不可见元素

语法：$(“selector:hidden”)//selector为任意选择器，用于指定要查找的元素

2）:visible选择器：用于选择所有的可见元素

语法：$(“selector:visible”):和上同理

somnus5261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之过滤选择器学习笔记

过滤选择器：包括简单过滤选择器、内容过滤选择器、属性过滤选择器、子元素过滤选择器、表单域属性过滤选择器、可见性过滤选择器.1】简单过滤选择器:需要与另外一个选择器一起使用1):first选择器：对当前jquery集合进行过滤并选择出第一个匹配元素语法：$(“selector:first”)Eg:第一列第二列第三列执行：$(“td:first”)
复制链接

扫一扫