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(){}910 //2.给这个类添加一个静态方法11 //直接添加给类的就是静态方法12 AClass.staticMethod = function(){13 alert("staticMethod");14 }15 //静态方法通过类名调用16 AClass.staticMethod();1718 //3.给这个添加一个实例方法19 AClass.prototype.instanceMethod = function(){20 alert("instanceMethod");21 }22 //实例方法通过类的实例调用23 //创建一个实例（创建一个对象24 var a = new AClass();25 //通过实例调用实例方法26 a.instanceMethod();272829 </script>30 </head>31 <body>3233 </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>67 <script type="text/javascript">8 var arr = [1,2,3,4,5];9 //伪数组10 var obj = { length: 2, 0: 'a', 1: 'b' };1112 /*JS13 第一个参数：遍历到的元素14 第二个参数：当前遍历到的索引15 注意点：16 原生的forEach方法只能遍历数组，不能遍历伪数组17 */1819 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 */2728 /*JQ29 第一个参数：当前遍历到的索引30 第二个参数：遍历到的元素31 注意点：3233 */3435 //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>4647 </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' };1112 /*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 */2728 /*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;4344 });45 var res3 = $.each(arr,function(index,value){46 console.log(index,value);47 return index+value;48 });//each方法返回的就是数组，函数里对数组有什么操作都不会影响到返回值4950 /*51 JQ中的each静态方法和map静态方法的区别：52 each静态方法默认的返回值就是，遍历谁就返回谁53 map静态方法默认的返回值是一个空数组5455 each静态方法不支持在回调函数中对遍历的数组进行处理56 map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回57 */5859 console.log(res1);60 console.log(res2);61 console.log(res3);6263 </script>64 <body>6566 </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 false26 */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();3233 var res1 = $.isWindow(arr);34 console.log(res1);//false3536 var res2 = $.isWindow(arrLike);37 console.log(res2);//false3839 var res3 = $.isWindow(obj);40 console.log(res3);//false4142 var res4 = $.isWindow(fun);43 console.log(res4);//false4445 var res5 = $.isWindow(win);46 console.log(res5);//true474849 </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>151617 <button>回复ready事件</button>1819 <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 //:empty8 //作用：找到既没有文本内容也没有子元素的指定元素9 var $div = $('div:empty');10 console.log($div);1112 //:parent13 //作用：找到有文本内容或有子元素的指定元素14 var $div2 = $('div:parent');15 console.log($div2);1617 //:contains(text)18 //作用：找到包含指定文本内容的指定元素19 var $div3 = $("div:contains('我是一个div')");20 console.log($div3);2122 //: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";1112 2.如何操作属性13 对象.属性名称 = 值；14 对象.属性名称；15 对象["属性名称"] = 值；16 对象["属性名称"]；1718 3.属性节点19 <span name = "itit"></span>20 在编写HTML代码时，在HTML标签中添加的属性就是属性节点。21 在浏览器中找到span这个DOM元素之后，展开看到的都是属性在attribute属性中保持的所有内容都是属性节点2223 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("属性名称");3132 5.属性和属性节点有什么区别33 任何对象都有属性，但是只有DOM对象才有属性节点34 -->35 </body>
转载于
//www.cnblogs.com/lijingjaj/p/11212496.html
ゝ一纸荒年。
深藏阁楼爱情的钟
朱雀
向右看齐
还没有评论，来说两句吧...