这一节主要是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()来调用