JQuery分析及實現part4之DOM操作模塊功能及實現

原創 ihoey 2018-10-31 16:37

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 方法的返回值
      • 如果不這樣做的話,就會在添加樣式時,只有沒拷貝的節點有樣式
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;
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 元素
    • 如果爲真,此時不需要克隆節點
    • 否則,要深克隆節點
    • 將上述的到的節點, 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);
}

prepend 方法

  1. 語法: <itcast對象>.prepend(source);
  2. 功能:把 source 上的所有的 dom 元素,添加到 this 上的最前邊
  3. 實現思路:
    • 統一 source 類型,爲 itcast 對象
    • 通過 source 調用 prependTo 方法,將 source 上的所有 dom 添加到 this 上的最前邊
    • return this 實現鏈式編程
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 方法的返回值。
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 方法的返回值。
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 元素
    • 判斷當前遍歷 this的 dom 元素的索引是否爲0
    • 如果是 0 ,不需要拷貝節點
    • 否則要深拷貝節點
    • 先拿到當前遍歷 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;
},

after 方法

  1. 功能:
  2. 語法: <itcast對象>.after(source)
  3. 實現思路
    • 定義 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;
}

unique 方法

  1. 功能:實現數組元素去重
  2. 語法: var newRet = itcast.unique(arr);
  3. 實現思路
    • 定義空數組對象 ret .存儲去重後的元素
    • 遍歷原數組,如果當前遍歷到的元素在 ret 中不存在,就添加 ret 內
    • 循環結束, ret 存儲的就是去重後的元素
    • 返回 ret
  4. 兼容IE8 indexof 方法
    • 首先判斷當前瀏覽器是否支持 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;
		};
	}
}());

prev 方法

  1. 功能: 獲取 itcast 對象上所有 dom 元素的前一個兄弟元素 (previousSibling)
  2. 語法: <itcast對象>.prev(); 返回值類型: itcast對象
  3. 實現思路
    • 定義 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);
},

prevAll 方法

  1. 功能: 獲取 itcast 對象上所有 dom 元素的之前的所有兄弟元素 (nextSibling)
  2. 語法: <itcast對象>.nextAll(); 返回值類型: itcast對象
  3. 實現思路
    • 定義 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));
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

PHP+jQuery實現即點即改功能示例

ztblog 2019-02-24 12:43:05

PHP+jQuery實現雙擊修改table表格功能示例

ztblog 2019-02-24 12:43:05

使用jQuery UI插件實現切換主題功能——經驗小結

飛魚之戀 2019-02-23 00:27:26

jQuery

vivisrf 2019-02-23 00:23:04

ManageEngine Opstor存儲網絡管理解決方案

zohocorp 2019-02-23 13:53:01

NAS 網絡附加存儲

大將軍繼華 2019-02-23 13:37:48

LVM 詳解

慕小潮 2019-02-23 13:05:42

php調用存儲過程返回結果集，解決can't return a result set in the given context錯誤的方法

zhtzyang 2019-02-23 12:55:51

存儲過程

hulong988 2019-02-23 00:41:12

紅帽企業存儲管理之iscsi簡單應用

xjzhujunjie 2019-02-23 00:23:12

華爲存儲S2600T 自動精簡配置

xuan_90 2019-02-23 00:22:11

服務器硬件工程師從入門到精通視頻教程－RAID篇發佈了！

趙振坤 2019-02-23 00:22:05

Varnish的基本應用詳解

SueK1ng 2019-02-23 00:41:43

編譯安裝nginx並實現反向代理負載均衡和緩存功能

xsllqs 2019-02-23 00:38:49

DiscuzX2.0緩存機制及緩存使用

kelsonkao 2019-02-23 00:27:46