JQuery中过滤选择器

最新推荐文章于 2023-07-22 08:42:18 发布

you4580

最新推荐文章于 2023-07-22 08:42:18 发布

阅读量361

点赞数

文章标签： jquery css html

本文链接：https://blog.csdn.net/you4580/article/details/129701537

版权

过滤选择器
首元素选择器
语法： :first 获得选择的元素中的第一个元素
尾元素选择器
语法： :last 获得选择的元素中的最后一个元素
非元素选择器
语法： :not(selector) 不包括指定内容的元素
偶数选择器
语法： :even 偶数，从 0 开始计数
奇数选择器
语法： :odd 奇数，从 0 开始计数
等于索引选择器
语法： :eq(index) 指定索引元素
大于索引选择器
语法： :gt(index) 大于指定索引元素
小于索引选择器
语法： :lt(index) 小于指定索引元素
标题选择器
语法： :header 获得标题（h1~h6）元素，固定写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
             div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 改变第一个div元素的背景色为红色" id="b1"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变最后一个div元素的背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变class不为one的所有div元素的背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为偶数的div元素的背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为奇数的div元素的背景色为红色" id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为大于3的div元素的背景色为红色" id="b6"/>
            $("#b6").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为等于3的div元素的背景色为红色" id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为小于3的div元素的背景色为红色" id="b8"/>
            $("#b8").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为红色" id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });
        });
    </script>
    </head>
    <body>        
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
         <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         
         <div id="one">
             id为one  
        </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
         <div class="one" >
                 class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
               class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>    
    </body>
</html>

you4580

关注

0
点赞
踩
0

收藏

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

语法： :header 获得标题（h1~h6）元素，固定写法。语法： :not(selector) 不包括指定内容的元素。语法： :first 获得选择的元素中的第一个元素。语法： :last 获得选择的元素中的最后一个元素。语法： :gt(index) 大于指定索引元素。语法： :lt(index) 小于指定索引元素。语法： :even 偶数，从 0 开始计数。语法： :eq(index) 指定索引元素。语法： :odd 奇数，从 0 开始计数。
复制链接

扫一扫