今天看到一个新奇的jquery 选择器的用法，因为以前没有见过，所以记录下来
1.jquery 选择器：
给body添加一个元素，添加元素的时候，同时把属性和点击事件都一起进行添加
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 9 <style> 10 .test { 11 background: #ccc; 12 } 13 </style> 14 <script> 15 $(function() { 16 // $("<div>"),这是jquery中创建元素的写法 17 $("<div>", { 18 class: "abc", // 在元素创建的时候，添加一个对象，对象里包含元素的属性：class 19 id: "test", // 在元素创建的时候，添加一个对象，对象里包含元素的属性：id 20 text: 'welcome to study jquery', // 在元素创建的时候，添加一个对象，对象里包含元素的文本属性：text 21 hhehe: 'nihao', // 在元素创建的时候，添加一个对象，对象里包含元素的自定义属性：hhehe 22 name:'huanying2015', // 在元素创建的时候，添加一个对象，对象里包含元素的自定义属性：name 23 click: function() { // 在元素创建的时候，添加一个对象，对象里包含元素的点击事件：click ，这是一个匿名函数 24 $(this).toggleClass('test'); 25 } 26 }).appendTo("body"); // 把创建的元素添加到body中 （这种包含元素事件和属性，用一个对象来包含的情况，是第一次见，呵呵，感觉新颖） 27 }); 28 </script> 29 </head> 30 <body> 31 <input type="button" value="nnndn"> 32 </body> 33 </html>
运行结果：
查看元素：元素的属性和点击事件都出来了
2. es6 箭头函数实现全选，不选，反选
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <input type="button" value="全选" class="btn"> 11 <input type="button" value="全不选" class="btn"> 12 <input type="button" value="反选" class="btn"> 13 <li><input type="checkbox"></li> 14 <li><input type="checkbox"></li> 15 <li><input type="checkbox"></li> 16 <li><input type="checkbox"></li> 17 <li><input type="checkbox"></li> 18 <li><input type="checkbox"></li> 19 <li><input type="checkbox"></li> 20 <li><input type="checkbox"></li> 21 <li><input type="checkbox"></li> 22 <li><input type="checkbox"></li> 23 <li><input type="checkbox"></li> 24 <li><input type="checkbox"></li> 25 <li><input type="checkbox"></li> 26 </body> 27 </html>
2.1 常规实现：js 代码：
1 <script> 2 window.onload = function() { 3 var abtn = document.querySelectorAll("input.btn"); 4 var acheck = document.querySelectorAll("li>input"); 5 abtn[0].onclick = function() { 6 acheck.forEach(function(val) { 7 val.checked = true; 8 }); 9 }; 10 abtn[1].onclick = function() { 11 acheck.forEach(function(val) { 12 val.checked = false; 13 }); 14 }; 15 abtn[2].onclick = function() { 16 acheck.forEach(function(val) { 17 val.checked = !val.checked; 18 }); 19 }; 20 } 21 </script>
2.2 箭头函数实现：js代码：
1 <script> 2 window.onload = () => { 3 var abtn = document.querySelectorAll("input.btn"); 4 var acheck = document.querySelectorAll("li>input"); 5 abtn[0].onclick = () => { 6 acheck.forEach((val) => { 7 val.checked = true; 8 }); 9 }; 10 abtn[1].onclick = () => { 11 acheck.forEach((val) => { 12 val.checked = false; 13 }); 14 }; 15 abtn[2].onclick = () => { 16 acheck.forEach((val) => { 17 val.checked = !val.checked; 18 }); 19 }; 20 }; 21 </script>
运行效果：两种方式相同
