jquery接触初级----- 一种新奇的选择器用法

今天看到一个新奇的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>

运行效果：两种方式相同

posted on 2018-01-18 17:47 huanying2015 阅读(138) 评论(0) 编辑收藏举报