jQuery(4)
事件委托
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>11111</li> 10 <li>22222</li> 11 <li>33333</li> 12 <li>44444</li> 13 <li>55555</li> 14 </ul> 15 <br> 16 <button id="btn1">添加li</button> 17 <button id="btn2">解除事件委托</button> 18 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 19 <script type="text/javascript"> 20 // 点击li 要给当前的li修改背景颜色 21 // $('ul li').click(function () { //只是有的li才有css变化，新添加的没有 22 // $(this).css('background','pink'); 23 // }); 24 25 // 第一种事件委派 26 // delegate方法 由祖先元素调用 传递三个参数（后代元素(是选择器字符窜)，事件名称，回调函数） 27 // 在jq的事件委托中 会直接帮你在回调函数中 修改this的指向到当前的事件源 28 $('ul').delegate('li','click',function () { //新增的li也有css变化 29 $(this).css('background','pink') 30 }); 31 32 // 第二种方式事件委派 33 // $('ul').on('click','li',function () { //不常用 34 // $(this).css('background','pink') 35 // }); 36 37 38 // 点击btn1 创建新的li 39 $('#btn1').click(function () { 40 $('ul').append('<li>我是新增的li</li>') 41 }) 42 43 44 // 点击btn2 解除事件委托 45 $('#btn2').click(function () { 46 $('ul').undelegate(); 47 }) 48 </script> 49 </body> 50 </html>
事件委托练习
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>添加删除记录练习</title> 7 <link rel="stylesheet" type="text/css" href="css.css"/> 8 </head> 9 <body> 10 11 <table id="employeeTable"> 12 <tr> 13 <th>Name</th> 14 <th>Email</th> 15 <th>Salary</th> 16 <th> </th> 17 </tr> 18 <tr> 19 <td>Tom</td> 20 <td>tom@tom.com</td> 21 <td>5000</td> 22 <td><a href="deleteEmp?id=001">Delete</a></td> 23 </tr> 24 <tr> 25 <td>Jerry</td> 26 <td>jerry@sohu.com</td> 27 <td>8000</td> 28 <td><a href="deleteEmp?id=002">Delete</a></td> 29 </tr> 30 <tr> 31 <td>Bob</td> 32 <td>bob@tom.com</td> 33 <td>10000</td> 34 <td><a href="deleteEmp?id=003">Delete</a></td> 35 </tr> 36 37 </table> 38 39 <div id="formDiv"> 40 41 <h4>添加新员工</h4> 42 43 <table> 44 <tr> 45 <td class="word">name:</td> 46 <td class="inp"> 47 <input type="text" name="empName" id="empName"/> 48 </td> 49 </tr> 50 <tr> 51 <td class="word">email:</td> 52 <td class="inp"> 53 <input type="text" name="email" id="email"/> 54 </td> 55 </tr> 56 <tr> 57 <td class="word">salary:</td> 58 <td class="inp"> 59 <input type="text" name="salary" id="salary"/> 60 </td> 61 </tr> 62 <tr> 63 <td colspan="2" align="center"> 64 <button id="addEmpButton" value="abc"> 65 Submit 66 </button> 67 </td> 68 </tr> 69 </table> 70 </div> 71 72 <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> 73 <script type="text/javascript"> 74 /* 75 功能说明: 76 1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息 77 2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息 78 技术要点: 79 1. DOM查询 80 2. 绑定事件监听 81 3. DOM增删改 82 4. 取消事件的默认行为 83 */ 84 $(function () { 85 // 获取三个输入框 86 var $empName = $('#empName'); 87 var $email = $('#email'); 88 var $salary = $('#salary'); 89 // 给提交按钮绑定单击事件 获取三个输入框的value 拼装节点 90 $('#addEmpButton').click(function () { 91 // 不带$的 是输入框的值 带$的 是元素 这个意义 是你自己人为赋予的 92 var empName = $empName.val(); 93 var email = $email.val(); 94 var salary = $salary.val(); 95 // 任意一个输入框为空 都不能进入这个if里边 96 if($.trim(empName) && $.trim(email) && $.trim(salary) ){ //输入框有数据 97 // 拼装节点 98 // <tr> 99 // <td>Bob</td> 100 // <td>bob@tom.com</td> 101 // <td>10000</td> 102 // <td><a href="deleteEmp?id=003">Delete</a></td> 103 // </tr> 104 105 //新增的tr,添加到#employeeTable tbody 106 $('<tr></tr>') 107 .append('<td>'+empName+'</td>') 108 .append('<td>'+email+'</td>') 109 .append('<td>'+salary+'</td>') 110 .append('<td><a href="deleteEmp?id=003">Delete</a></td>') 111 .appendTo('#employeeTable tbody') 112 113 }else { 114 // 请不要提交空信息 115 alert('请不要输入空信息') 116 } 117 // 清空三个输入框 118 $empName.val(''); 119 $email.val(''); 120 $salary.val(''); 121 }); 122 123 124 125 // 删除按钮 126 //事件委派方式delegate函数 127 $('#employeeTable').delegate('a','click', function(event){ 128 // 阻止默认行为 129 event.preventDefault(); 130 // 根据当前点击的a标签 找到它所对应的tr 131 var $tr = $(this).parent().parent(); 132 // 获取当前这个tr中的name 133 var name = $tr.children(':first').html(); 134 // 提示是否要删除这个name对应的信息 确定就删除 取消就不操作 135 // confirm 确认框 有两个按钮 确认和取消 括号里边写提示信息 136 // 如果点击确认 则返回true 点击取消 则返回false 137 // 所以常和if 配合使用 把confirm 写在 if的判断条件中 如果点击确认即可执行if里边的逻辑 138 if(confirm('你确定要删除'+name+'的信息么？')){ 139 $tr.remove(); 140 } 141 142 // return false; 143 } 144 ); 145 146 }) 147 </script> 148 </body> 149 </html>
添加功能todolist练习
css
1 /*base*/ 2 body { 3 background: #fff; 4 } 5 6 .btn { 7 display: inline-block; 8 padding: 4px 12px; 9 margin-bottom: 0; 10 font-size: 14px; 11 line-height: 20px; 12 text-align: center; 13 vertical-align: middle; 14 cursor: pointer; 15 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 16 border-radius: 4px; 17 } 18 19 .btn-danger { 20 color: #fff; 21 background-color: #da4f49; 22 border: 1px solid #bd362f; 23 } 24 25 .btn-danger:hover { 26 color: #fff; 27 background-color: #bd362f; 28 } 29 30 .btn:focus { 31 outline: none; 32 } 33 34 35 /*app*/ 36 .todo-container { 37 width: 600px; 38 margin: 0 auto; 39 } 40 .todo-container .todo-wrap { 41 padding: 10px; 42 border: 1px solid #ddd; 43 border-radius: 5px; 44 } 45 46 /*header*/ 47 .todo-header input { 48 width: 560px; 49 height: 28px; 50 font-size: 14px; 51 border: 1px solid #ccc; 52 border-radius: 4px; 53 padding: 4px 7px; 54 } 55 56 .todo-header input:focus { 57 outline: none; 58 border-color: rgba(82, 168, 236, 0.8); 59 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 60 } 61 62 /*main*/ 63 .todo-main { 64 margin-left: 0px; 65 border: 1px solid #ddd; 66 border-radius: 2px; 67 padding: 0px; 68 } 69 70 .todo-empty { 71 height: 40px; 72 line-height: 40px; 73 border: 1px solid #ddd; 74 border-radius: 2px; 75 padding-left: 5px; 76 margin-top: 10px; 77 } 78 /*item*/ 79 li { 80 list-style: none; 81 height: 36px; 82 line-height: 36px; 83 padding: 0 5px; 84 border-bottom: 1px solid #ddd; 85 } 86 87 li label { 88 float: left; 89 cursor: pointer; 90 } 91 92 li label li input { 93 vertical-align: middle; 94 margin-right: 6px; 95 position: relative; 96 top: -1px; 97 } 98 99 li button { 100 float: right; 101 display: none; 102 margin-top: 3px; 103 } 104 105 li:before { 106 content: initial; 107 } 108 109 li:last-child { 110 border-bottom: none; 111 } 112 113 /*footer*/ 114 .todo-footer { 115 height: 40px; 116 line-height: 40px; 117 padding-left: 6px; 118 margin-top: 5px; 119 } 120 121 .todo-footer label { 122 display: inline-block; 123 margin-right: 20px; 124 cursor: pointer; 125 } 126 127 .todo-footer label input { 128 position: relative; 129 top: -1px; 130 vertical-align: middle; 131 margin-right: 5px; 132 } 133 134 .todo-footer button { 135 float: right; 136 margin-top: 5px; 137 }
js
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>未完成版</title> 6 <link rel="stylesheet" href="index.css"> 7 <style> 8 .todo-main li button { 9 display: none; 10 } 11 </style> 12 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 // 模拟数据 实际的开发当中 根据后台接口来的 16 var dataJson = [{ 17 'content':'唱歌' 18 },{ 19 'content':'滑雪' 20 },{ 21 'content':'遛狗' 22 }]; 23 // 获取ul元素 24 var $todoMain = $('.todo-main'); 25 // 获取全选按钮 26 var $checkAll = $('#checkAll'); 27 28 // 数据绑定 1.页面初始化,跟新任务总数 29 function bindData(data) { 30 // 循环拼装节点 31 for (var i = 0; i < data.length; i++) { 32 $todoMain.append('<li class="todoItem" style="background: rgb(255, 255, 255);"><label>' + 33 '<input type="checkbox"><span>'+data[i].content+'</span></label>' + 34 '<button class="btn btn-danger" style="display: none;">删除</button></li>') 35 } 36 // 更新任务总数 37 allTodos(); 38 } 39 bindData(dataJson); 40 41 // 更新任务总数，用的次数多，用函数封装 42 function allTodos() { 43 // ul当中有多少个li 就有多少个任务 所以直接使用li的长度即可 44 $('#allTodos').html($todoMain.children('li').length) 45 } 46 47 // 更新已完成任务数，用的次数多，用函数封装 48 function allCompletedTodos() { 49 // 当前已经选中多少个复选框 就有多少个已完成任务 50 $('#allCompletedTodos').html($todoMain.find(':checkbox:checked').length) 51 } 52 53 // 复选框单击事件 54 $('.todoItem input').click(function () { 55 // 更新已完成任务数 56 allCompletedTodos(); 57 // 判断所有的任务都被选中了 58 $checkAll.prop('checked',$todoMain.find(':checkbox:not(:checked)').length === 0); 59 // $checkAll.prop('checked',$('#allTodos').html() == $('#allCompletedTodos').html()) 60 }) 61 62 // 全选按钮 63 $checkAll.click(function () { 64 // 让所有的复选框 与全选按钮的checked状态保持一致 65 $todoMain.find(':checkbox').prop('checked',this.checked) 66 // 更新已完成任务数 67 allCompletedTodos(); 68 }); 69 70 // // 移入移出li 71 // $('.todoItem').hover(function () { 72 // //颜色背景变化 73 // $(this).css('background','#ccc'); 74 // //删除按钮出现 75 // $(this).children('button').show(); 76 // },function () { 77 // $(this).css('background','#fff'); 78 // $(this).children('button').hide(); 79 // }); 80 81 // 给父元素绑定,事件委派 $('.todoItem') 82 // 第一个参数;选择器字符窜 83 $todoMain.delegate(('.todoItem'), 'mouseover' ,function(){ 84 //移入事件，颜色变化，删除按钮出来 85 $(this).css('background','pink') 86 // $(this).children('.btn-danger').css('display','block') 87 $(this).children('.btn-danger').show() 88 89 }) 90 91 $todoMain.delegate(('.todoItem'), 'mouseout' ,function(){ 92 //移出事件，颜色消失，删除按钮消失 93 $(this).css('background','#fff') 94 $(this).children('.btn-danger').hide() 95 96 }) 97 98 // 删除按钮 99 $('.todoItem>button').click(function () { 100 // 点击删除按钮 删除的是当前这个按钮的父元素li 101 $(this).parent().remove(); 102 // 更新任务总数 103 allTodos(); 104 // 更新已完成任务数 105 allCompletedTodos(); 106 // 如果删除某几个任务时 剩余的任务全都选中 全选的状态需要更新 107 // 需要确定当前任务列表当中还存在任务 全选才可以被选中 108 $checkAll.prop('checked',$todoMain.children('li').length!=0 && 109 $todoMain.find(':checkbox:not(:checked)').length === 0) 110 }) 111 112 113 // 清除已完成任务按钮 114 $('#removeAllCompleted').click(function () { 115 $todoMain.find(':checkbox:checked').parent().parent().remove(); 116 // 更新任务总数 117 allTodos(); 118 // 更新已完成任务数 119 allCompletedTodos(); 120 // 全选按钮只能是false状态 121 // 点击这个按钮之后 只有两种情况 122 // 1.删除所有选中的 留下一些 没有被选中的 这个时候全选不需要被选中 123 // 2.所有任务都被选中了 直接清空了所有任务 这个时候全选也不需要被选中 124 $checkAll.prop('checked',false); 125 }) 126 127 128 // 根据输入的值 创建新的任务 129 $('#newTodo').keyup(function (event) { 130 // 所有创建相关的逻辑 都要在按下回车的前提下执行 131 if(event.keyCode == 13){ 132 // 判断输入的值 去除空格后是否为空 133 if($.trim($(this).val())){ 134 // 输入有效 135 // 根据当前输入框的value 执行创建逻辑 136 var newData = [{ 137 'content':$(this).val() 138 }]; 139 bindData(newData); 140 // 更新全选状态 因为新增的任务一定是未完成状态 所以需要更新 且一定为false 141 $checkAll.prop('checked',false); 142 }else{ 143 // 输入无效 144 alert('请不要输入空信息') 145 } 146 // 清空输入框 147 $(this).val(''); 148 } 149 }) 150 151 }) 152 </script> 153 </head> 154 155 <body> 156 <div id="root"> 157 <div class="todo-container"> 158 <div class="todo-wrap"> 159 <div class="todo-header"> 160 <input id="newTodo" type="text" placeholder="请输入你的任务名称，按回车键确认" /> 161 </div> 162 <ul class="todo-main"> 163 164 </ul> 165 <div class="todo-footer"> 166 <label> 167 <input id="checkAll" type="checkbox"/> 168 </label> 169 <span> 170 已完成<span id="allCompletedTodos">0</span> / 全部<span id="allTodos">2</span> 171 </span> 172 <button id="removeAllCompleted" class="btn btn-danger">清除已完成任务</button> 173 </div> 174 </div> 175 </div> 176 </div> 177 </body> 178 179 </html>
插件扩展
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>25_扩展插件</title> 6 <style type="text/css"> 7 * { 8 margin: 0px; 9 } 10 11 .div1 { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 top: 50px; 16 left: 10px; 17 background: red; 18 } 19 </style> 20 </head> 21 <body> 22 <input type="checkbox" name="items" value="足球"/>足球 23 <input type="checkbox" name="items" value="篮球"/>篮球 24 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 25 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 26 <br/> 27 <input type="button" id="btn1" value="全 选"/> 28 <input type="button" id="btn2" value="全不选"/> 29 <input type="button" id="btn3" value="反选"/> 30 31 <!-- 32 1. 扩展jQuery的工具方法 33 $.extend(object) 34 2. 扩展jQuery对象的方法 35 $.fn.extend(object) 36 --> 37 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 38 <script type="text/javascript" src="js/my_jQuery_plugin.js"></script> 39 <script type="text/javascript"> 40 console.log($.min(9,11)); 41 console.log($.max(5,12)); 42 var str = ' my atguigu '; 43 console.log('---'+$.leftTrim(str)+'---'); 44 console.log('---'+$.rightTrim(str)+'---'); 45 46 47 $('#btn1').click(function () { 48 $(':checkbox').checkAll(); 49 }); 50 $('#btn2').click(function () { 51 $(':checkbox').unCheckAll(); 52 }); 53 $('#btn3').click(function () { 54 $(':checkbox').reverseCheck(); 55 }) 56 </script> 57 </body> 58 </html>
<script type="text/javascript" src="js/my_jQuery_plugin.js"></script>
1 /* 2 扩展jQuery的工具方法 : $.extend(object) 3 min(a, b) : 返回较小的值 4 max(c, d) : 返回较大的值 5 leftTrim() : 去掉字符串左边的空格 6 rightTrim() : 去掉字符串右边的空格 7 */ 8 9 //正则 10 /* 11 ^ 匹配字符串开始 12 \s 匹配空格 13 + 匹配一次或者多次 14 $ 匹配字符串的末尾 15 */ 16 $.extend({ 17 min:function (a,b) { 18 return a > b ? b : a; 19 }, 20 max:function (a,b) { 21 return a > b ? a : b; 22 }, 23 leftTrim:function (str) { 24 return str.replace(/^\s+/,''); 25 }, 26 rightTrim:function (str) { 27 return str.replace(/\s+$/,'') 28 } 29 }); 30 31 32 33 /* 2. 给jQuery对象 添加3个功能方法: 34 * checkAll() : 全选 35 * unCheckAll() : 全不选 36 * reverseCheck() : 反选 37 * */ 38 39 // 2. 扩展jQuery对象的方法 40 // $.fn.extend(object) 41 42 43 $.fn.extend({ 44 checkAll:function () { 45 this.prop('checked',true); // this就是$(':checkbox') 46 }, 47 unCheckAll:function () { 48 this.prop('checked',false) 49 }, 50 reverseCheck:function() { 51 this.each(function () { //this就是$(':checkbox') 52 this.checked = !this.checked; //this就是遍历的每个dom元素 53 }) 54 } 55 });
