02 Jquery选择器&siblings应用

jQuery层级选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQuery层级选择器</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <ul id="ul1">
10         <li>小红</li>
11         <li id="li1">晓钢</li>
12         <div>
13             <ul id="ul2">
14                <li id="li2">小清醒</li>
15                <li>小幸运</li>
16             </ul>
17         </div>
18         <li id="li3">小小</li>
19         <li>校外</li>
20         <li>消息</li>
21     </ul>
22     <script type="text/javascript">
23         // jQuery层级选择器
24         $(function () {
25             //空格 后代选择器 所选择标签的所有后代标签
26             var ulChildren = $("#ul1 li");
27             console.log(ulChildren);
28             ulChildren.css("font-size",20);
29             ulChildren.css("color","red");
30 
31             // > 子代选择器 子代里的标签 不包括子代的子代  只是相差一代
32             var ulChild = $("#ul1>li");
33             console.log(ulChild);
34             ulChild.css("color","green");
35             ulChild.css("font-size",30);
36 
37             // + 紧邻的标签 兄弟标签中往下第一个标签
38             var jlli = $("#li3+li");
39             jlli.css("color","purple");
40 
41             // ~ 兄弟标签 所有同级往下的标签
42             var broli = $("#li3~li");
43             broli.css("color","black");
44 
45             // , 并集选择器  同时选择多个条件下的标签
46             var liOr = $("#li1,#li2");
47             console.log(liOr);
48             liOr.css("color","blue");
49             liOr.css("font-size",25);
50         })
51     </script>
52 </body>
53 </html>

 

jQuery基本过滤选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery基本过滤选择器</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
    <ul id="ul1">
        <li>小红</li>
        <li id="li1">晓钢</li>
        <div>
            <ul id="ul2">
               <li id="li2">小清醒</li>
               <li>小幸运</li>
               <li>小害羞</li>
            </ul>
        </div>
        <li id="li3">小小</li>
        <li>校外</li>
        <li>消息</li>
    </ul>
    <script type="text/javascript">
        // jQuery过滤选择器
        $(function () {
            // :eq(index) 选择匹配的标签中，索引为index的标签
            var uleq = $("li:eq(0)");
            console.log(uleq);
            uleq.css("font-size",20);
            uleq.css("color","red");

            // :gt(index) 选择匹配的标签中，索引大于index的标签
            var ulgt = $("li:gt(-2)");  //大于倒数第二个 即倒数第一个
            console.log(ulgt);
            ulgt.css("font-size",20);
            ulgt.css("color","green");

            // :lt(index) 选择匹配的标签中，索引小于index的标签
            var ullt = $("li:lt(2)");  //大于倒数第二个 即倒数第一个
            console.log(ullt);
            ullt.css("font-size",25);
            ullt.css("color","blue");

            // :odd  选择匹配的标签中，索引为基数的标签
            var ulodd = $("li:odd");  //偶数列
            console.log(ulodd);
            ulodd.css("font-size",30);
            ulodd.css("background-color","red");

            // :even  选择匹配的标签中，索引为基数的标签
            var uleven = $("li:even");  //基数列
            console.log(uleven);
            uleven.css("font-size",30);
            uleven.css("background-color","green");

            // :first  选择匹配的标签中，第一个标签
            var ulfirst = $("li:first");
            console.log(ulfirst);
            ulfirst.css("font-size",20);
            ulfirst.css("background-color","purple");

            // :last  选择匹配的标签中，最后一个标签
            var ullast = $("li:last");
            console.log(ullast);
            ullast.css("font-size",20);
            ullast.css("background-color","purple");

        })


    </script>
</body>
</html>

 

jQuery属性选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery属性选择器</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
    <form action="">
        <input type="text" placeholder="name">
        <input type="password" placeholder="password">
    </form>
    <script type="text/javascript">
        // 入口函数
        $(function () {
            $("input[type=password]").css("background","green")  // 通过type的属性选择，不需要加引号。
        })
    </script>
</body>
</html>

 

jQuery筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery属性选择器</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
    <div class="box">
        <p>
            <span class="child">xiaoxiao1</span>
        </p>
        <p>
            <span class="active">xiaoxiao2</span>
        </p>
        <p class="item3">xiaoxiao3</p>
        <p class="item4">xiaoxiao4</p>
        <p>xiaoxiao5</p>
        <div class="child">哈哈哈哈哈</div>
    </div>
    <script type="text/javascript">
        // 入口函数
        $(function () {
            // find() 查找标签中所有后代元素 子子孙孙
            $(".box").find(".item3").css("background","red");

            // children() 查找自定元素的亲儿子元素
            $(".box").children(".child").css("background","red");

            // sibling 查找所有兄弟元素  不包括自己
            $(".box>p").siblings(".item4").css("background","green");

            // parent 查找父亲
            $(".child").parent().siblings(".child").css("background","purple");

            // eq() 查找指定索引的标签
            $("p").eq(-2).css("font-size",30);
        })
    </script>
</body>
</html>

 

siblings应用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>siblings应用</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <style type="text/css">
 8         ul li{
 9             background: yellowgreen;
10             margin-bottom: 10px;
11         }
12         a{
13             color: #000;
14         }
15         p{
16             display: none;
17         }
18         .active{
19             display: block;
20             color:#ff6700;
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <h3>ul1</h3>
27         <ul id="ul1">
28             <li>晓钢</li>
29             <li>晓康</li>
30             <li>晓红</li>
31             <li>晓明</li>
32         </ul>
33     </div>
34     <div>
35         <h3>ul2</h3>
36         <ul id="ul2">
37             <li>
38                 <a href="javascript:void(0)">晓钢</a>
39             </li>
40             <li>
41                 <a href="javascript:void(0)">晓康</a>
42             </li>
43             <li>
44                 <a href="javascript:void(0)">晓红</a>
45             </li>
46             <li>
47                 <a href="javascript:void(0)">晓明</a>
48             </li>
49         </ul>
50     </div>
51     <p>哈哈1</p>
52     <p>哈哈2</p>
53     <p>哈哈3</p>
54     <p>哈哈4</p>
55 
56     <script type="text/javascript">
57         // 入口函数
58         $(function () {
59             // siblings 的排他性应用
60             $("#ul1>li").hover(function () {
61                 $(this).css({'color':'red','font-size':18}).siblings().css({'color':'black','font-size':16});
62             });
63 
64             // siblings 的深层次应用
65             $("#ul2>li").hover(function () {
66                 // $(this).css('color','red').children('a').css({'color':'red','font-size':18});
67                 // $(this).siblings().css('color','black').children('a').css({'color':'black','font-size':16});
68                 // 通过父类的兄弟元素
69                 $(this).children('a').css({'color':'red'}).parent().siblings().children().css({'color':'black'})
70             });
71 
72             // 选项卡实现  $(this).index() 获取当前标签的索引
73              $("#ul2>li").hover(function () {
74                  $(this).children('a').css({'color':'red'}).parent().siblings().children().css({'color':'black'})
75                  $("p").eq($(this).index()).addClass('active').siblings().removeClass('active');
76             })
77         })
78     </script>
79 </body>
80 </html>

 

posted @ 2019-07-02 11:20  毛斯钢  阅读(422)  评论(0)  编辑  收藏  举报