JQuery中的基本过滤器

最新推荐文章于 2021-10-31 13:14:57 发布

一只极度渴望成长的Giser

最新推荐文章于 2021-10-31 13:14:57 发布

阅读量125

点赞数

分类专栏： Javascript、JQuery练习文章标签： JQuery中的基本过滤器

本文链接：https://blog.csdn.net/qq_32077521/article/details/99735213

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <h1>3333</h1>
    <h2>44444</h2>
    <h3>555555</h3>
    <p>111111111111</p>
    <p class="cls1">111111111111</p>
    <p class="cls1">111111111111</p>
    <p>111111111111</p>
    <p>111111111111</p>
    <p>111111111111</p>
    <p class="cls1">111111111111</p>
    <p>111111111111</p>
    <script type="text/javascript">
        $(function () { 
            //JQuery中基本的过滤器
            //获取第一的p标签
            $("p:first").css({ "backgroundColor": "red" });
            //获取最后一个p标签
            $("p:last").css({ "backgroundColor": "blue" });
            //获得第三个p标签
            $("p:eq(2)").css({ "backgroundColor": "yellow" });
            //获得偶数位的p标签
            $("p:even").css({ "backgroundColor": "gray" });
            //获得奇数位的p标签
            $("p:odd").css({ "backgroundColor": "black" });
            //索引大于2的所有p标签
            $("p:gt(2)").css({ "backgroundColor": "green" });
            //索引小于4的所有p标签
            $("p:lt(4)").css({ "backgroundColor": "red" });
            //获取除了应用了cls1类样式的所有的p标签
            $("p:not(.cls1)").css({ "backgroundColor": "pink" });
            //获取所有的标题标签
            $(":header").css({ "backgroundColor": "red" });
        });
    </script>
</body>
</html>

一只极度渴望成长的Giser

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <scrip...
复制链接

扫一扫