Jquery是如何组织element的

out_lier 发布于 2014/04/02 19:59
阅读 515
收藏 1
Jquery中比如$(".class")会获取到很多个页面上的元素,它是如何组织这些元素的?数组吗?
加载中
0
NealFeng
NealFeng


当作Object中的元素,比如{0:Element, 1:Element...}, 可以运行下面这段代码查看:

var ps = $("p");
console.log(typeof ps);
console.log("--------");
for(var item in ps) {
	console.log(item+" "+(typeof ps[item])+" "+ps[item]);
}



部分输出结果:

object
--------
0 object [object HTMLParagraphElement]
1 object [object HTMLParagraphElement]
2 object [object HTMLParagraphElement]
3 object [object HTMLParagraphElement]
4 object [object HTMLParagraphElement]
length number 5
prevObject object [object Object]
context object [object HTMLDocument]
selector string p
jquery string 1.11.0
constructor function function (a,b){return new n.fn.init(a,b)}
toArray function function (){return d.call(this)}
get function function (a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)}
pushStack function function (a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b}
each function function (a,b){return n.each(this,a,b)}
map function function (a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))}
slice function function (){return this.pushStack(d.apply(this,arguments))}
first function function (){return this.eq(0)}
last function function (){return this.eq(-1)}
eq function function (a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])}
end function function (){return this.prevObject||this.constructor(null)}
push function function push() { [native code] }
sort function function sort() { [native code] }
splice function function splice() { [native code] }
extend function function (){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(n.isPlainObject(c)||(b=n.isArray(c)))?(b?(b=!1,f=a&&n.isArray(a)?a:[]):f=a&&n.isPlainObject(a)?a:{},g[d]=n.extend(j,f,c)):void 0!==c&&(g[d]=c));return g}
find function function (a){var b,c=[],d=this,e=d.length;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;e>b;b++)if(n.contains(d[b],this))return!0}));for(b=0;e>b;b++)n.find(a,d[b],c);return c=this.pushStack(e>1?n.unique(c):c),c.selector=this.selector?this.selector+" "+a:a,c}
filter function function (a){return this.pushStack(x(this,a||[],!1))}
not function function (a){return this.pushStack(x(this,a||[],!0))}
is function function (a){return!!x(this,"string"==typeof a&&u.test(a)?n(a):a||[],!1).length}
init function function (a,b){var c,d;if(!a)return this;if("string"==typeof a){if(c="<"===a.charAt(0)&&">"===a.charAt(a.length-1)&&a.length>=3?[null,a,null]:A.exec(a),!c||!c[1]&&b)return!b||b.jquery?(b||y).find(a):this.constructor(b).find(a);if(c[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(c[1],b&&b.nodeType?b.ownerDocument||b:z,!0)),v.test(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this.attr(c,b[c]);return this}if(d=z.getElementById(c[2]),d&&d.parentNode){if(d.id!==c[2])return y.find(a);this.length=1,this[0]=d}return this.context=z,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof y.ready?y.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))}
has function function (a){var b,c=n(a,this),d=c.length;return this.filter(function(){for(b=0;d>b;b++)if(n.contains(this,c[b]))return!0})} 





0
con
con

类数组对象,类似function里面的arguments

$(".el-class") instanceof Array   // false

$(".el-class").length                 // DOM元素个数

0
赵亮-碧海情天
赵亮-碧海情天

这个问题差不多涉及jQuery的核心思想了。

你在使用jQuery时,应该很容易发现它使用的链式操作风格,也就是说“$(".class")”后面还可以带一或多个连串的操作,如:$(".class").css("增加某些样式").show();

如果$(".class")只返回单纯的数组的话,数组本身是没有那些方法的,所以jQuery的这个最大特点就无法实现了。

因此,jQuery对返回的元素集合是采用Object封装的,这样就可以通过事先定义的多种Object方法函数来实现简便的链式操作,即绝大多数(并非全部)方法都返回Object集合,然后再去调用Ojbect的其它方法。

0
开源中国最帅没有之一
开源中国最帅没有之一

是这样的

获取所有有这个类名的元素  [].push.call(this)

需要操作  比如 .css() 是时候遍历 this的length  执行css操作

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部