jquery核心基础
jquery对对象的操作:
检查对象类型:
老式的javascript使用typeOf()操作符,但他是不符合逻辑的,在某些情况下,typeOf()返回的不是一个正确的值,或者返回一个出乎意料的值,如:typeOf(null),它返回object或不是null。
所以jquery提供了一个自定义的.type()方法:
$.type(null);//返回null
$.type([]);//返回array
.isEmptyObject()方法:
.isEmptyObject()方法用于检查一个对象是否包含任何属性,包括继承的属性,它与对象的类型无关:
$.isEmptyObject("");//返回true
$.isEmptyObject([]);//返回true
var mailman={};
mailman.letters=100;
$.isEmptyObject(mailman);//返回false
与之类似的是.isPlainObject()方法:
.isPlainObject()方法。它用于检测一个对象是否包含任何属性,但它检测的必须是object实例。因此对于该函数,对于空字符检测将返回false。
$.isPlainObject("");//返回false
$.isPalinObject({});//返回true
$.isPalinObject(new obj);//返回true
.extend()方法:
extend()方法可以用来合并两个或两个以上的对象。值得注意的是,.extend()方法的功能是将一个或多个对象的属性合并到一个目标对象中。在下面的例子中,obj1将获得obj2、obj3的属性:
var obj1={"1":"property 1"};
var obj2={"2":"property 2"};
var obj3={"3":"property 3"};
$.extend(obj1,obj2,obj3);
alert(obj1["3"]);//显示“3”值的属性
关于.extend()方法,有趣的是,可以用它来克隆javascript对象(这与$.clone()方法不同):
var cloneObj=$.extend({},anObj);
.extend()还可以接收一个布尔值作为第一个参数,对以执行对象的深度合并,即递归复制。可以使用该方法来实现对象的深度克隆:
var cloneObject=$.extend(true,{},Object;);
-函数操作:
jquery()有两个用于函数的工具的方法:isFunction()和.noop()。
顾名思义,isFunction()方法时检查对象是否是一个函数。在使用.isFunction()方法时,请确保去掉函数名的圆括号。
在下面的列子中,将.isFunction()函数作为参数传入.isFunction()函数自身。由于它是一个函数,因此返回值必然是true。
var fn1=$.isFunction({});//返回false
var fn2=$.isFunction($.isFunction);//返回true
var fn3=$.isFunction($.isFunction());//返回false,由于圆括号。
alert(fn1+"-"+fn2+"-"+fn3);
.noop()方法时一个存根函数(stub function),它并不执行任何操作。但在某些情况下它是非常有用的,比如我们想把一个空函数作为参数传递时,以便安装一个在默认情况下不进行任何操作的新事件。
-数组操作:
与.isObject()方法和.isFunction()方法类似,对于数组也有一个.isArray()。除了检查对象是否是一个数组之外,还可以使用.makeArray()方法将一个类似数组的对象转换为一个真正的数组,但将类似于数组的对象转换为数组,会丢失原对象的所有方法和属性。
var cloned=$.extend(true,{},$);
var type1=$.type(cloned);
alert(type1);//返回Object
var arr=$.makeArray(type1);
var type2=$.type(arr);//返回array
alert(type2);
另外一种用于合并数组的方法,.merge()方法。它从第2个数组中获取元素,并将这些元素追加到第一个数组中,并保留两个数组中的原有顺序:
var arr1=["ddf","ppp","vvv"];
var arr2=[121,323,434];
var arrAll=$.merge(arr1,arr2);
alert(arrAll);//ddf,ppp,vvv,121,323,434
.inArray()方法用于检测数组中是否存在某个特定的值,如果找到则返回该值在数组中的索引,如果不存在则返回-1。
.unique()方法的功能是从DOM元素的数组中移除重复的元素:
【
<p></p><p></p>
<p class="dicp"></p>
<p class="dicp"></p>
<p class="dicp"></p>
】
var ptage=$("p");
alert(ptage.length);//返回5
ptage=$.makeArray(ptage);//将其转换为一个数组
var ptg=$.makeArray($(".dicp"));
ptage=ptage.concat(ptg);//将ptg数组连接到ptage数组中
alert(ptage.length);//返回8
ptage=$.unique(ptage);//去除ptg中重复元素
alert(ptage.length);//返回5
var index=$.inArray("6",ptage);
alert(index);//返回-1
遍历数组:for循环遍历,这是旧式的循环语句,jquery提供了.each()方法,可以替代旧式的for循环。
.each()方法可以用于遍历对象以及类似数组的对象和数组,该方法的索引是基于0的,它接收两个参数:第一参数是遍历的结合,第二参数是回调函数。
该回调函数接收两个参数:第一个参数是当前遍历元素在集合中的索引,第二个参数是该元素的值。看下面演示:
var arry=[111,222,333,444,555];
$.each(arry,function(index,value){
value=value*2;
alert("index is:"+index+"--new value is:"+value);
})
.map()方法与.each()方法类似,接收两个参数:第一参数是数组对象,第二参数是回调函数。该回调函数是“对每一个元素项进行处理的函数”,该回调函数接收两个参数,第一参数是当前元素的值,第二个元素是当前元素在数组中的索引。
var array=[2322323,445445,65665,76];
alert(array);
var newarr=$.map(array,function(value,index){
return Math.sqrt(value).toFixed(4);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
})
alert(newarr);
数据结构:
队列是一直先进先出的数据结构,队列总是将元素添加到队列的尾部,移除元素时总是从队列的头部开始。在jq中使用$.queue()来维护一个函数的队列。默认的函数队列是fx,他是一个具有标准功能的队列。在fx的上下文中,队列的功能是显而易见的。
$("#anmate").sildeUp().fadeIn();//简单的动画队列
$.queue队列支持push和pop操作。要从队列中移除所有函数,可以使用.clearQueue()方法。使用.dequeue()方法可以从队列中移除一个函数,并执行它。
$("#anmate").show("slow");
$("#anmate").queue(function(){
$(this).animate({"width":"+=400"},1000);
$(this).dequeue();//从列队中弹出一个函数并执行它
})
字符串:
js中包含了一种强大的机制,可以通过正则表达式来处理字符串,但js中内置的String对象并不包含.trim()方法,在下列代码中,.trim()方法用于移除字符串首尾的空格。
var par1=" 欢迎来到我们伟大的国度 ";
var par2=" -中国 ";
var par=par1+par2;
alert(par);
var pars=$.trim(par1)+$.trim(par2);
alert(pars);
数据:ajax(后章节讲)
其他有用的工具方法:
.contains()方法用于检查一个DOM节点是不是另外一个节点的子节点,该方法接收两个参数,第一个参数是容器节点,第二个参数是要检查的目标节点,由于jq包装器返回的是一个类似于数组的对象,因此要引用实际的元素,使用索引值来引用。
$.contains($("head")[0],$("title")[0]);//返回true
.isWindow()方法用于判断当前窗口是否window窗口,如在使用iframe的情形下,在某个操作中,我们可能要区分iframe和浏览器的窗口,就可以用.isWindow()方法实现此功能。
【<iframe src="" id="frame"></iframe>】
var frmWindow=$("#frame")[0];
$.isWindow(frmWindow);//返回false
$.isWindow(window);//返回true
$.now()用于获取当前时间,他是(new Date).getTime()方法的一个快捷方式,显然使用$.now()非常简洁
.support()是jq检测浏览器特性(浏览器所支持的特性)的方法,用于取代jq低版本中的$.browser()方法。
一个很好的例子是:if($.support.ajax){},
他可以检测浏览器是否支持Ajax请求(亦称为创建XMLHttpRequest对象)
.globalEval()方法:
//在所有的DOM加载完成之后,创建一个变量x并把它的值初始化为0
$(function(){
eval("var x=0;");
})
eval()方法执行的“上下文”并不是全局,而是局部。有时我们希望把求值的语句放在全局的“上下文”中,例如加载一个外部javascript文件时,我们就要用到.globalEval():
//在全局“上下文”中创建变量
$(function(){
globalEval("var x=0;");
})
.ready()方法用于注册处理程序,一旦问道的所有DOM元素加载完毕,就执行该处理程序代码,不必等待页面所有元素(图片flash等)加载完毕。.ready()方法接收一个函数作为参数。