第一点实现：jquery选择器
实现的效果图片如下图
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> div, span, p { width: 200px; height: 150px; margin: 1px; background: yellow; border: #000 5px solid; float: left; font-size: 17px; font-family: Verdana; /* border-radius: 50%;*/ } *{ font-weight: bold; font-size: 40px; } div.mini { width: 60px; height: 60px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } *{ background: #c3c3c3; } </style> <title>综合练习选择器</title> <!--导入jquery文件--> <script src="jquery-3.6.js"></script> <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> <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn5").click(function(){ $("body div").css("background", "pink"); $("body div").css("color", "red"); }); //2.在 body 内, 选择div子元素 $("#btn6").click(function(){ $("body>div").css("background", "yellow"); $("body>div").css("color", "white"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn7").click(function(){ $("#one+div").css("background", "red"); $("#two+div").css("background", "red"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn8").click(function(){ $("#one~div").css("background", "blue"); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); $(document).ready(function(){ //1.选择第一个 div 元素 $("#btn9").click(function(){ $("div:first").css("background", "red"); $("div:first").css("color", "yellow"); }); //2.选择最后一个 div 元素 $("#btn10").click(function(){ $("div:last").css("background", "pink"); $("div:last").css("color", "red"); }); //3.选择class不为 one 的所有 div 元素 $("#btn11").click(function(){ $("div:not(.one)").css("background", "yellow"); }); //4.选择索引值为偶数的 div 元素 $("#btn12").click(function(){ $("div:even").css("background", "#bbffaa"); }); //5.选择索引值为奇数的 div 元素 $("#btn13").click(function(){ $("div:odd").css("background", "purple"); $("div:odd").css("color", "red"); }); //6.选择索引值为大于 3 的 div 元素 $("#btn14").click(function(){ $("div:gt(3)").css("background", "red"); $("div:gt(3)").css("color", "pink"); }); //7.选择索引值为等于 3 的 div 元素 $("#btn15").click(function(){ $("div:eq(3)").css("background", "brown"); }); //8.选择索引值为小于 3 的 div 元素 $("#btn16").click(function(){ $("div:lt(3)").css("background", "green"); }); //9.选择所有的标题元素 $("#btn9").click(function(){ $(":header").css("background", "#bbffaa"); }); //10.选择当前正在执行动画的所有元素 $("#btn17").click(function(){ $(":animated").css("background", "brown"); }); //11.选择没有执行动画的最后一个div $("#btn18").click(function(){ $("div:not(:animated):last").css("background", "#bbffaa"); }); }); </script> <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 元素 $("#btn19").click(function(){ $("div:contains('di')").css("background", "red"); }); //2.选择不包含子元素(或者文本元素) 的 div 空元素 $("#btn20").click(function(){ $("div:empty").css("background", "pink"); }); //3.选择含有 class 为 mini 元素的 div 元素 $("#btn21").click(function(){ $("div:has('.mini')").css("background", "gray"); }); //4.选择含有子元素(或者文本元素)的div元素 $("#btn22").click(function(){ $("div:parent").css("background", "orange"); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); /** :hidden :visible */ $(document).ready(function(){ //1.选取所有可见的 div 元素 $("#btn23").click(function(){ $("div:visible").css("background", "pink"); }); //2.选择所有不可见的 div 元素 //不可见：display属性设置为none，或visible设置为hidden $("#btn24").click(function(){ $("div:hidden").show("slow").css("background", "yellow"); $("div:hidden").show("slow").css("color", "red"); }); //3.选择所有不可见的 input 元素 $("#btn25").click(function(){ alert($("input:hidden").attr("value")); }); }); </script> <script type="text/javascript"> /** [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] */ $(function() { //1.选取含有 属性title 的div元素 $("#btn26").click(function() { $("div[title]").css("background", "pink"); }); //2.选取 属性title值等于'test'的div元素 $("#btn27").click(function() { $("div[title='test']").css("background", "red"); }); //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中) $("#btn28").click(function() { $("div[title!='test']").css("background", "green"); }); //4.选取 属性title值 以'te'开始 的div元素 $("#btn29").click(function() { $("div[title^='te']").css("background", "yellow"); }); //5.选取 属性title值 以'est'结束 的div元素 $("#btn30").click(function() { $("div[title$='est']").css("background", "orange"); }); //6.选取 属性title值 含有'es'的div元素 $("#btn31").click(function() { $("div[title*='es']").css("background", "cyan"); }); //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素 $("#btn32").click(function() { $("div[id][title*=es]").css("background", "#bbffaa"); }); //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素 $("#btn33").click(function() { $("div[title!='test'][title]").css("background", "#bbffaa"); }); }); </script> </head> <body> <input type="button" value="选择 id 为 one 的元素1" id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素2" id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素3" id="btn3" /> <input type="button" value="选择 所有的元素4" id="btn4" /> <input type="button" value="选择 所有的 span 元素和id为two的元素5" id="btn5" /> <input type="button" value="选择 body 内的所有 div 元素6" id="btn6" /> <input type="button" value="在 body 内, 选择div子元素7" id="btn7" /> <input type="button" value="选择 id 为 one 的下一个 div 元素8" id="btn8" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素9" id="btn9" /> <input type="button" value="选择第一个 div 元素10" id="btn10" /> <input type="button" value="选择最后一个 div 元素11" id="btn11" /> <input type="button" value="选择class不为 one 的所有 div 元素12" id="btn12" /> <input type="button" value="选择索引值为偶数的 div 元素13" id="btn13" /> <input type="button" value="选择索引值为奇数的 div 元素14" id="btn14" /> <input type="button" value="选择索引值为大于 3 的 div 元素15" id="btn15" /> <input type="button" value="选择索引值为等于 3 的 div 元素16" id="btn16" /> <input type="button" value="选择索引值为小于 3 的 div 元素17" id="btn17" /> <input type="button" value="选择所有的标题元素18" id="btn18" /> <input type="button" value="选择当前正在执行动画的所有元素19" id="btn19" /> <input type="button" value="选择没有执行动画的最后一个div20" id="btn20" /> <input type="button" value="选择 含有文本 'di' 的 div 元素21" id="btn21" /> <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素22" id="btn22" /> <input type="button" value="选择含有 class 为 mini 元素的 div 元素23" id="btn23" /> <input type="button" value="选择含有子元素(或者文本元素)的div元素24" id="btn24" /> <input type="button" value="选取含有 属性title 的div元素.25" id="btn25" /> <input type="button" value="选取 属性title值等于'test'的div元素.26" id="btn26" /> <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中).27" id="btn27" /> <input type="button" value="选取 属性title值 以'te'开始 的div元素.28" id="btn28" /> <input type="button" value="选取 属性title值 以'est'结束 的div元素.29" id="btn29" /> <input type="button" value="选取 属性title值 含有'es'的div元素.30" id="btn30" /> <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素.31" id="btn31" /> <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素32." id="btn32" /> <hr> <hr> <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> <span class="one" id="span">^1018^span元素^^</span> </body> </html>
Jouery事件
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入jquery文件--> <style> *{ padding: 0px; margin: 0px; } div{ font-size: 20px; height: 200px; width: 150px; background: gold; float: left; padding: 2px; margin: 2px; border-right: #0099FF; display: block; } article{ height:831px; width: 475px; margin: auto 10px; border: 100px; border-right: red 5px; border-left: #ffb3c4; border-top: #00FF99; border-bottom: #0099FF; } article1{ margin: auto 10px; border: 100px; border-right: red 5px; border-left: #ffb3c4; border-top: #00FF99; border-bottom: #0099FF; float: contour; } #wer{ height: 200px; width: 200px; } </style> <script src="jquery-3.6.js"></script> <title>综合实践案例</title> </head> <body> <article> <div>盒子一</div> <div>盒子二</div> <div>盒子三</div> <div>盒子四</div> <div>盒子A一</div> <div>盒子A二</div> <div>盒子A三</div> <div>盒子A四</div> <div>盒子B一</div> <div>盒子B二</div> <div>盒子B三</div> <div>盒子B四</div> <input type=" " value="text"> <input type="button" value="提交"> <input type="color" value="red"> <input type="password"> <input type="range"> <input type="url"> <input type="tel"> <input type="search"> <input type="email"> <input type="month"> <input type="time"> <input type="checkbox"> <input type="file"> <input type="week"> <script> /* /!*鼠标移入变yellow*!/ $(function () { $('div').mouseenter(function () { $('div').css('background', "yellow"); }); /*鼠标移入变red*/ $(function () { $('div').mouseover(function () { $('div').css('background', "red"); }); /*移出变pink*/ $(function () { $('div').mouseleave(function () { $('div').css('background', "pink"); }); $('div').click(function () { $('div').css('background', "green"); }) /* /!*鼠标移出变绿*!/ $(function () { $('div').mouseout(function () { $('div').css('background', "#00A40C"); });*/ /*点击变yellow*/ /* $(function () { $('div').mouseup(function () { $('div').css('background', "red"); }); })*/ /* })*/ /* })*/ }) }); </script> </article> <hr> <article1> 用户名：<input type="text" value=""><br> 密码：<input type="password" value=""> <script src="../cctv/jquery-3.6.js"></script> <script> $(function () { $(document).click(function () { $('input').css('background-color','red'); $('input').keydown(function () { $(this).css('background-color','pink'); }); $('input').keyup(function () { $(this).css('background-color','yellow'); }); $(document).keydown(function () { $(this).css('background-color','yellow'); if (e.keyCode=='13') { alert("提交吗") } }); }) }) </script> </article1> <article2 style="float:right;"> <p><input type="text"></p> <p><input type="password"></p> <script> /*获取焦点*/ $('input').focus(function () { $(this).css('background-color', 'pink'); /*失去焦点*/ $('input').blur(function () { $(this).css('background-color', 'red'); }) }); </script> </article2> </body> </html>
JQUERY的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入jquery文件--> <script src="jquery-3.6.js"></script> <title>操作综合练习题</title> <style> *{ margin: 0px; padding: 0px; background: white; font-size: 30px; font-weight: bold; text-shadow: 5px 5px 5px #9198e5; } button{ background: #FF0000; color: white; font-weight: bolder; margin: auto; padding: 2px; border: solid 1px dodgerblue; height: 80px; width: 300px; } div{ height: 100px; width: 400px; background: pink; color:yellow ; text-shadow: 6px 5px 5px red; float: right; padding: 4px; } article{ padding: 3px; } div1{ height: 200px; width: 200px; background-color: lightblue; } div2{ margin: auto; float: left; } /*样式内容*/ </style> </head> <body> <div style="background-color: #e5eecc;margin: auto"> <div>Happy birthday</div> <div>中文:生日快乐</div> <div>Happy birthday</div> <div>Happy birthday</div> <div>Happy birthday</div> <div>中文:生日快乐</div> <div>Happy birthday</div> <div>Happy birthday to you me </div> <div>笑一笑是年少</div> <div>想一想今天是多少号</div> <div1>Hello Wworld</div1> <div1>想一想今天是多少号</div1> </div> <br> <div2 style="margin: auto ; height: 200px;width: 230px" > <button>设置单样式</button> <button>设置多样式</button> <button>淡入fadeIn</button> <button>淡出fadeOut</button> <button>切换淡入fadeToggle/淡出</button> <button>向上slideUp</button> <button>向下slideDown</button> <button>切换向上/向下slideDown/Up</button> <button>隐藏hide(4000)</button> <button>显示show(4000)</button> <button>显示/隐藏show/hide</button> <button>增加类</button> <button>删除类</button> <button>切换类</button> </div2> <!--样式操作题--> <script> $(function () { $('button').eq(0).click(function () { $('div').css('width',400); }); $('button').eq(1).click(function () { $('div').css({ width: 500, color: 'red', height: 200, backgroundColor: 'yellow', fontSize: 46, }); $('button').eq(2).click(function () { $('div').fadeIn(2000) }); $('button').eq(3).click(function () { $('div').fadeOut(3000) }); $('button').eq(4).click(function () { $('div').fadeToggle(3000) }); $('button').eq(5).click(function () { $('div').slideUp(3000); }); $('button').eq(6).click(function () { $('div').slideDown(3000); }); $('button').eq(7).click(function () { $('div').slideToggle(4000); }); $('button').eq(8).click(function () { $('div').hide(4000); }); $('button').eq(9).click(function () { $('div').show() }); $('button').eq(10).click(function () { $('div').toggle(3000); }); }) }) </script> </body> </html>
Jquery效果二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ font-size: 60px; } div{ height: 200px; width: 200px; background: black; } .e{ height: 500px; background: deeppink; width: 400px; } .we{ background-color: #00BFFF; } </style> <title>样式操作</title> </head> <script src="jquery-3.6.js"></script> <body> <div></div> <button>设置单样式</button> <button>设置多样式</button> <button>增加类</button> <button>删除类</button> <button>切类</button> <script> $(function () { $('button').eq(0).click(function () { $('div').css('width',300); }) $('button').eq(1).click(function () { /* $('div').css({ width:400, backgroundColor:'red' });*/ $('button').eq(2).click(function () { $('div').addClass('e') $('div').addClass('we') }) }); $('button').eq(3).click(function () { $('div').removeClass('e') }); $('button').eq(4).click(function () { $('div').toggleClass('e') }); }); </script> </body> </html>
运行结果
节点案例
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建节点</title> <style> div{ font-size: 30px; font-weight: bolder; background-color:lightskyblue; } button{ height: 150px; width: 150px; font-size: 30px; font-weight: bolder; float: left; } input{ float: left; height: 150px; width: 150px; font-size: 30px; font-weight: bolder; } #div1{ width: 100px; height: 200px; background: yellow; } #div2{ width: 100px; height: 200px; background: cornflowerblue; } </style> <script src="jquery-3.6.js"></script> </head> <body> <button>@1append</button> <button>@2prepend</button> <button>@3prependTo</button> <button>@$4after</button> <button>@5before</button> <button>@6empty</button> <button>@7remove</button> <button>@8复制remove</button> <input type="button" value="html()创建节点" id="btn1"> <input type="button" value="$()创建节点" id="btn2"> <div> <p> p1 <span>span1</span> </p> <ul> <li>原先的li</li> </ul> </div> <ul> <li>内容为空置哦1</li> <li class="li3"> 内容为空置哦12</li> <li>内容为空置哦13</li> <li>内容为空置哦14</li> </ul> <div>原先div</div> <div1 id="div1"> <p>p1 <div2>span2</div2> </p> </div1> <script> /*创建节点*/ $(function () { $('#btn1').click(function () { $('div').html('<h2>我是新的内容</h2><a href="Jouery效果@1.html" style="font-size: 34px">效果1</a>'); $('div').html('<h1 style="background-color: #00BFFF">我是新的内容2</h1><a href="Jouery效果@1.html">效果1</a>') }) $('#btn2').click(function () { var $divNew=$('<div>我是div创建的行内容</div>'); $('div').append($divNew); console.log($('<div>我是div创建的行内容</div>')) ; }) /*增加节点*/ $(function () { /*创建节点*/ var $li =$('<li style="background-color: #FF0000">我是后来创建的</li>'); var $div=$('<div style="background-color: black; font-weight: bold; color: #FF0000" >我是新来的div@1</div><br>' + '<div style="background-color: black; font-weight: bold; color: #FF0000" >我是新来的div@2</div><br>' + '<div style="background-color: black; font-weight: bold; color: #FF0000" >我是新来的div@3</div><br>'); $('button').eq(0).click(function () { $('ul').append($li); $('ul').hide(4000); }); $('button').eq(1).click(function () { $('ul').prepend($li); }); $('button').eq(2).click(function () { $('ul').prepend($li); $li.prependTo('ul'); $('ul').hide(4000); }); $('button').eq(3).click(function () { $('ul').after($div); //在选择器$('div')的后面增加新内容 $div.insertAfter('div');//把div的新内容增加到div的后面 }); $('button').eq(4).click(function () { $('ul').before($div); //在选择器$('div')的后面增加新内容 $div.before('div');//把div的新内容增加到div的后面 $('ul').hide(4000); }); /*删除节点*/ $('button').eq(5).click(function () { /* $('ul').html();*/ $('ul').empty(); }); $('button').eq(6).click(function () { /* $('ul').html();*/ $('.li3').remove(); $('li').parent().remove(); }); $('button').eq(7).click(function () { var $div2 =('#div1').clone(); $('body').append($div2); $div2.attr('id','div2'); $('#div1').click(function () { alert('123456789'); }) }); }) }) </script> </body> </html>
