这一节主要是jQuery中最基础的几个东东

 

2.    jQuery的几个基础属性和函数

a. jQuery.noConflict函数详解

---

 

在jQuery初始化的时候保存了外部的$和jQuery

　　

_jQuery = window.jQuery,_$ = window.$,

noConflict函数

　　noConflict: function( deep ) {　　　　if ( window.$ === jQuery ) {     　　　　window.$ = _$;　　　　}　　　　if ( deep && window.jQuery === jQuery ) {　　　　　　window.jQuery = _jQuery;　　　　}　　　　return jQuery;　　}

调用noConflict将$甚至jQuery的使用权让渡出去。返回的jQuery保存为自定义的变量。如

　　var myJq = $.noConflict();

然后就可以将myJq当成jQuery来使用。

　　var ps = myJq("p");//得到所有p标签的元素集合。

　　

b. jQuery.extend = jQuery.fn.extend函数详解

---

 

用户再使用jQuery的时候可能需要对jQuery和jQuery.prototype(jQuery.fn/jQuery(...))进行拓展（添加属性或方法），这个时候使用到extend。

　　jQuery.extend = jQuery.fn.extend = function(){…}

jQuery.extend是对jQuery本身的拓展；jQuery.fn.extend是对jQuery.fn的拓展，也就是对jQuery.prototype的拓展，最终表现为对jQuery实例$(...)的拓展。

源码分析：源码比较简单，这里不做分析，不过在其中有一个技术点

在使用extend的时候要注意，根据js规则对象变量只有一份的原则，如果浅拷贝中某个属性是通过对象变量获取的值，如果在外部改变了该对象变量，那么拷贝结果也会随着改变。

eg:

　　var hd = {name: ‘hard’};　　var pc = {soft: ‘soft’,hdwe:hd};　　var tt = {td: ‘test’};　　var val = $.extend(tt,pc);// {td: "test", soft: "soft", hdwe: { name: ‘hard’}}　　hd.name = 'chenhua';　　//此时val的值为{td: "test", soft: "soft", hdwe: { name: ‘chenhua’ }}

 

c. jQuery.type函数用来识别对象类型

---

 

JavaScript也自带有一个typeof运算符，可以确定数据的类型。不过，对于绝大多数对象而言，typeof运算符都返回"object"，无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。　

　　class2type = {} ,　　core_toString = class2type.toString,　　　type: function( obj ) {               if ( obj == null ) {                      return String( obj );               }               return typeof obj === "object" || typeof obj === "function" ?               class2type[ core_toString.call(obj) ] || "object" :               typeof obj;        }　　　　jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {　　　　class2type[ "[object " + name + "]" ] = name.toLowerCase();　　});

代码core_toString.call(obj)使用对象的toString来处理obj得到JS内置对象的类型,得到的结果都是类似"[object Object]"、"[object Function]"、"[object Array]"等样式，最终得到JS内置对象的类型的完全小写形式。

jQuery.type( undefined ); // "undefined"jQuery.type( null ); // "null"jQuery.type( true ); // "boolean"jQuery.type( new Boolean(true) ); // "boolean"jQuery.type( 3 ); // "number"jQuery.type( new Number(3) ); // "number"jQuery.type( "test" ); // "string"jQuery.type( new String("test") ); // "string"jQuery.type( function(){} ); // "function"jQuery.type( new Function() ); // "function"jQuery.type( [] ); // "array"jQuery.type( new Array() ); // "array"jQuery.type( new Date() ); // "date"jQuery.type( new Error() ); // "error" // jQuery 1.9 新增支持jQuery.type( /test/ ); // "regexp"jQuery.type( new RegExp("\\d+") ); // "regexp"/* 除上述类型的对象外，其他对象一律返回"object" */jQuery.type( {} ); // "object"function User() { }jQuery.type( new User() ); // "object"

 

d. jQuery.function和jQuery.fn.function

---

 

有的函数是直接绑定到jQuery上的，这种方法只能使用jQuery.function()来调用。而又的方法是绑定到jQuery.fn上的，这种方法一般有两种调用方式jQuery.fn.function()或是jQuery(...).function。

根据jQuery初始化函数jQuery = function(selector,context){

  return new jQuery.fn.init(selector,context,rootjQuery);

}应该是易于理解的。jQuery(...)最终返回的上下文环境是jQuery.fn，所以绑定在jQuery.fn的函数最终都是可以通过jQuery(selector,context).function()来调用

e. jQuery.fn.get

---

 

//获取当前集合中某一个或是全部的元素get: function( num ) {       return num == null ?       // Return a 'clean' array       this.toArray() :　　// Return just the object        ( num < 0 ? this[ this.length + num ] : this[ num ] );},

需要注意的是，这里返回的是DOM节点对象，非jQuery对象,可不能再链式调用了。

 

f. jQuery.fn.each和jQuery.each

---

 

jQuery.fn.each(callback,args)是对jQuery集合挨个处理，最终调用的还是$.each(obj,callback,args),只不过obj被换成了jQuery匹配的集合。

$.each的obj可以是数组，也可以是对象。如果是数组则遍历数组，如果是对象则遍历对象自身的所有属性（包括函数）。如果$.each没有设置args参数，则遍历过程中调用callBack会将每一个元素的下标（数组是下标，对象是属性名）和值（数组是数组元素，对象是属性对应的值）传递给callBack；否则args会传递给callback（不过这个用的比较少）。

该函数规定为每个匹配元素执行的函数。源码如下

jquery.fn. each: function( callback, args ) {       return jQuery.each( this, callback, args );}

 

使用到了jQuery.each方法，源码如下

jQuery.each: function( obj, callback, args ) {       var value,              i = 0,              length = obj.length,              isArray = isArraylike( obj );       if ( args ) {
   //如果有参数args，代入callback中              if ( isArray ) {                     for ( ; i < length; i++ ) {                            value = callback.apply( obj[ i ], args );                            if ( value === false ) {                                   break;                            }                     }              } else {                     for ( i in obj ) {                            value = callback.apply( obj[ i ], args );                            if ( value === false ) {                                   break;                            }                     }              }       } else {
   // 比较通用的是该分支              if ( isArray ) {
   //遍历数组                     for ( ; i < length; i++ ) {                            value = callback.call( obj[ i ], i, obj[ i ] );　　　　　　　　　　if ( value === false ) {                                   break;                            }                     }              } else {                     for ( i in obj ) {
   //遍历对象                            value = callback.call( obj[ i ], i, obj[ i ] );　　　　　　　　　　　　　　　　if ( value === false ) {                                   break;                            }                     }              }       }　　return obj;}

 

　　如果觉得本文不错，请点击右下方【推荐】！