JQuery模块分析及其实现第四部分属性部分功能及实现,接第三部分!
dom
元素上.<target对象>.appendTo(target)
appendTo
方法,声明一个形参 target
.追加到目标 dom
元素dom
元素dom
数组target
类型统一为 itcast
对象,去 itcast
函数走一圈,出来就是 itcast
对象.this
上的每一个 dom
元素,再遍历 target
上的每一个 dom
元素this
上的 dom
元素追加到 target
上dom
元素,不需要拷贝节点;否则要深拷贝节点,并将上述得到的节点储存到 ret
内ret
数组转换成 itcast
对象,作为 appendTo
方法的返回值appendTo: function(target) {
var node,
ret = [];
// 统一target类型 为itcast对象(为了方便操作)
target = itcast(target);
// 遍历this上的每一个dom元素
this.each(function(v) {
// 在遍历目标dom元素
target.each(function(t, i) {
// 如果当前dom元素为 目标上的第一个.不拷贝节点
// 否则拷贝节点
node = i === 0 ? v : v.cloneNode(true);
// 将被追加的节点,添加到ret内
ret.push(node);
// 将节点追加到指定的目标dom元素上.
t.appendChild(node);
});
});
// 将每一个添加的dom元素,转换成itcast对象返回,实现链式编程
// 原因:在添加样式时,如果不这样做的话,只会给没克隆的节点添加样式.
return itcast(ret);
}
<itcast对象>.append(source)
;source
上的所有 dom
元素,追加到 itcast
对象上source
类型,为 itcast
对象.source.appendTo(this)
return this;
append: function(source) {
//统一source类型,为itcast对象
source = itcast(source);
source.appendTo(this);
return this;
},
<itcast对象>.prependTo(target);
itcast
对象上的每一个 dom
元素,追加到 target
最前边 insertBefore
target
类型,为 itcast
对象node
变量,临时存储被追加的结点.定义 ret
数组,存储所有被追加的节点target
上的每一个 dom
元素firstChild
,临时存储当前目标 dom
元素的第一个子节点,再遍历 this
上的每一个 dom
元素dom
是否为 target
上的第一个 dom
元素push
到 ret
内insertBefore
方法追加节点,此时第一个参数为追加新的节点,第二个参数为 firstChild
,在 firstChild
之前追加新节点.ret
转换成 itcast
对象,作为 prependTo
方法的返回值,实现链式编程.prependTo: function(target) {
//定义变量node,临时存储被追加的节点
var node,
//定义变量firstChild,临时存储当前dom元素的第一个子节点
firstChild,
self = this,
//定义ret数组,存储所有被追加的节点
ret = [];
//统一类型为itcast对象
target = itcast(target);
//遍历target上的每一个dom元素
target.each(function(elem, i) {
// 缓存当前目标dom元素的第一个子节点
firstChild = elem.firstChild;
//遍历this上的每一个dom元素
self.each(function(dom) {
//判断当前遍历的dom是否为target上的每一个dom元素
//若为真,则不需要克隆节点,否则,要深克隆节点
// 将得到的节点赋值给node
node = i === 0 ? dom : dom.cloneNode(true);
//将节点push到ret内
ret.push(node);
//调用insertBefore方法,追加节点(追加的新节点,firstChild)
elem.insertBefore(node, firstChild);
});
});
//将ret作为itcast对象,并且返回
return itcast(ret);
}
<itcast对象>.prepend(source);
source
上的所有的 dom
元素,添加到 this
上的最前边source
类型,为 itcast
对象source
调用 prependTo
方法,将 source
上的所有 dom
添加到 this
上的最前边return this
实现链式编程prepend: function(source) {
source = itcast(source);
source.prependTo(this);
return this;
}
itcast
对象上所有 dom
元素的下一个兄弟元素 (nextSiling)
<itcast对象>.next();
返回值类型, itcast
对象ret
数组,存储所有 dom
的下一个兄弟元素this
上的所有 dom
元素dom
元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret
内,结束循环。ret
转换成 itcast
对象,作为 next
方法的返回值。next: function() {
// 存储所用dom的下一个兄弟元素
var ret = [];
// 遍历this上的所有dom元素
this.each(function() {
// 在遍历当前dom元素下面所有的兄弟元素
for(var node = this.nextSibling; node ; node = node.nextSibling){
// 如果当前兄弟节点,为元素节点
// 即为结果,将其添加ret内,并结束循环
if(node.nodeType === 1){
ret.push(node);
break;
}
}
});
// 将ret转换成itcast对象,返回
return itcast(ret);
},
itcast
对象上所有 dom
元素下面的所有兄弟元素 (nextSiling)
<itcast对象>.nextAll();
返回值类型, itcast
对象ret
数组,存储所有 dom
的下一个兄弟元素this
上的所有 dom
元素dom
元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret
内,结束循环。ret
转换成 itcast
对象,作为 nextAll
方法的返回值。nextAll: function() {
var ret = [],
node;
this.each(function() {
for(node = this.nextSibling; node ; node = node.nextSibling){
if(node.nodeType === 1) ret.push(node);
}
});
return itcast(itcast.unique(ret));
}
<itcast对象>.before(source)
source
类型为 itcast
对象this
上的每一个 dom
元素source
上的每一个 dom
元素this
的 dom
元素的索引是否为00
,不需要拷贝节点this
的 dom
元素的父节点,调用 insertBefore
方法在其前面添加上面的到的新节点return this
实现链式编程before: function(source) {
var node;
source = itcast(source);
this.each(function(dom, i) {
source.each(function(elem) {
node = i === 0 ? elem : elem.cloneNode(true);
// 获取dom的父节点,调用insertBefore方法在dom前添加新的子节点node
dom.parentNode.insertBefore(node, dom);
});
});
return this;
},
<itcast对象>.after(source)
nextSiling
变量,存储 dom
元素的下一个兄弟节点source
类型为 itcast
对象this
上的每一个 dom
元素source
上的每一个 dom
元素this
的 dom
元素的索引是否为 0
0
,不需要拷贝节点this
的 dom
元素的父节点,调用 insertBefore
方法在其前面添加上面的到的新节点return this
实现链式编程after: function(source) {
var node,
nextSibling;
source = itcast(source);
this.each(function(dom, i) {
nextSibling = dom.nextSibling;
source.each(function(elem) {
node = i === 0 ? elem : elem.cloneNode(true);
// 获取dom的父节点,调用insertBefore方法在dom前添加新的子节点node
dom.parentNode.insertBefore(node, nextSibling);
});
});
return this;
}
var newRet = itcast.unique(arr);
ret
.存储去重后的元素ret
中不存在,就添加 ret
内ret
存储的就是去重后的元素ret
indexof
方法indexof
方法this
上的所有元素-1
.unique: function(arr) {
// 存储去重后的结果
var ret = [];
// 遍历原数组arr
itcast.each(arr, function() {
// 判断ret是否存在当前遍历到的元素
// 如果不存在将其添加到ret中
if(ret.indexOf(this) === -1) ret.push(this);
});
// 将ret返回
return ret;
}
兼容 IE8
indexof
方法
// 兼容数组对象的indexOf方法
(function() {
// 如果浏览器不支持indexOf方法
// 那么就给数组对象的原型添加indexOf方法
if(!Array.prototype.indexOf){
Array.prototype.indexOf = function(val) {
// 遍历this
for(var i = 0,l = this.length; i < l; i++){
// 如果遍历到的当前元素和val相同,返回其索引值
if(this[i] == val) return i;
}
// 那么表示不存在指定参数值就返回 -1
return -1;
};
}
}());
itcast
对象上所有 dom
元素的前一个兄弟元素 (previousSibling)
<itcast对象>.prev();
返回值类型: itcast对象
ret
数组,存储所有 dom
的前一个兄弟元素this
上的所有 dom
元素dom
元素之前的所有兄弟,如果类型为元素,将此元素存储 ret
内,结束循环ret
转换成 itcast
对象,作为 next
方法的返回值prev:function(){
//存储所有dom的前一个兄弟元素
var ret=[];
//遍历this上的所有dom元素
this.each(function(){
//在遍历当前dom元素之前所有的兄弟元素
for(var node=this.previousSibling;node;node=node.previousSibling){
//如果当前兄弟节点为元素节点
//即为结果,将其添加到ret内,并结束循环
if(node.nodeType===1){
ret.push(node);
break;
}
}
});
//将ret转换成itcast对象,返回
return itcast(ret);
},
itcast
对象上所有 dom
元素的之前的所有兄弟元素 (nextSibling)
<itcast对象>.nextAll();
返回值类型: itcast对象
ret数组
,存储所有 dom
之前的所有兄弟元素this
上的所有 dom元素
dom
元素之前的所有兄弟,如果类型为元素,将此元素存储 ret
内,结束循环ret
转换成 itcast对象
,作为 nextAll
方法的返回值prevAll:function(){
var ret=[];
this.each(function() {
for(var node=this.previousSibling;node;node=node.previousSibling){
if(node.nodeType===1) ret.push(node);
}
});
return itcast(itcast.unique(ret));
}