JQuery过滤器

最新推荐文章于 2024-01-13 22:21:09 发布

我的1024

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量2.4k

点赞数 3

本文链接：https://blog.csdn.net/qq_40399835/article/details/84553619

版权

在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器")

基本过滤器：

：first(可以找到匹配的第一个元素)

<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
    <table>
        <tr>第一行</tr>
        <tr>第二行</tr>
        <tr>第三行</tr>
    </table>
<script>
    $(document).ready(function(){
            $("tr:first").css("font-style","italic");
        });
</script>
</body>
</html>

:last(可以匹配找到最后一个元素) 例如：$("tr:last");
:not(<选择器>):（可以去除所有与给定的选择器匹配的元素）例如：$("input:not(:checked)");
:even(可以匹配所有索引值为偶数的元素。注意：索引值是从0开始计数的) 例如： $("tr:even")选择表格的奇数行：索引值为偶数；
:odd（可以匹配所有索引值为奇数的元素）；
:eq(index)(可以匹配索引值为index的元素)；
:gt(index)(可以匹配索引值大于index的元素)；
:it(index)(可以匹配索引值小于index的元素)；
:header(可以选择所有H1、H2、H3等一类的header标签)；
:animated(可以匹配所有正在执行动画效果的元素)；

内容过滤器：

：contains()(可以匹配到包含指定文本的元素)；

<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
    <div>HTML</div>
    <div>JAVASCRIPT</div>
    <div>CSS</div>
    <div>JQUERY</div>
<script>
    $(document).ready(function(){
        $("div:contains(HTML)").css({background:'yellow',color:'blue'})
    });
</script>
</body>
</html>

注意：

若有一个参数： $("div:contains(HTML)").css("background","yellow")

若有多个参数，各个参数之间用逗号隔开：$("div:contains(HTML)").css({background:'yellow',color:'blue'})

:empty()(可以匹配不包含子元素或文本为空的元素) 例如：$("td:empty") 可以选择内容为空的表格单元格；
:has()(可以匹配包含指定子元素的元素) 例如： $("div:has(p)")可以选择包含p元素的div元素；
:parent()(可以匹配至少包含一个子元素或文本的元素) 例如： $("div:parent(p)")可以选择包含p元素的div元素；

可见性过滤器：

:hidden(可以匹配到所有不可见元素) 例如：$("input:hidden") 匹配所有不可见的input元素；
:visible(可以匹配所有的可见元素)

属性过滤器：

[属性名]（可以根据元素的属性或属性值对元素进行过滤）

<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="id1">id1</div>
<div>no id</div>
<div id="id2">id2</div>
<script>
    $(document).ready(function(){
        $("div[id]").css("border","2px dotted blue")
    });
</script>
</body>
</html>

$("div[id]")表示匹配所有的包含id的div元素。

[属性名=值]（匹配属性等于指定值的元素）例如：$("div[id=id1]") 可以匹配所有di=id1的div元素；
[属性名！=值]（匹配属性不等于指定值的元素）；
[属性名^=值]（指定属性值以指定值开始的元素）例如：$("input[name^=news]")可以匹配所有的name属性值以news开始的input元素；
[属性名$=值]（指定属性值以指定值结束的元素）；
[属性名*=值]（指定属性值包含指定值的元素）；

我的1024

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JQuery过滤器

在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器")基本过滤器：：first(可以找到匹配的第一个元素)&lt;html&gt;&lt;head&gt;&lt;script src="jquery.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&am
复制链接

扫一扫