jQuery的基礎總結

来源:https://www.cnblogs.com/bobozz/archive/2019/09/03/11450779.html
-Advertisement-
Play Games

**本篇只列出零碎的jQuery基礎知識點，個人記錄自己的學習進度，無序排列，謹慎查看。** 1.jQuery入口函數的四種寫法2.jQuery與JS遍曆數組的區別3.jQuery符號衝突問題4.jQuery與JS的map遍歷方法5.each方法和map方法的區別6.jQuery各種靜態方法的使用7 ...


**本篇只列出零碎的jQuery基礎知識點，個人記錄自己的學習進度，無序排列，謹慎查看。**

1.jQuery入口函數的四種寫法2.jQuery與JS遍曆數組的區別3.jQuery符號衝突問題4.jQuery與JS的map遍歷方法5.each方法和map方法的區別6.jQuery各種靜態方法的使用7.定義並調用靜態方法和實例方法

1.jQuery入口函數的四種寫法

      
xxxxxxxxxx
        
//第一種寫法
$(function(){
    alert("hello world");
})
//第二種寫法
jQuery(function(){
    alert("hello");
})
//第三種寫法
$(document).ready(function(){
    alert("heihei");
})
//第四種寫法
jQuery(document).ready(function(){
    alert("world");
})
   

四種寫法都能彈出視窗內容。

2.jQuery與JS遍曆數組的區別

  1. jQuery與JS都可以通過each和map來遍曆數組。

  2. jQuery可以遍歷偽數組，但JS不能。

    註：以each方法舉例。

          
    xxxxxxxxxx
            
    //定義一個數組，一個偽數組
     var arr = [1 ,3 ,5 ,7 ,9];//定義一個數組
     var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定義一個偽數組
       
    JS代碼：
          
    xxxxxxxxxx
            
     //forEach方法中先是value後是index
     //value:數組中的元素；
     //index:數組中元素遍歷的位置
     arr.forEach(function(value ,index){//遍曆數組arr
        console.log(index ,value);
     })
     arw.forEach(function(value ,index){//遍歷偽數組arw
        console.log(index ,value);
     })
     
    JS的forEach方法無法遍歷偽數組。
    jQuery代碼：
          
    xxxxxxxxxx
            
     //jQuery的each方法中先是index後是value
     //第一個參數（arr/arw）：遍歷的數組
     //第二個參數：每遍歷一個元素之後執行的回調函數
     $.each(arr ,function(index ,value){//遍曆數組arr
        console.log(index ,value);
     })
     $.each(arw ,function(index ,value){//遍歷偽數組arw
         console.log(index ,value);
     })
     
    jQuery的each方法可以遍歷偽數組。需要註意的是jQuery對象本質就是偽數組。

3.jQuery符號衝突問題

  1. 通過釋放$的使用權解決符號衝突。

          
    xxxxxxxxxx
            
    jQuery.noConflict();//釋放jQuery對$符號的使用權
    jQuery(function(){//釋放之後就不能再使用$符號，改用jQuery
    alert("heihei");
    })
       

  2. 通過自定義jQuery的符號來解決符號衝突。

          
    xxxxxxxxxx
            
    var ff = jQuery.noConflict();//自定義jQuery符號
    ff(function(){
        alert("heihei");
    })
       

    註意：在釋放符號使用權或者自定義符號時，釋放語句一定要寫在其他jQuery語句前面。

4.jQuery與JS的map遍歷方法

      
xxxxxxxxxx
        
//定義一個數組，一個偽數組
 var arr = [1 ,3 ,5 ,7 ,9];//定義一個數組
 var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定義一個偽數組
   

JS代碼（無法遍歷偽數組）：

      
xxxxxxxxxx
        
//value:數組中的元素
//index:數組中元素遍歷的位置
//array:當前被遍歷的數組
arr.map(function(value ,index ,array){
   console.log(index ,value ,array);
})
   

jQuery代碼：

      
xxxxxxxxxx
        
 //第一個參數（arr/arw）：遍歷的數組
 //第二個參數：每遍歷一個元素之後執行的回調函數
 $.map(arr ,function(index ,value){//遍曆數組arr
     console.log(index ,value);
 })
 $.map(arw ,function(index ,value){//遍歷偽數組arw
     console.log(index ,value);
 })
   

5.each方法和map方法的區別

  1. each靜態方法預設返回的是遍歷的數組；

    map靜態方法預設返回的是一個空數組。

          
    xxxxxxxxxx
            
    //定義一個數組，一個偽數組
     var arr = [1 ,3 ,5 ,7 ,9];//定義一個數組
     var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定義一個偽數組
       
    each：
          
    xxxxxxxxxx
            
     var $ar = $.each(arr ,function(index ,value){})//將遍歷的數組賦給jQuery對象
     console.log($ar);//控制台輸出each方法的返回值
       
    map：
          
    xxxxxxxxxx
            
    var $am = $.map(arr ,function(index ,value){})//將遍歷的數組賦給jQuery對象    
     console.log($am);//控制台輸出map方法的返回值
     

     

  2. each靜態方法無法在回調函數中對數組進行處理；

    map靜態方法可以在回調函數中通過return對數組進行處理。

    each：
          
    xxxxxxxxxx
            
    var $ar = $.each(arr ,function(index ,value){//將遍歷的數組賦給jQuery對象
        return index+value;
    })
     console.log($ar);//控制台輸出each方法的返回值
       
    map：
          
    xxxxxxxxxx
            
    var $am = $.map(arr ,function(index ,value){//將遍歷的數組賦給jQuery對象
        return index+value;
    })    
     console.log($am);//控制台輸出each方法的返回值
     
    使用map處理的數組返回值由空數組變為index與value相加的和所得到的數組。

6.jQuery各種靜態方法的使用

  1. trim()：去除字元串兩端的空格

          
    xxxxxxxxxx
            
    var str = "   hello   ";
     var $re = $.trim(str);
       

  2. isArray()：判斷傳入的對象是否為真數組（偽數組不算在內），返回值為true/false

          
    xxxxxxxxxx
            
     var str = [1,3,5];
     var re = $.isArray(str);
       

  3. isFunction()：判斷傳入的對象是否為函數，返回值為true/false

    註意：jQuery框架本質是一個函數
          
    xxxxxxxxxx
            
     var sj = $.isFunction(jQuery);
     console.log(sj);
       

  4. isWindow()：判斷傳入的對象是否為window對象，返回值為true/false

          
    xxxxxxxxxx
            
     var ww = $.isWindow(w);
     console.log(ww);
       

7.定義並調用靜態方法和實例方法

  1. 靜態方法

          
    xxxxxxxxxx
            
     //定義一個類
     function oTest(){
     }
     //給oTest添加靜態方法
     oTest.staticMethod = function(){
         alert("staticMethod");
     }
     //通過類名調用
     oTest.staticMethod();
       

  2. 實例方法

          
    xxxxxxxxxx
            
    //定義又一個類
    function tTest(){
    }
    //給tTest添加實例方法
    tTest.prototype.instanceMethod = function(){
        alert("instanceMethod");
    }
    //創建實例
    var t = new tTest();
    //通過實例調用實例方法
    t.instanceMethod();