jQuery的基础总结

Posted 2022-09-26 bobozz

**本篇只列出零碎的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);//控制台输出each方法的返回值

    

    

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();