jQuery学习-day02

ゝ一纸荒年。 2021-11-14 13:42 331阅读 0赞

静态方法和实例方法

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>

![1487396-20190719105902784-1666750241.png][]

静态方法的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>

![1487396-20190719105931580-1295073440.png][]

静态的其他方法

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>

![1487396-20190719113603598-1394063334.png][]

静态方法的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元素了

![1487396-20190719114139292-1984319099.png][]

内容选择器

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>

![1487396-20190719200220295-96401757.png][]

属性和属性节点

6 <body>
     7 
    35 </body>

转载于:https://www.cnblogs.com/lijingjaj/p/11212496.html

[1487396-20190719105902784-1666750241.png]: /images/20211114/004ee0be63884435a0054bca409ad6e9.png
[1487396-20190719105931580-1295073440.png]: /images/20211114/90035b07b28140acad39412ad20dd9a9.png
[1487396-20190719113603598-1394063334.png]: /images/20211114/3a4b8e209c854b2289f8c84d86011f08.png
[1487396-20190719114139292-1984319099.png]: /images/20211114/71974bbd2dd74f6dbdf74a4bb5eaaf4e.png
[1487396-20190719200220295-96401757.png]: /images/20211114/168f61d493d444ea90d73b7e203abfdc.png