第一点内容基本选择器
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /*2021/12/19号选择总结*/ /*@1全选选择器*/ *{ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ font-size: 23px; font-weight: bolder; border: lavender 1px; background-color: whitesmoke; border-radius: 3%; } div, span, p { width: 307px; height: 300px; border-radius: 5%; margin: 1px; background: yellow; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; /* border-radius: 50%;*/ } div.mini { width: 60px; height: 60px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } input{ color: white; background-color: black; } </style> <script src="jquery-3.6.js"></script> <title>基本选择器</title> </head> <body> <script> $(document).ready(function () { //1.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { $("#one").css("background-color","cyan"); $("#one").css("color","red"); }); //2.选择 class 为 mini 的所有元素 $("#btn2").click(function () { $(".mini").css("background-color"," pink"); $(".mini").css("color"," red"); }); $("#btn3").click(function () { //3.选择 元素名是 div 的所有元素 $("div").css("background-color","orange"); $("div").css("color","pink"); }); //4.选择所有的元素 $("#btn4").click(function () { $("*").css("background-color","green"); $("*").css("font-size","10px"); $("*").css("font-family","黑体"); }); //5.选择所有的 span 元素和id为two的元素 $("#btn5").click(function () { $("span,#two").css("background-;color","green"); $("span,#two").css("color","cyan"); }) }); </script> <!--id选择器--> <input type="button" value="选择 id 为 one 的元素" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /> <input type="button" value="选择 所有的元素" id="btn4" /> <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> <a href="选择器主窗口.html">点击这里回到主界面</a> <br> <h1 style="background-color: #ADD8E6;font-family: 楷体;font-weight: bolder;"><marquee>本案例为选择器一.讲述了以下内容.1 全选选择器 2 id选择器 3 class选择器 4 选择所有的 span 元素和id为two的元素 </marquee></h1> <hr> <div class="one" id="one">1001 id 为 one,class 为 one 的div <div class="mini">class为mini1002</div> </div> <div class="one" id="two" title="test">1003 id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other1004</div> <div class="mini" title="test">class为mini,title为test1005</div> </div> <div class="one">1006 <div class="mini">class为mini1007</div> <div class="mini">class为mini1008</div> <div class="mini">class为mini1009</div> <div class="mini">1010</div> </div> <div class="one"> <div class="mini">class为mini1011</div> <div class="mini">class为mini1012</div> <div class="mini">class为mini1013</div> <div class="mini" title="tesst">class为mini,title为tesst1014</div> </div> <div style="display:none;" class="none">style的display为"none"的div1015</div> <div class="hide">class为"hide"的div1016</div> <div> 包含input的type为"hidden"的div1017<input type="hidden" size="8"> </div> <span class="one" id="span">^1018^span元素^^</span> </body> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "pink"); $("body div").css("color", "red"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body>div").css("background", "yellow"); $("body>div").css("color", "white"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "red"); $("#two+div").css("background", "red"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#one~div").css("background", "blue"); }); }); </script> </html>
第二点内容层次选择器
运行效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ font-size: 23px; font-weight: bolder; border: lavender 1px; background-color: wheat; } div, span, p { width: 307px; height: 200px; margin: 1px; background: #aaa; border: #000 1px solid; float: left; font-size: 20px; font-family: 方正姚体; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } input{ color: white; background-color: black; } </style> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "pink"); $("body div").css("color", "red"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body>div").css("background", "green"); $("body>div").css("font-size", "10px"); $("body>div").css("color", "white"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "red"); $("#two+div").css("background", "yellow"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#one~div").css("background", "blue"); }); }); </script> </head> <body> <h1 style="background-color: #ADD8E6;font-family: 楷体;font-weight: bolder;"><marquee> 本案例为选择器二:层次选择器：.讲述了以下内容. 1 选择 body 内的所有 div 元素 2 在 body 内, 选择div子元素 3 选择 id 为 one 的下一个 div 元素 4 选择所有的 span 元素和id为two的元素 </marquee></h1> <!-- <div> <h1>层级选择器:根据元素的层级关系选择元素</h1> ancestor descendant ： parent > child ： prev + next ： prev ~ siblings ： </div> --> <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> <input type="button" value="在 body 内, 选择div子元素" id="btn2" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> <a href="选择器主窗口.html">点击这里回到主界面</a> <br> <div class="one" id="one">1001 id 为 one,class 为 one 的div <div class="mini">class为mini1002</div> </div> <div class="one" id="two" title="test">1003 id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other1004</div> <div class="mini" title="test">class为mini,title为test1005</div> </div> <div class="one">1006 <div class="mini">class为mini1007</div> <div class="mini">class为mini1008</div> <div class="mini">class为mini1009</div> <div class="mini">1010</div> </div> <div class="one">1011 <div class="mini">class为mini1012</div> <div class="mini">class为mini1013</div> <div class="mini">class为mini1014</div> <div class="mini" title="tesst">class为mini,title为tesst1015</div> </div> <div style="display:none;" class="none">style的display为"none"的div1016</div> <div class="hide">class为"hide"的div1017</div> <div> 包含input的type为"hidden"的div 1018<input type="hidden" size="8"> </div> <span id="span">^^span元素^^1019</span> <hr> </body> </html>
选择器内容三过滤选择器
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ font-size: 23px; font-weight: bolder; border: lavender 1px; padding-bottom: 2px; margin-bottom: 3px; } div, span, p { width: 300px; height: 200px; margin: 1px; background: navajowhite; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: burlywood; font-size: 12px; } div.hide { display: none; } input{ color: white; background-color: black; } </style> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); $(document).ready(function(){ //1.选择第一个 div 元素 $("#btn1").click(function(){ $("div:first").css("background", "red"); $("div:first").css("color", "yellow"); }); //2.选择最后一个 div 元素 $("#btn2").click(function(){ $("div:last").css("background", "pink"); $("div:last").css("color", "red"); }); //3.选择class不为 one 的所有 div 元素 $("#btn3").click(function(){ $("div:not(.one)").css("background", "yellow"); }); //4.选择索引值为偶数的 div 元素 $("#btn4").click(function(){ $("div:even").css("background", "#bbffaa"); }); //5.选择索引值为偶数的 div 元素 $("#btn5").click(function(){ $("div:odd").css("background", "purple"); $("div:odd").css("color", "red"); }); //6.选择索引值为大于 3 的 div 元素 $("#btn6").click(function(){ $("div:gt(3)").css("background", "red"); $("div:gt(3)").css("color", "pink"); }); //7.选择索引值为等于 3 的 div 元素 $("#btn7").click(function(){ $("div:eq(3)").css("background", "brown"); }); //8.选择索引值为小于 3 的 div 元素 $("#btn8").click(function(){ $("div:lt(3)").css("background", "green"); }); //9.选择所有的标题元素 $("#btn9").click(function(){ $(":header").css("background", "#bbffaa"); }); //10.选择当前正在执行动画的所有元素 $("#btn10").click(function(){ $(":animated").css("background", "brown"); }); //11.选择没有执行动画的最后一个div $("#btn11").click(function(){ $("div:not(:animated):last").css("background", "#bbffaa"); }); }); </script> </head> <body> <h1 style="background-color: #ADD8E6;font-family: 楷体;font-weight: bolder;"><marquee style="height: 50px"> 本案例为选择器二:过滤选择器：.讲述了以下内容. 1 选择第一个 div 元素 2 选择最后一个 div 元素 3 选择class不为 one 的所有 div 元素 4 选择所有的 span 元素和id为two的元素 5 选择索引值为奇数的 div 元素 6 选择索引值为偶数的 div 元素 7 选择索引值为等于 3 的 div 元素 8 选择索引值为大于3 的 div 元素 9 选择索引值为小于 3 的 div 元素 10 选择所有的标题元素 11 选择当前正在执行动画的所有元素 12 选择没有执行动画的最后一个div </marquee></h1> <!-- <div> :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated </div> --> <input type="button" value="选择第一个 div 元素" id="btn1" /> <input type="button" value="选择最后一个 div 元素" id="btn2" /> <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /> <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /> <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /> <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /> <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /> <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /> <input type="button" value="选择所有的标题元素" id="btn9" /> <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择没有执行动画的最后一个div" id="btn11" /> <a href="选择器主窗口.html">点击这里回到主界面</a> <br> <div class="one" id="one">1 id 为 one,class 为 one 的div <div class="mini">class为mini2</div> </div> <div class="one" id="two" title="test">3 id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other4</div> <div class="mini" title="test">class为mini,title为test5</div> <div class="mini" title="other">class为mini,title为other4</div> <div class="mini" title="test">class为mini,title为test5</div> </div> <div class="one">6 <div class="mini">class为mini7</div> <div class="mini">class为mini8</div> <div class="mini">class为mini9</div> <div class="mini">class为mini7</div> <div class="mini">class为mini8</div> <div class="mini">class为mini9</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini10</div> <div class="mini">class为mini11</div> <div class="mini">class为mini12</div> <div class="mini">class为mini10</div> <div class="mini">class为mini11</div> <div class="mini">class为mini12</div> <div class="mini" title="tesst">class为mini,title为tesst13</div> </div> <div style="display:none;" class="none">style的display为"none"的div14</div> <div class="hide">class为"hide"的div15</div> <div> 包含input的type为"hidden"的div16<input type="hidden" size="8"> </div> <div id="mover">正在执行动画的div元素.17</div> <hr> </body> </html>
选择器内容四内容过滤选择器
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容过滤选择器</title> <script src="jquery-3.6.js"></script> <style type="text/css"> *{ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ font-size: 23px; font-weight: bolder; border: lavender 1px; } div, span, p { width: 300px; height: 200px; margin: 1px; background: deepskyblue; border: #000 2px solid; float: left; font-size: 17px; border-radius: 10%; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } input{ color: white; background-color: black; } </style> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); /* $("#btn1").slideToggle("slow",anmateIt) $("#btn2").slideToggle("slow",anmateIt) $("div:contains('di')").slideToggle("slow",anmateIt)*/ } anmateIt(); }); /** :contains(text) :empty :has(selector) :parent */ $(document).ready(function(){ //1.选择 含有文本 'di' 的 div 元素 $("#btn1").click(function(){ $("div:contains('di')").css("background", "red"); }); //2.选择不包含子元素(或者文本元素) 的 div 空元素 $("#btn2").click(function(){ $("div:empty").css("background", "pink"); }); //3.选择含有 class 为 mini 元素的 div 元素 $("#btn3").click(function(){ $("div:has('.mini')").css("background", "gray"); }); //4.选择含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background", "orange"); }); }); </script> </head> <body> <h1 style="background-color: #ADD8E6;font-family: 楷体;font-weight: bolder;"><marquee style="height: 50px"> 本案例为选择器二:过滤选择器：.讲述了以下内容 1 选择 含有文本 'di' 的 div 元素. 2.选择不包含子元素(或者文本元素) 的 div 空元素 3 选择含有 class 为 mini 元素的 div 元素 4 选择含有子元素(或者文本元素)的div元素 </marquee></h1> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /> <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /> <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /> <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /> <a href="选择器主窗口.html">点击这里回到主界面</a> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test1</div> <div class="mini" title="other">class为mini,title为other2</div> <div class="mini" title="test">class为mini,title为test3</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> <div class="mini"></div> <div class="mini">2</div> <div class="mini"></div> <div class="mini"></div> <div class="mini"></div> </div> <div class="one" > <div class="mini" >class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> <hr> </body> </html>
