jQuery技术

浅析jQuery整体框架与实现(上)(3)

字号+ 作者:H5之家 来源:H5之家 2016-09-03 12:00 我要评论( )

属性selector用于记录jQuery查找和过滤DOM元素时的选择器表达式。 属性.length表示当前jquery对象中元素的个数。 方法.size()返回当前jquery对象中元素的个数,功能上等同于属性length,但应该优先使用length,因为

属性selector用于记录jQuery查找和过滤DOM元素时的选择器表达式。
属性.length表示当前jquery对象中元素的个数。
方法.size()返回当前jquery对象中元素的个数,功能上等同于属性length,但应该优先使用length,因为他没有函数调用开销。

.size()源码如下:

size():function(){ return this.length; }

方法.toArray()将当前jQuery对象转换为真正的数组,转换后的数组包含了所有元素,其源码如下:

toArray: function() { return slice.call( this ); },

方法.get(index)返回当前jQuery对象中指定位置的元素,或包含了全部元素的数组。其源
码如下:

get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this[ this.length + num ] : this[ num ] ); },

如果没有传入参数,则调用.toArray()返回了包含有锁元素的数组;如果指定了参数index,则返回一个单独的元素,index从0开始计数,并且支持负数。

首先会判断num是否小于0,如果小于0,则用length+num重新计算下标,然后使用数组访问操作符([])获取指定位置的元素,这是支持下标为负数的一个小技巧;如果大于等于0,直接返回指定位置的元素。

eg()和get()使用详解:

方法用于遍历当前jQuery对象,并在每个元素上执行回调函数。方法.each()内部通过简单的调用静态方法jQuery.each()实现:

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

回调函数是在当前元素为上下文的语境中触发的,即关键字this总是指向当前元素,在回调函数中return false 可以终止遍历。

方法遍历当前jQuery对象,在每个元素上执行回调函数,并将回调函数的返回值放入一个新jQuery对象中。该方法常用于获取或设置DOM元素集合的值。

map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); },

原型方法.pushStack()创建一个新的空jQuery对象,然后把DOM元素集合放入这个jQuery对象中,并保留对当前jQuery对象的引用。

原型方法.pushStack()是核心方法之一,它为以下方法提供支持:

jQuery对象遍历:.eq()、.first()、.last()、.slice()、.map()。 DOM查找、过滤:.find()、.not()、.filter()、.closest()、.add()、.andSelf()。 DOM遍历:.parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。 DOM插入:jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、.before()、.after()、.replaceWith()。

定义方法.push( elems, name, selector ),它接受3个参数:

参数elems:将放入新jQuery对象的元素数组(或类数组对象)。 参数name:产生元素数组elems的jQuery方法名。 参数selector:传给jQuery方法的参数,用于修正原型属性.selector。

方法结束当前链条中最近的筛选操作,并将匹配元素还原为之前的状态

end: function() { return this.prevObject || this.constructor(null); },

返回前一个jQuery对象,如果属性prevObect不存在,则构建一个空的jQuery对象返回。方法.pushStack()用于入栈,方法.end()用于出栈

静态属性和方法

相关源码如下:

388 jQuery.extend({ 389 noConflict: function( deep ) {}, 402 isReady: false, 406 readyWait: 1, 409 holdReady: function( hold ) {}, 418 ready: function( wait ) {}, 444 bindReady: function() {}, 492 isFunction: function( obj ) {}, 496 isArray: Array.isArray || function( obj ) {}, 501 isWindow: function( obj ) {}, 505 isNumeric: function( obj ) {}, 509 type: function( obj ) {}, 515 isPlainObject: function( obj ) {}, 544 isEmptyObject: function( obj ) {}, 551 error: function( msg ) {}, 555 parseJSON: function( data ) {}, 581 parseXML: function( data ) {}, 601 noop: function() {}, 606 globalEval: function( data ) {}, 619 camelCase: function( string ) {}, 623 nodeName: function( elem, name ) {}, 628 each: function( object, callback, args ) {}, 669 trim: trim ? function( text ) {} : function( text ) {}, 684 makeArray: function( array, results ) {}, 702 inArray: function( elem, array, i ) {}, 724 merge: function( first, second ) {}, 744 grep: function( elems, callback, inv ) {}, 761 map: function( elems, callback, arg ) {}, 794 guid: 1, 798 proxy: function( fn, context ) {}, 825 access: function( elems, key, value, exec, fn, pass ) {}, 852 now: function() {}, 858 uaMatch: function( ua ) {}, 870 sub: function() {}, 891 browser: {} 892 });

方法jQuery.noConflict([removeAll])用于释放jQuery对全局变量$的控制权,可选参数removeAll指示是否释放对全局变量jQuery的控制权。
在使用jQuery的同时,如果需要使用另一个javascript库,可以调用$.noConflict()返回$给其他库

方法jQuery.isFunction(obj)用于判断传入的参数是否是函数;
方法jQuery.isArray(obj)用于判断传入的参数是否是数组。

这两个方法的实现依赖于jQuer.type(obj),通过判断jQuery.type(obj)返回值是否是function和array来实现
相关源码如下:

492 isFunction : function(obj){ 493 return jQuery.type(obj) === "function"; 494 }, 495 496 isArray: Array.isArray || function(obj){ 497 return jQuery.type(obj) === "array"; 498 },

方法jQuery.type(obj)用于判断参数的内建JavaScript类型。如果参数是undefined 或 null ,返回 undefined 或 null;如果参数是JavaScript内部对象,则返回对象
的字符串名称;其他情况一律返回object,相关源码如下:

509 type :function(obj){ 510 return obj == null ? 511 String( obj ) : 512 class2type[toString.call(obj)] || "object"; 513 },

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
h