JQuery分析及实现part4之DOM操作模块功能及实现

JQuery模块分析及其实现第四部分属性部分功能及实现,接第三部分!

appendTo 方法

  1. 功能:将结果集中的元素 追加到指定的 dom 元素上.
  2. 语法:<target对象>.appendTo(target)
  3. 实现思路
    • 定义 appendTo 方法,声明一个形参 target .追加到目标 dom 元素
      • 选择器
      • dom 元素
      • dom 数组
    • 为了操作方便,将 target 类型统一为 itcast 对象,去 itcast 函数走一圈,出来就是 itcast 对象.
    • 遍历 this 上的每一个 dom 元素,再遍历 target 上的每一个 dom 元素
    • this 上的 dom 元素追加到 target
    • 注意:
      在追加节点时,如果遍历的是第一个目标 dom 元素,不需要拷贝节点;否则要深拷贝节点,并将上述得到的节点储存到 ret
    • ret 数组转换成 itcast 对象,作为 appendTo 方法的返回值
      • 如果不这样做的话,就会在添加样式时,只有没拷贝的节点有样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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);
}

append 方法

  1. 语法: <itcast对象>.append(source) ;
  2. 功能: 将 source 上的所有 dom 元素,追加到 itcast 对象上
  3. 实现思路
    • 统一 source 类型,为 itcast 对象.
    • source.appendTo(this)
    • return this;
1
2
3
4
5
6
append: function(source) {
//统一source类型,为itcast对象
source = itcast(source);
source.appendTo(this);
return this;
},

prependTo 方法

  1. 语法: <itcast对象>.prependTo(target);
  2. 功能:将 itcast 对象上的每一个 dom 元素,追加到 target 最前边 insertBefore
  3. 实现思路
    • 统一 target 类型,为 itcast 对象
    • 定义 node 变量,临时存储被追加的结点.定义 ret 数组,存储所有被追加的节点
    • 先遍历 target 上的每一个 dom 元素
    • 定义变量 firstChild ,临时存储当前目标 dom 元素的第一个子节点,再遍历 this 上的每一个 dom 元素
    • 判断当前遍历的 dom 是否为 target 上的第一个 dom 元素
    • 如果为真,此时不需要克隆节点
    • 否则,要深克隆节点
    • 将上述的到的节点, pushret
    • 调用 insertBefore 方法追加节点,此时第一个参数为追加新的节点,第二个参数为 firstChild ,在 firstChild 之前追加新节点.
    • 两层循环结束,操作完成
    • ret 转换成 itcast 对象,作为 prependTo 方法的返回值,实现链式编程.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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);
}

prepend 方法

  1. 语法: <itcast对象>.prepend(source);
  2. 功能:把 source 上的所有的 dom 元素,添加到 this 上的最前边
  3. 实现思路:
    • 统一 source 类型,为 itcast 对象
    • 通过 source 调用 prependTo 方法,将 source 上的所有 dom 添加到 this 上的最前边
    • return this 实现链式编程
1
2
3
4
5
prepend: function(source) {
source = itcast(source);
source.prependTo(this);
return this;
}

next 方法

  1. 功能:获取 itcast 对象上所有 dom 元素的下一个兄弟元素 (nextSiling)
  2. 语法: <itcast对象>.next(); 返回值类型, itcast 对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的下一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret 内,结束循环。
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 next 方法的返回值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
},

nextAll

  1. 功能:获取 itcast 对象上所有 dom 元素下面的所有兄弟元素 (nextSiling)
  2. 语法: <itcast对象>.nextAll(); 返回值类型, itcast 对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的下一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret 内,结束循环。
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 nextAll 方法的返回值。
1
2
3
4
5
6
7
8
9
10
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));
}

before 方法

  1. 功能:
  2. 语法: <itcast对象>.before(source)
  3. 实现思路
    • 统一 source 类型为 itcast 对象
    • 遍历 this 上的每一个 dom 元素
    • 再遍历 source 上的每一个 dom 元素
    • 判断当前遍历 thisdom 元素的索引是否为0
    • 如果是 0 ,不需要拷贝节点
    • 否则要深拷贝节点
    • 先拿到当前遍历 thisdom 元素的父节点,调用 insertBefore 方法在其前面添加上面的到的新节点
    • 两层循环完毕,操作完成
    • return this 实现链式编程
1
2
3
4
5
6
7
8
9
10
11
12
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;
},

after 方法

  1. 功能:
  2. 语法: <itcast对象>.after(source)
  3. 实现思路
    • 定义 nextSiling 变量,存储 dom 元素的下一个兄弟节点
    • 统一 source 类型为 itcast 对象
    • 遍历 this 上的每一个 dom 元素
    • 再遍历source 上的每一个 dom 元素
    • 判断当前遍历 thisdom 元素的索引是否为 0
    • 如果是 0 ,不需要拷贝节点
    • 否则要深拷贝节点
    • 先拿到当前遍历 thisdom 元素的父节点,调用 insertBefore 方法在其前面添加上面的到的新节点
    • 两层循环完毕,操作完成
    • return this 实现链式编程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

unique 方法

  1. 功能:实现数组元素去重
  2. 语法: var newRet = itcast.unique(arr);
  3. 实现思路
    • 定义空数组对象 ret .存储去重后的元素
    • 遍历原数组,如果当前遍历到的元素在 ret 中不存在,就添加 ret
    • 循环结束, ret 存储的就是去重后的元素
    • 返回 ret
  4. 兼容IE8 indexof 方法
    • 首先判断当前浏览器是否支持 indexof 方法
    • 如果不支持就给数组对象的原型添加 indexof 方法
    • 遍历 this 上的所有元素
    • 如果遍历到的当前元素和指定参数值相同就直接返回其索引值.结束循环
    • 如果在整个上述循环都没有返回值,那么表示不存在指定参数值就返回 -1 .
1
2
3
4
5
6
7
8
9
10
11
12
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` 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 兼容数组对象的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;
};
}
}());

prev 方法

  1. 功能: 获取 itcast 对象上所有 dom 元素的前一个兄弟元素 (previousSibling)
  2. 语法: <itcast对象>.prev(); 返回值类型: itcast对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的前一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素之前的所有兄弟,如果类型为元素,将此元素存储 ret 内,结束循环
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 next 方法的返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
},

prevAll 方法

  1. 功能: 获取 itcast 对象上所有 dom 元素的之前的所有兄弟元素 (nextSibling)
  2. 语法: <itcast对象>.nextAll(); 返回值类型: itcast对象
  3. 实现思路
    • 定义 ret数组 ,存储所有 dom 之前的所有兄弟元素
    • 遍历 this 上的所有 dom元素
    • 遍历当前 dom 元素之前的所有兄弟,如果类型为元素,将此元素存储 ret 内,结束循环
    • 两层循环结束,将 ret 转换成 itcast对象 ,作为 nextAll 方法的返回值
1
2
3
4
5
6
7
8
9
10
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));
}