选择器五可见性过滤选择器
代码
<!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: 200px; height: 300px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } 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); } anmateIt(); }); /** :hidden :visible */ $(document).ready(function(){ //1.选取所有可见的 div 元素 $("#btn1").click(function(){ $("div:visible").css("background", "pink"); }); //2.选择所有不可见的 div 元素 //不可见：display属性设置为none，或visible设置为hidden $("#btn2").click(function(){ $("div:hidden").show("slow").css("background", "yellow"); $("div:hidden").show("slow").css("color", "red"); }); //3.选择所有不可见的 input 元素 $("#btn3").click(function(){ alert($("input:hidden").attr("value")); }); }); </script> <body> <h1 style="background-color: #ADD8E6;font-family: 楷体;font-weight: bolder;"><marquee style="height: 50px"> 本案例为选择器二:可见性过滤选择器：.讲述了以下内容 1选取所有可见的 div 元素 2选择所有不可见的 div 元素 3选择所有不可见的 input 元素" </marquee></h1> <input type="button" value="选取所有可见的 div 元素" id="btn1"> <input type="button" value="选择所有不可见的 div 元素" id="btn2" /> <input type="button" value="选择所有不可见的 input 元素" id="btn3" /> <a href="选择器主窗口.html">点击这里回到主界面</a> <br> <div class="one" id="one"> id 为 one,class 为 one 的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为test</div> <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</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> <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" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> <hr> </body> </html>
为什么要学jquery下面的案例告诉你答案
先看效果图
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <title>用JavaScript方法</title> <script type="text/javascript"> window.onload=function () { //获取按钮 //设置边框 //设置文本 三个div var btOne = document.getElementById('btnone'); // console.log(btOne); var btTwo = document.getElementById('btntwo'); // console.log(btTwo); var divs = document.getElementsByTagName('div'); // console.log(div); var btTree=document.getElementById('bttree'); var bttFor=document.getElementById('bttfor'); $(document).click(function () { }); btOne.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].style.border = '4px solid pink'; divs[i].style.background='yellow'; divs[i].style.height='100px'; divs[i].style.weight='100px' } }; btTwo.onclick=function () { for (var j=0;j<divs.length;j++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[j].textContent = '今天是第二天学习jquery'; } }; btTree.onclick=function () { for (var d=0;d<divs.length;d++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[d].style="font-familly","黑体" divs[d].textContent = '今天是第二天学习jquery likeseeyou'; } }; bttFor.onclick=function () { for (var f=0;f<divs.length;f++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[f].style="font-familly","黑体" divs[f].textContent = '今天是第二周学习jquery 采用了语法为' + '$(document).ready(function){} 事件为chlik()鼠标单机事件'; divs[f].style="color","red"; divs[f].style.border = '10px solid pink'; divs[f].style.background='while'; divs[f].style.height='30px'; divs[f].style.weight='60px' } } } </script> <!--JavaScript语言--> </head> <body> <hr> <input type="button" id="btnone" value="设置边框" > <input type="button" id="btntwo" value="设置文本"> <input type="button" id="bttree" value="设置字体"> <input type="button" id="bttfor"value="设置行高"> <input type="button" id="btfive" value="设置行宽"> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <a href="位置选择器.html">主界面</a> </body> </html>
换个角度如果你用jquery要写多少行代码。在实习相同的功能我会考虑最简单的方式。
再看一个案例。用jquery实现的。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>十二色变灯</title> <style type="text/css"> div{ height: 100px; width: 100px; border: 3px solid deepskyblue; border-radius: 50%; } </style> <script type="text/javascript"> var but=document.getElementsByTagName('button'); console.log(but);/*but是dom对象*/ /*原生js1方法 docyment.getElemntById()*/ </script> <script src="jquery-3.6.js"></script> </head> <body> <div></div><br> <div></div><br> <div></div><br> <button>单机</button> <button>单机1</button> <button>单机2</button> <script> $(document).ready(function () { $("button").click(function () { $("div").hide(1000); alert("现在div被隐藏了"); $(this).css("background-color","pink") }) }) </script> <script> $(document).ready(function () { $("div").click(function () { $(this).css("background-color","pink") }) }) </script> <script> /* $(document).ready(function () { $(div[0]).click(function () { var but=document.getElementsByTagName('div'); $('div').css("background-color","green") }) }) */ /* /!*方法二用JavaScript*!/ btn[0].onclick=function () { $('body')[0].style.backgroundColor='pink' }*/ </script> <button>猜猜我是什么色彩1</button> <button>猜猜我是什么色彩2</button> <button>猜猜我是什么色彩3</button> <button>猜猜我是什么色彩4</button> <button>猜猜我是什么色彩5</button> <button>猜猜我是什么色彩6</button> <button>猜猜我是什么色彩7</button> <button>猜猜我是什么色彩8</button> <button>猜猜我是什么色彩9</button> <button>猜猜我是什么色彩10</button> <button>猜猜我是什么色彩11</button> <button>猜猜我是什么色彩12</button> <button>猜猜我是什么色彩13</button> <button>猜猜我是什么色彩14</button> <button>猜猜我是什么色彩15</button> <button>猜猜我是什么色彩16</button> <button>猜猜我是什么色彩17</button> <button>猜猜我是什么色彩18</button> <p>如何去使用这些元素</p> <p1>消失</p1> <script> $(document).ready(function () { $("p").click(function () { alert("如何使用叮当购物 采用的是click 点击事件哦 色彩变？") $('p').css("color","green") $('p').css("background","pink") $('p').css("font-size","60px") }) $("p1").click(function () { alert("如何使用叮当购物 采用的是click 点击事件哦 色彩变？") $('p1').css("color", "red") $('p1').css("font-size", "60px") alert("点击我 我消失") $(this).hide(); }) }) </script> <script> $(document).ready(function () { $(but[0]).click(function () { var but=document.getElementsByTagName('body'); alert("hello world") $('body').css("background-color","yellow") }) $(but[0]).mouseenter(function () { $(but[0]).css('background','pink') }) }) </script> <script> $(document).ready(function () { $(but[1]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","pink") }) }) </script> <script> $(document).ready(function () { $(but[2]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","green") }) }) /* /!*方法二用JavaScript*!/ btn[0].onclick=function () { $('body')[0].style.backgroundColor='pink' }*/ </script> <script> $(document).ready(function () { $(but[3]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","orange") }) }) </script> <script> $(document).ready(function () { $(but[4]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","fuchsia") }) }) </script> <script> $(document).ready(function () { $(but[5]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","blue") }) }) </script> <script> $(document).ready(function () { $(but[6]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","black") }) }) </script> <script> $(document).ready(function () { $(but[7]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","blue") }) }) </script> <script> $(document).ready(function () { $(but[8]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","cyan") }) $(but[9]).click(function () { var but=document.getElementsByTagName('body'); $('body').css("background-color","red") }) $(but[10]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "purple") }) $(but[11]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "bronze") }) $(but[12]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "yellow") }) $(but[13]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "coral") }) $(but[14]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "black") }) $(but[15]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "red") }) $(but[16]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "blue") }) $(but[18]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", " red") }) $(but[19]).click(function () { var but = document.getElementsByTagName('body'); $('body').css("background-color", "yellow") }) }) </script> <a href="主窗口.html">返回主窗口</a> </body> </html>
