jquery事件、修改页面内容
一、复合型事件属性
1、toggle() 多次单击事件(toggle(切换))
//多次循环执行单击事件 toggle(切换) toggle( function(){} , function(){} , function(){} )
toggl多次循环实现案例：
<html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script> $(function (){ $("#btn").toggle( function (){ //第一次单击 alert("女王陛下！") }, //第二次单击 function (){ alert("臣，退了！") }, function (){ //第三次单击 alert("这一退就是永远！我就要去找其他小姐姐了！"); }, ) }) </script> </head> <body> <input type="button" value="点击" id="btn"> </body> </html>
示意图：
2、hover（）鼠标移入移出
hover( function(鼠标移入){ }, function(鼠标移出){ } );
(1)hover移入移出案例一：
<html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script> $(function () { //绑定复合型事件属性hover $("tr").hover( function () { alert("鼠标进入"); }, function () { alert("鼠标移出"); } ) }) </script> </head> <body> <center> <h3>hover实现表格中tr的移入移出案列</h3> </center> <table border="1" align="center" width="50%" cellspacing="0px" cellpadding="0px"> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>薪资</td> </tr> </thead> <tbody> <tr> <td>王恒杰</td> <td>男</td> <td>21</td> <td>18000</td> </tr> <tr> <td>杨福君</td> <td>女</td> <td>19</td> <td>4200</td> </tr> <tr> <td>吴洪旭</td> <td>男</td> <td>23</td> <td>20000</td> </tr> <tr> <td>邓正武</td> <td>男</td> <td>21</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
效果图：
(2)hover移入移出案例二：鼠标移入表格加粗变红色
<html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style> .c1{ background-color: red; font-size: 20px; font-weight: bold; } </style> <script> $(function () { //绑定复合型事件属性hover $("tr").hover( function () { $(this).addClass("c1") }, function () { $(this).removeClass("c1") } ) }) </script> </head> <body> <center> <h3>hover实现表格中tr的移入移出案列</h3> </center> <table border="1" align="center" width="50%" cellspacing="0px" cellpadding="0px"> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>薪资</td> </tr> </thead> <tbody> <tr> <td>王恒杰</td> <td>男</td> <td>21</td> <td>18000</td> </tr> <tr> <td>杨福君</td> <td>女</td> <td>19</td> <td>4200</td> </tr> <tr> <td>吴洪旭</td> <td>男</td> <td>23</td> <td>20000</td> </tr> <tr> <td>邓正武</td> <td>男</td> <td>21</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
效果图：
二、Jquery中常用的事件属性
规律：js中的事件属性去掉on 加上()
jqueryObj. click() 单击 jqueryObj. dbclick() 双击 jqueryObj. mouseover() 移入 jqueryObj. mouseout() 移出 jqueryObj. blur();失去焦点 jqueryObj.change();下拉列表值改变 jqueryObj.focus();获取焦点 jqueryObj.keyDown();键盘按下 jqueryObj.keyUp();键盘弹起
三、标签的其他方法 获取标签对象
1. jqueryObj.parent(); 获取当前标签的父类节点//parentNOdees 2. jqueryObj.children();获取当前标签的所有子类节点//chidrenNodes 3. jqueryObj.next(); 获取当前标签的下一个兄弟节点//nextsibling 4. jqueryObj.prev();获取当前标签元素的上一个兄弟节点//previoussibling
四、Jquery中的动画效果
实现页面元素隐藏或展示时的动画效果
1. show(单位：毫秒) 从浏览器的左上角渐入 2. fadeIn(单位：毫秒) 淡入 3. slideDown() 从上到下逐渐展开 4. hide() 元素隐藏 5. fadeOut() 淡出 6. slideUp() 从下到上逐渐收缩
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery实现动画效果</title> <style> #d{ background-color: red; width: 100px; height: 100px; display: none; </style> <script type="text/jscript" src="js/jquery-1.8.3.min.js"></script> <script> $(function(){ // 从浏览器左上角渐入 $("#show").click(function(){ $("#d").show(3000); }) //元素隐藏 $("#hide").click(function(){ $("#d").hide(3000); }) //淡入 $("#fadeIn").click(function(){ $("#d").fadeIn(3000); }) //淡出 $("#fadeOut").click(function(){ $("#d").fadeOut(3000); }) //从上到下展示 $("#slideDown").click(function(){ $("#d").slideDown(3000); }) //从下到上收缩 $("#slideUp").click(function(){ $("#d").slideUp(3000); }) }); </script> </head> <body> <!-- 1. show(单位：毫秒) 从浏览器的左上角渐入 2. fadeIn(单位：毫秒) 淡入 3. slideDown() 从上到下逐渐展开 4. hide() 元素隐藏 5. fadeOut() 淡出 6. slideUp() 从下到上逐渐收缩 --> <div id="d"></div> <input type="button" value="点击渐出" id="show" /> <input type="button" value="点击渐入" id="hide" /> <input type="button" value="淡入" id="fadeIn" /> <input type="button" value="淡出" id="fadeOut" /> <input type="button" value="从上到下展开" id="slideDown" /> <input type="button" value="从下到上收缩" id="slideUp" /> </body> </html>
效果展示：
五、综合案例“全选”实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function (){ //事件源头：全选的复选框 //事件属性：click点击 //监听器：实现全选 $("#selectAll").click(function (){ //:checkbox 获取当前选中的单选按钮或者复选框 //:checkbox:gt(0) 获取当前复选框大于0的复选框 //prop修改标签的属性 标签对象.prop(“属性名”,”属性值”); //proph获取标签的属性 标签对象.prop(“属性名”); //checked:选中 //注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false $(":checkbox:gt(0)").prop("checked",$("#selectAll").prop("checked")); }); }) </script> </head> <body> 全选：<input type="checkbox" id="selectAll"></br> <input type="checkbox" name="likes" value="1"> <input type="checkbox" name="likes" value="2"> <input type="checkbox" name="likes" value="3"> <input type="checkbox" name="likes" value="4"> <input type="checkbox" name="likes" value="5"> <input type="checkbox" name="likes" value="6"> <input type="checkbox" name="likes" value="7"> <input type="checkbox" name="likes" value="8"> <input type="checkbox" name="likes" value="9"> <input type="checkbox" name="likes" value="10"> </body> </html>
效果图：
注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false
