通过jQuery注册事件
jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <body> <button type="button" name="click" >单击事件</button> <button type="button" name="dbclick" >双击事件</button> </body> <script> $("button[name='click']").click(function(e){ alert('单击事件！'); }); $("button[name='dbclick']").dblclick(function(e){ alert('双击事件！'); }); </script></html>函数中的参数就是事件源对象：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <body> <button type="button" name="click" >单击事件</button> <button type="button" name="dbclick" >双击事件</button> </body> <script> $("button[name='click']").click(function(e){ alert(e.toString()); }); $("button[name='dbclick']").dblclick(function(e){ alert(e.toString()); }); </script></html>在函数中可以使用this来表示当前触发事件的对象，也可以通过选择器去获取当前对象：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <body> <button type="button" name="click" >单击事件</button> <button type="button" name="dbclick" >双击事件</button> </body> <script> $("button[name='click']").click(function(e){ $("button[name='click']").html("Change"); }); $("button[name='dbclick']").dblclick(function(e){ $(this).html("Change"); }); </script></html>给标签添加/删除样式
在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <style> .text_p{ color: royalblue; font-size: 22px; } </style> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> <script> $("p").mousemove(function(){ $(this).addClass("text_p"); }); $("p").mouseout(function(){ $(this).removeClass("text_p"); }); </script></html>除了以上的方法外，还有一个css方法可以添加样式，以键值的方式添加：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <body> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </body> <script> $("p").mousemove(function(){ $(this).css("color","royalblue"); $(this).css("font-size","22px"); }); $("p").mouseout(function(){ $(this).css("color","black"); $(this).css("font-size","16px"); }); </script></html>如果css方法中传递的是键，那么就可以得到该键的值：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <style> .text_p{ color: royalblue; font-size: 22px; } </style> <body> <p class="text_p">Hello World!</p> <p class="text_p">Hello World!</p> <p class="text_p">Hello World!</p> </body> <script> $("p").click(function(){ alert($(this).css("color")); alert($(this).css("font-size")); }); </script></html>运行结果：
控制标签
通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js" ></script> <body> <button type="button">添加标签</button> <div></div> <select></select> </body> <script> $("button").click(function(){ $("div").append("<p>Hello Wolrd!</p>"); $("select").append("<option>hello</option>"); }); </script></html>remove方法可以删除某个标签：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <body> <button type="button">删除标签</button> <div> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> </div> </body> <script> $("button").click(function() { $("p").remove(); }); </script></html>html方法类似于innerHTML方法，可以给开始和结束标签之间填充HTML或文本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <body> <button type="button">添加HTML</button> <div></div> </body> <script> $("button").click(function() { $("div").html("<p>Hello Wolrd!</p>"); }); </script></html>text方法可以给开始和结束标签之间填充纯文本内容，即便传的是HTML代码也会被转换成文本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <body> <button type="button">添加文本</button> <p></p> </body> <script> $("button").click(function() { $("p").text("<p>Hello Wolrd!</p>"); }); </script></html>val方法可以返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <body> <button type="button">得到/设置value</button> <input type="text" value="test" /> </body> <script> $("button").click(function() { alert($("input").val()); $("input").val("Hello World！"); }); </script></html>控制标签属性
attr方法可以控制标签的所有属性，通过这个方法可以给某个标签动态设置属性，也可以通过这个方法来获得某个属性的值，而removeAttr方法则可以删除指定的属性：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <style> .test_div{ display: flex; flex-direction: column; align-items: center; } </style> <body> <div> <button type="button" id="add">设置属性</button> <button type="button" id="del">删除属性</button> <img /> </div> </body> <script> $("button").click(function() { $("img").attr("src","img/TIM截图20180105215155.png"); $("img").addClass("test_div"); }); $("#del").click(function(){ $("img").removeAttr("src"); }); </script></html>jQuery的显示/隐藏效果
show方法可以显示某个组件，hide方法则可以隐藏某个组件：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <style> .test{ display: flex; flex-direction: column; align-items: center; } </style> <body> <div> <button type="button" name="show">显示</button> <button type="button" name="hide">隐藏</button> <img class="test" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/TIM截图20180105215155.png" /> </div> </body> <script> $("button[name='show']").click(function() { $("img").show(); }); $("button[name='hide']").click(function(){ $("img").hide(); }); </script></html>show以及hide方法中都有可选的参数，第一个参数可以设置元素从隐藏到完全可见的速度，可以直接传递毫秒数，也可以传递字符串：slow、normal、fast等。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数，show 函数执行完之后，要执行的函数，示例：
<script> function show_img(){ alert("显示完成！"); } function hide_img(){ alert("隐藏完成！"); } $("button[name='show']").click(function() { $("img").show(5000,show_img); }); $("button[name='hide']").click(function(){ $("img").hide(5000,hide_img); });</script>toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <style> .test{ display: flex; flex-direction: column; align-items: center; } </style> <body> <div> <button type="button" name="toggle">显示/隐藏</button> <img class="test" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/TIM截图20180105215155.png" /> </div> </body> <script> function done(){ alert("完成！"); } $("button[name='toggle']").click(function() { $("img").toggle(3000,done) }); </script></html>想要有淡入淡出的效果可以使用以下四种fade方法：
fadeIn() 方法用于淡入已隐藏的元素
fadeOut() 方法用于淡出可见元素
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <style> .test{ display: flex; flex-direction: column; align-items: center; } </style> <body> <div> <button type="button" name="fadeIn">显示</button> <button type="button" name="fadeOut">隐藏</button> <button type="button" name="fadeToggle">显示/隐藏</button> <button type="button" name="fadeTo">淡出</button> <img class="test" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/TIM截图20180105215155.png" /> </div> </body> <script> function fadeIn_img(){ alert("显示完成！"); } function fadeOut_img(){ alert("隐藏完成！"); } function done_img(){ alert("完成！"); } $("button[name='fadeIn']").click(function() { $("img").fadeIn(3000,fadeIn_img); }); $("button[name='fadeOut']").click(function(){ $("img").fadeOut(3000,fadeOut_img); }); $("button[name='fadeToggle']").click(function(){ $("img").fadeToggle(3000,done_img); }); $("button[name='fadeTo']").click(function(){ $("img").fadeTo("slow",0.5); }); </script></html>通过jQuery实现元素滑动效果可以使用以下三个方法：
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.2.1.min.js"></script> <style> .test { display: flex; flex-direction: column; align-items: center; } </style> <body> <button type="button" name="slideDown">向下滑动</button> <button type="button" name="slideUp">向上滑动</button> <button type="button" name="slideToggle">向下滑动/向上滑动</button> <div> <img class="test" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/TIM截图20180105215155.png" /> </div> </body> <script> function slideDown_img() { alert("向下滑动完成！"); } function slideUp_img() { alert("向上滑动完成！"); } function done_img() { alert("完成！"); } $("button[name='slideDown']").click(function() { $("div").slideDown(3000,slideDown_img); }); $("button[name='slideUp']").click(function() { $("div").slideUp(3000,slideUp_img); }); $("button[name='slideToggle']").click(function() { $("div").slideToggle(3000,done_img); }); </script></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦