jQuery 源码解析(三) pushStack方法 详解
程序员文章站
2023-08-23 10:23:58
该函数用于创建一个新的jQuery对象，然后将一个DOM元素集合加入到jQuery栈中，最后返回该jQuery对象，有三个参数，如下: elems Array类型 将要压入 jQuery 栈的数组元素，用于生成一个新的 jQuery 对象 name 可选。 String类型 生成数组元素的 jQue ......
该函数用于创建一个新的jquery对象，然后将一个dom元素集合加入到jquery栈中，最后返回该jquery对象，有三个参数，如下:
elems array类型 将要压入 jquery 栈的数组元素，用于生成一个新的 jquery 对象
name 可选。 string类型 生成数组元素的 jquery 方法名
selector 可选。 array类型 传递给 query 方法的参数(用于序列化)
参数2和参数3可选的，用于设置返回的新的jquery对象的selector属性
调用pushstack后之前的jquery对象内的dom引用是不会消失的，还保存到新的对象的prevobject里，我们可以通过end()来获取之前的jquery对象，例如:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p id="p1">今天天气很好</p><p id="p2">是吗</p>
<button id="b1">get news</button><button id="b2">get olds</button>
<script>
var a = $('p1');
b1.onclick=function(){
a=a.pushstack([p2],'test','arg');
console.log(a);
}
b2.onclick=function(){
a=a.prevobject;
console.log(a)
}
console.log(a); //初始化时a.selector="p1"
</script>
</body>
</html>
渲染如下:
初始化时输出如下:
a保存的是p1这个dom节点，然后点击get news,输出如下:
此时a中保存的p2这个dom节点了，然后再点击get olds，输出如下:
又回到初始化的状态了
源码分析
writer by:大沙漠 qq:22969969
pushstack定义在内部的jquery.fn上，如下:
jquery.fn = jquery.prototype = {
/**/
pushstack: function( elems, name, selector ) { //创建一个新的空jquery对象，然后把dom元素集合放入这个jquery对象中，并保留对当前jquery对象的引用，该方法它为很多方法提供了支持。
// build a new jquery matched element set
var ret = this.constructor(); //构造一个新的空jquery对象ret
if ( jquery.isarray( elems ) ) { //如果参数elems是数组，则借用数组方法push()插入
push.apply( ret, elems );
} else {
jquery.merge( ret, elems ); //否则调用方法jquery.merge( first, second ) 合并。
}
// add the old object onto the stack (as a reference)
ret.prevobject = this; //在新query对象ret上设置属性prevobject，指向当前jquery对象，从而形成一个链式栈
ret.context = this.context;
if ( name === "find" ) {
ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
} else if ( name ) {
ret.selector = this.selector + "." + name + "(" + selector + ")"; //将name和selector保存到生成的jquery对象的selector属性里，比如:.appendto(p)
}
// return the newly-formed element set
return ret; //最后返回ret这个新的jquery对象
},
/**/
};
就是内部创建创建一个新的jquery对象并返回，通过prevobject属性来建立和之前的jquery对象的链接而已。
上一篇： JS、JQ中判断checkbox是否选中
推荐阅读