本文章根据菜鸟教程官网编写:有利于小白上手体验。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <style> /*js引用css时,css得写为内嵌样式*/ .cssButton16-div { font-weight: bold; color: pink; } </style> </head> <body> <button class="button1">隐藏</button> <button class="button2">显示</button> <button class="button3">显示/隐藏</button> <div class="div-p"> <p class="p1">1</p> <p class="p2">2</p> <p class="p3">3</p> <p class="p4">4</p> <p class="p5">5</p> <p class="p5">6</p> <div id="test1"> <p> test1_P </p> </div> <div class="test2"> <p> test2_P </p> </div> </div> <input type="text"> <br><br> <button class="button4">淡入</button> <button class="button5">淡出</button> <button class="button6">淡入/淡出</button> <div id="flip">点我滑下面板</div> <div id="panel">Hello world!</div> <div id="flip1">点我拉起面板</div> <div id="panel1">Hello world!</div> <div id="flip2">点我拉起/滑下面板</div> <div id="panel2">Hello world!</div> <button class="button7">点我左滑动</button> <div class="button7-div"></div> <button class="button8">点我滑动放大</button> <div class="button8-div"></div> <button class="button9">每点一次相对滑动放大一次</button> <div class="button9-div"></div> <br><br><br> <button class="button10">滑动收放模块</button> <div class="button10-div"></div> <button class="button11">同时操作多个元素缩放</button> <div class="button11-div"></div> <button class="button12">操作多个元素</button> <div class="button12-div">1</div> <br><br><br> <button id="start">开始</button> <button id="stop">暂停</button> <button id="stop2">停止</button> <button id="stop3">暂停动画,但完成动作</button> <div class="button-stop">暂停动画</div> <br><br><br><br> <p id="test2">这是段落中的 <b>粗体</b> 文本。</p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button> <p><a id="runoob" href="www.baidu.com">名称链接: </a><input type="text" id="test3" value="请输入您的用户名"></p> <button class="button13">显示修改 href 和 title</button> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn3">尾部添加列表项</button> <button id="btn4">头部添加列表项</button> <br> <p class="charuText">前后插入文本域</p> <br> <button id="btn5">之前插入</button> <button id="btn6">之后插入</button> <p>这是一个段落。</p> <p class="italic"> <i> 这是另外一个段落。 </i> </p> <button class="button14"> 移除所有 class="italic" 的元素。 </button> <br><br> <div class="button15-div"> 清空div元素清空div元素清空div元素 </div> <br> <button class="button15"> 清空div元素 </button> <br><br> <div id="button16-div"> 这是一些重要的文本! 为元素添加 class </div> <br> <button id="button16"> 为元素添加 css </button> </body> </html>
.div-p { display: flex; margin-left: 1rem; } .div-p p { margin-left: 1rem } #test1, #test2 { margin-left: 1rem } #panel, #flip, #panel1, #flip1, #panel2, #flip2 { text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; border-radius: 0.3rem; margin-top: 0.1rem; } #panel, #panel2 { padding: 1rem; display: none; } #panel1 { padding: 1rem; } .button7-div, .button8-div, .button9-div, .button10-div, .button11-div, .button12-div { width: 2rem; height: 2rem; background-color: pink; position: absolute; } .button8-div, .button11-div { margin-left: 7rem; } .button9-div, .button12-div { margin-left: 16rem; } .button-stop { background: pink; height: 4rem; width: 4rem; position: absolute; }
3.index.js
$(function () { /** *功能描述: 鼠标点击隐藏元素和显示元素 *@author ZYH *@since 2021/7/1 17:04 */ $(".button1").click(function () { //p标签元素消失 // $("p").hide(); // $("#test1").hide(); $("p").hide(); // 选取元素后点击次元素后消 // $(this).hide(); // 显示元素 // $(".p3").show(); }); $(".button2").click(function () { $("p").show(); }); $(".button3").click(function () { $("p").toggle(); }); /** *功能描述: 鼠标 *@author ZYH *@since 2021/7/1 16:48 */ $(".p1").mouseenter(function () { alert('鼠标移动'); }); /** *功能描述: 鼠标悬停 *@author ZYH *@since 2021/7/1 16:49 */ $(".p2").hover( function () { alert("你进入了 p1!"); }, function () { alert("拜拜! 现在你离开了 p1!"); } ); /** *功能描述: 鼠标离开 *@author ZYH *@since 2021/7/1 16:48 */ $(".p3").mouseleave(function () { alert('鼠标离开'); }); /** *功能描述: 鼠标获取焦点 *@author ZYH *@since 2021/7/1 16:49 */ $("input").focus(function () { $(this).css("background-color", "#cccccc"); }); /** *功能描述:鼠标失去焦点 *@author ZYH *@since 2021/7/1 16:50 */ $("input").blur(function () { $(this).css("background-color", "#ffffff"); }); /** *功能描述: 点击按钮淡入 *@author ZYH *@since 2021/7/1 17:54 */ $(".button4").click(function () { $(".p4").fadeIn(); $(".p5").fadeIn("slow"); $(".p6").fadeIn(3000); }); /** *功能描述:鼠标按钮淡出 *@author ZYH *@since 2021/7/1 17:58 */ $(".button5").click(function () { $(".p1").fadeOut(); $(".p2").fadeOut("slow"); $(".p3").fadeOut(3000); }); /** *功能描述: 鼠标点击淡入淡出 *@author ZYH *@since 2021/7/1 18:00 */ $(".button6").click(function () { $(".p1").fadeToggle(); $(".p2").fadeToggle("slow"); $(".p3").fadeToggle(3000); }); /** *功能描述:滑出模块 *@author ZYH *@since 2021/7/2 8:51 */ $("#flip").click(function () { $("#panel").slideDown("slow"); }); /** *功能描述: 滑入模块 *@author ZYH *@since 2021/7/2 8:53 */ $("#flip1").click(function () { $("#panel1").slideUp("slow"); }); /** *功能描述: 滑入滑出 *@author ZYH *@since 2021/7/2 8:53 */ $("#flip2").click(function () { $("#panel2").slideToggle("slow"); }); /** *功能描述: 点击按钮左滑 *@author ZYH *@since 2021/7/2 9:16 */ $(".button7").click(function () { $(".button7-div").animate({ left: "2rem" }); }); /** *功能描述:鼠标点击滑动放大 *@author ZYH *@since 2021/7/2 9:21 */ $(".button8").click(function () { $(".button8-div").animate({ left: '3rem', //淡化颜色的百分比 opacity: '0.5', height: '3rem', width: '3rem' }); }); /** *功能描述: *@author ZYH *@since 2021/7/2 9:51 */ $(".button9").click(function () { $(".button9-div").animate({ left: '1rem', height: '+=1rem', width: '+=1rem' }); }); /** *功能描述: 滑动收放模块 *@author ZYH *@since 2021/7/2 9:54 */ $(".button10").click(function () { $(".button10-div").animate({ height: 'toggle' }); }); /** *功能描述: 同时操作多个元素 *@author ZYH *@since 2021/7/2 9:59 */ $(".button11").click(function () { var div = $(".button11-div"); //拉长 div.animate({ height: '3rem', opacity: '0.4' }, "slow"); //变宽 div.animate({ width: '3rem', opacity: '0.8' }, "slow"); //变矮 div.animate({ height: '1rem', opacity: '0.4' }, "slow"); //变窄 div.animate({ width: '1rem', opacity: '0.8' }, "slow"); }); $(".button12").click(function () { var button12_div = $(".button12-div") button12_div.animate({ width: '3rem', height: '3rem' }, "slow") button12_div.animate({ fontSize: "2rem" }, "slow"); }); /** *功能描述: *@author ZYH *@since 2021/7/2 10:31 */ $("#start").click(function () { $(".button-stop").animate({left: '5rem'}, 5000).css("color", "red"); $(".button-stop").animate({fontSize: '4em'}, 5000); }); $("#stop").click(function () { $(".button-stop").stop(); }); $("#stop2").click(function () { $(".button-stop").stop(true); }); $("#stop3").click(function () { $(".button-stop").stop(true, true); }); /** *功能描述: 点击按钮显示设置DOM对象 *@author ZYH *@since 2021/7/2 11:09 */ $("#btn1").click(function () { alert("Text: " + $("#test2").text("text")); }); $("#btn2").click(function () { alert("HTML: " + $("#test2").html("html")); }); /** *功能描述:显示设置DOM对象的值 *@author ZYH *@since 2021/7/2 11:12 */ $(".button13").click(function () { alert("您输入的内容: " + $("#test3").val("val")); $("#runoob").attr({ "href": "http://www.runoob.com/jquery", "title": "jQuery 教程" }); // 通过修改的 title 值来修改链接名称 title = $("#runoob").attr('title'); $("#runoob").html(title); }); /** *功能描述:尾部添加元素 *@author ZYH *@since 2021/7/2 11:15 */ $("#btn3").click(function () { $("ol").append("<li>追加列表项</li>"); }); $("#btn5").click(function () { $(".charuText").before("<b>之前</b>"); }); /** *功能描述: 头部添加元素 *@author ZYH *@since 2021/7/2 11:35 */ $("#btn4").click(function () { $("ol").prepend("<li>在开头添加列表项</li>"); }); $("#btn6").click(function () { $(".charuText").after("<i>之后</i>"); }); /** *功能描述: 删除元素 *@author ZYH *@since 2021/7/2 11:33 */ $(".button14").click(function () { $(".italic").remove(); }); $(".button15").click(function () { $(".button15-div").empty(); }); /** *功能描述:为选中的元素添加css *@author ZYH *@since 2021/7/2 11:55 * *addClass为添加样式 *removeClass为删除样式 * toggleClass为互相切换样式 */ $("#button16").click(function () { $("#button16-div").addClass("cssButton16-div"); }); });