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()方法接收一个函数作为参数。