jQuery之位置选择器

小半 • 2023年1月12日下午2:52 • 技术随笔 • 阅读 180

针对整个页面而言的位置选择器

:first获取第一个元素

:last获取最后一个元素

:odd匹配所有索引值为奇数的元素，从0 开始计数

:even匹配所有索引值为偶数的元素，从0 开始计数

:eq(n)匹配一个给定索引值的元素

:gt(n)匹配所有大于给定索引值的元素

:lt(n)匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

:first-child匹配第一个子元素

:last-child匹配最后一个子元素

:only-child如果某个元素是父元素中唯一的子元素，将会被匹配

:nth-child(n) :nth-child(odd|even) :nth-child(xn+y)匹配其父元素下的第N个子或奇偶元素

注意：nth-child()选择器编号是从1开始，而其他选择器从0开始

<!DOCTYPE html> 
<html> 
      <head> 
        <meta charset="utf-8"> 
        <title>位置选择器</title> 
        <style type="text/css"> 
                 div{ 
                      border: 1px solid  red; 
                } 
                .myClass{ 
                      background-color:  aqua; 
                } 
        </style> 
        <script src="js/jquery.min.js"   ></script>
        <script type="text/javascript"> 
            $(function(){ 
                //位置针对整个页面 
                //:first     :last   :odd   :even   
                //$("p:first").addClass("myClass"); 
                //$("p:last").addClass("myClass"); 
                //$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素
                //$("p:even").addClass("myClass"); //
                //:eq(n)     :gt(n)   :lt(n) 
                //$("p:eq(4)").addClass("myClass");   //equals 
                //$("p:lt(4)").addClass("myClass");//less   than  
                //$("p:gt(4)").addClass("myClass");//greater   than 
                //位置针对上级标签 
                //:first-child    :last-child   :only-child 
                //$("p:first-child").addClass("myClass"); 
                //$("p:last-child").addClass("myClass"); 
                //$("p:only-child").addClass("myClass"); 
                //:nth-child(n)   :nth-child(odd|even) :nth-child(xn+y)
                  //索引从0开始 只有此处从1开始
                //$("p:nth-child(2)").addClass("myClass");
                //$("p:nth-child(odd)").addClass("myClass"); 
                //$("p:nth-child(even)").addClass("myClass"); 
                //$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3 
            });
        </script> 
    </head>   
    <body> 
        <div> 
            <p>1.   JavaSE</p>
            <p>2.   Oracle</p>
        </div> 
        <div> 
            <p>3.   HTML/CSS/JS</p>
            <p>4.   jQuery/EasyUI</p>
            <p>5.   JSP/Servlet/Ajax</p>
        </div> 
        <div> 
            <p>6.   SSM</p>  
            <p>7.   SpringBoot/SpringCloud/SpringData</p>
            <p>8.   Maven/Linux/p> 
            <p>9.   Redis/Solr/Nginx</p> 
            <p>10.   SpringBoot/SpringCloud/SpringData</p> 
            <p>11.   SpringBoot/SpringCloud/SpringData</p> 
            <p>12.   SpringBoot/SpringCloud/SpringData</p> 
        </div> 
        <div> 
            <p>13. 就业指导</p> 
        </div> 
    </body>  
</html>