jQuery的基础总结

**本篇只列出零碎的jquery基础知识点，个人记录自己的学习进度，无序排列，谨慎查看。**

1.jquery入口函数的四种写法2.jquery与js遍历数组的区别3.jquery符号冲突问题4.jquery与js的map遍历方法6.jquery各种静态方法的使用

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