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>