jQuery学习-day02
静态方法和实例方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 <script type="text/javascript"> 7 //1.定义一个类 8 function AClass(){} 9 10 //2.给这个类添加一个静态方法 11 //直接添加给类的就是静态方法 12 AClass.staticMethod = function(){ 13 alert("staticMethod"); 14 } 15 //静态方法通过类名调用 16 AClass.staticMethod(); 17 18 //3.给这个添加一个实例方法 19 AClass.prototype.instanceMethod = function(){ 20 alert("instanceMethod"); 21 } 22 //实例方法通过类的实例调用 23 //创建一个实例（创建一个对象 24 var a = new AClass(); 25 //通过实例调用实例方法 26 a.instanceMethod(); 27 28 29 </script> 30 </head> 31 <body> 32 33 </body> 34 </html>
静态方法的each方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 7 <script type="text/javascript"> 8 var arr = [1,2,3,4,5]; 9 //伪数组 10 var obj = { length: 2, 0: 'a', 1: 'b' }; 11 12 /*JS 13 第一个参数：遍历到的元素 14 第二个参数：当前遍历到的索引 15 注意点： 16 原生的forEach方法只能遍历数组，不能遍历伪数组 17 */ 18 19 arr.forEach(function (value,index){ 20 console.log(index,value); 21 }); 22 /* 23 obj.forEach(function (value,index){ 24 console.log(index,value); 25 });//这个会报错 26 */ 27 28 /*JQ 29 第一个参数：当前遍历到的索引 30 第二个参数：遍历到的元素 31 注意点： 32 33 */ 34 35 //1.利用JQ的each静态方法遍历数组 36 $.each(arr,function(index,value){ 37 console.log(index,value); 38 }); 39 //JQ可以遍历伪数组 40 $.each(obj,function(index,value){ 41 console.log(index,value); 42 }); 43 </script> 44 </head> 45 <body> 46 47 </body> 48 </html>
静态方法的map方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 </head> 7 <script type="text/javascript"> 8 var arr = [1,2,3,4,5]; 9 //伪数组 10 var obj = { length: 2, 0: 'a', 1: 'b' }; 11 12 /* 13 第一个参数：当前遍历到的元素 14 第二个参数：当前遍历到的索引 15 第三个参数：当前被遍历的数组 16 注意点： 17 和forEach一样，不能遍历伪数组 18 */ 19 arr.map(function(value,index,array){ 20 console.log(index,value,array); 21 }); 22 /* 23 obj.map(function(value,index,array){ 24 console.log(index,value,array); 25 });//会报错 26 */ 27 28 /* 29 第一个参数：要遍历的数组 30 第二个参数：每比那里一个元素之后执行的回调函数 31 回调函数的参数： 32 第一个参数：遍历到的元素 33 第二个参数：遍历到的索引 34 可以遍历伪数组 35 */ 36 var res1 = $.map(arr,function(value,index){ 37 console.log(index,value); 38 return index+value; 39 }); 40 var res2 = $.map(obj,function(value,index){ 41 console.log(index,value); 42 return index+value; 43 44 }); 45 var res3 = $.each(arr,function(index,value){ 46 console.log(index,value); 47 return index+value; 48 });//each方法返回的就是数组，函数里对数组有什么操作都不会影响到返回值 49 50 /* 51 JQ中的each静态方法和map静态方法的区别： 52 each静态方法默认的返回值就是，遍历谁就返回谁 53 map静态方法默认的返回值是一个空数组 54 55 each静态方法不支持在回调函数中对遍历的数组进行处理 56 map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回 57 */ 58 59 console.log(res1); 60 console.log(res2); 61 console.log(res3); 62 63 </script> 64 <body> 65 66 </body> 67 </html>
静态的其他方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 /* 10 $.trim(); 11 作用：去除字符串两端的空格 12 参数：需要去除空格的字符串 13 返回值：取值空格之后的字符串 14 */ 15 var str = " coco "; 16 var res = $.trim(str); 17 console.log(str); 18 console.log(res); 19 </script> 20 <script type="text/javascript"> 21 //判断是不是window对象 22 /* 23 $.window(); 24 作用：判断传入的对象是否是window对象 25 返回值：true false 26 */ 27 var arr = [1,2,3]; 28 var arrLike = { length: 2, 0: 'a', 1: 'b' }; 29 var obj = ["name":"coco",age:22]; 30 var fun = function(); 31 var win = window(); 32 33 var res1 = $.isWindow(arr); 34 console.log(res1);//false 35 36 var res2 = $.isWindow(arrLike); 37 console.log(res2);//false 38 39 var res3 = $.isWindow(obj); 40 console.log(res3);//false 41 42 var res4 = $.isWindow(fun); 43 console.log(res4);//false 44 45 var res5 = $.isWindow(win); 46 console.log(res5);//true 47 48 49 </script> 50 </body> 51 </html>
静态方法的holeReady方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 <script type="text/javascript"> 7 //$.holdReady(true); 作用：暂停ready执行 8 $.holdReady(true); 9 $(document).ready(function(){ 10 alert("ready"); 11 }); 12 </script> 13 </head> 14 <body> 15 16 17 <button>回复ready事件</button> 18 19 <script type="text/javascript"> 20 var btn = document.getElementsByTagName("button")[0]; 21 btn.onclick = function(){ 22 $.holdReady(false); 23 } 24 </script> 25 </body> 26 </html>
点击按钮才弹出ready，因为先暂停了页面的ready加载，要到点击了之后取消暂停页面ready之后，就会加载完页面的DOM元素了
内容选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 <script type="text/javascript"> 7 //:empty 8 //作用：找到既没有文本内容也没有子元素的指定元素 9 var $div = $('div:empty'); 10 console.log($div); 11 12 //:parent 13 //作用：找到有文本内容或有子元素的指定元素 14 var $div2 = $('div:parent'); 15 console.log($div2); 16 17 //:contains(text) 18 //作用：找到包含指定文本内容的指定元素 19 var $div3 = $("div:contains('我是一个div')"); 20 console.log($div3); 21 22 //:has(selector) 23 //作用：找到包含指定子元素的指定元素 24 var $div4 = $("div:has('span')"); 25 console.log($div4); 26 </script> 27 </head> 28 <body> 29 <div></div> 30 <div>我是一个div</div> 31 <div>div123</div> 32 <div><span></span></div> 33 <div><p></p></div> 34 </body> 35 </html>
属性和属性节点
6 <body> 7 <!-- 8 1.什么是属性 9 对象身上保存的变量就是属性 10 p.name = "coco"; 11 12 2.如何操作属性 13 对象.属性名称 = 值； 14 对象.属性名称； 15 对象["属性名称"] = 值； 16 对象["属性名称"]； 17 18 3.属性节点 19 <span name = "itit"></span> 20 在编写HTML代码时，在HTML标签中添加的属性就是属性节点。 21 在浏览器中找到span这个DOM元素之后，展开看到的都是属性在attribute属性中保持的所有内容都是属性节点 22 23 4.如何操作属性节点 24 var span = document.getElementsByTagName("span")[0]; 25 //设置属性节点的值 26 span.setAttribute("name","coco"); 27 //获取属性节点的值 28 console.log(span.getAttribute("name")); 29 -DOM元素.setAttribute("属性名称","值")； 30 -DOM元素.getAttribute("属性名称"); 31 32 5.属性和属性节点有什么区别 33 任何对象都有属性，但是只有DOM对象才有属性节点 34 --> 35 </body>
