jQuery的基础总结
**本篇只列出零碎的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遍历数组的区别
-
jQuery与JS都可以通过
each和map来遍历数组。 -
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){//遍历数组arrconsole.log(index ,value);})arw.forEach(function(value ,index){//遍历伪数组arwconsole.log(index ,value);})JS的
forEach方法无法遍历伪数组。jQuery代码：
xxxxxxxxxx//jQuery的each方法中先是index后是value//第一个参数（arr/arw）：遍历的数组//第二个参数：每遍历一个元素之后执行的回调函数$.each(arr ,function(index ,value){//遍历数组arrconsole.log(index ,value);})$.each(arw ,function(index ,value){//遍历伪数组arwconsole.log(index ,value);})jQuery的
each方法可以遍历伪数组。需要注意的是jQuery对象本质就是伪数组。
3.jQuery符号冲突问题
-
通过释放$的使用权解决符号冲突。
xxxxxxxxxxjQuery.noConflict();//释放jQuery对$符号的使用权jQuery(function(){//释放之后就不能再使用$符号，改用jQueryalert("heihei");}) -
通过自定义jQuery的符号来解决符号冲突。
xxxxxxxxxxvar 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方法的区别
-
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：xxxxxxxxxxvar $ar = $.each(arr ,function(index ,value){})//将遍历的数组赋给jQuery对象console.log($ar);//控制台输出each方法的返回值map：xxxxxxxxxxvar $am = $.map(arr ,function(index ,value){})//将遍历的数组赋给jQuery对象console.log($am);//控制台输出map方法的返回值 -
each静态方法无法在回调函数中对数组进行处理；map静态方法可以在回调函数中通过return对数组进行处理。each：xxxxxxxxxxvar $ar = $.each(arr ,function(index ,value){//将遍历的数组赋给jQuery对象return index+value;})console.log($ar);//控制台输出each方法的返回值map：xxxxxxxxxxvar $am = $.map(arr ,function(index ,value){//将遍历的数组赋给jQuery对象return index+value;})console.log($am);//控制台输出each方法的返回值使用
map处理的数组返回值由空数组变为index与value相加的和所得到的数组。
6.jQuery各种静态方法的使用
-
trim()：去除字符串两端的空格
xxxxxxxxxxvar str = " hello ";var $re = $.trim(str); -
isArray()：判断传入的对象是否为真数组（伪数组不算在内），返回值为true/falsexxxxxxxxxxvar str = [1,3,5];var re = $.isArray(str); -
isFunction()：判断传入的对象是否为函数，返回值为true/false注意：jQuery框架本质是一个函数
xxxxxxxxxxvar sj = $.isFunction(jQuery);console.log(sj); -
isWindow()：判断传入的对象是否为window对象，返回值为true/falsexxxxxxxxxxvar ww = $.isWindow(w);console.log(ww);
7.定义并调用静态方法和实例方法
-
静态方法
xxxxxxxxxx//定义一个类function oTest(){}//给oTest添加静态方法oTest.staticMethod = function(){alert("staticMethod");}//通过类名调用oTest.staticMethod(); -
实例方法
xxxxxxxxxx//定义又一个类function tTest(){}//给tTest添加实例方法tTest.prototype.instanceMethod = function(){alert("instanceMethod");}//创建实例var t = new tTest();//通过实例调用实例方法t.instanceMethod();
