[jQuery原理] jQueryDOM操作相关方法

DOM操作相关方法

• empty

empty ==> 清空指定元素中的所有内容

empty: function () {// 1.遍历指定的元素this.each(function (key, value) {value.innerHTML = "";});// 2.方便链式编程return this;
},

• remove

remove ==> 删除所有的元素或指定元素

remove: function (sele) {if(arguments.length === 0){// 1.遍历指定的元素this.each(function (key, value) {// 根据遍历到的元素找到对应的父元素var parent = value.parentNode;// 通过父元素删除指定的元素parent.removeChild(value);});}else{var $this = this;// 1.根据传入的选择器找到对应的元素$(sele).each(function (key, value) {// 2.遍历找到的元素, 获取对应的类型var type = value.tagName;// 3.遍历指定的元素$this.each(function (k, v) {// 4.获取指定元素的类型var t = v.tagName;// 5.判断找到元素的类型和指定元素的类型if(t === type){// 根据遍历到的元素找到对应的父元素var parent = value.parentNode;// 通过父元素删除指定的元素parent.removeChild(value);}});})}return this;
},

jquery遍历对象， 

• html

html ==> 设置所有元素的内容，获取第一个元素的内容

html: function (content) {if(arguments.length === 0){return this[0].innerHTML;}else{this.each(function (key, value) {value.innerHTML = content;})}
},

• text

text ==> 设置所有元素的文本内容，获取所有元素的文本内容

text: function (content) {if(arguments.length === 0){var res = "";this.each(function (key, value) {res += value.innerText;});return res;}else{this.each(function (key, value) {value.innerText = content;});}
},

jquery dome？ 

• appendTo

元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后

特点
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中

appendTo: function (sele) {// 1.统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2.遍历取出所有指定的元素$.each($target, function (key, value) {// 2.遍历取出所有的元素$this.each(function (k, v) {// 3.判断当前是否是第0个指定的元素if(key === 0){// 直接添加value.appendChild(v);res.push(v);}else{// 先拷贝再添加var temp = v.cloneNode(true);value.appendChild(temp);res.push(temp);}});});// 3.返回所有添加的元素return $(res);
},

• prependTo

jquery扩展方法。元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面

prependTo: function (sele) {// 1.统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2.遍历取出所有指定的元素$.each($target, function (key, value) {// 2.遍历取出所有的元素$this.each(function (k, v) {// 3.判断当前是否是第0个指定的元素if(key === 0){// 直接添加value.insertBefore(v, value.firstChild);res.push(v);}else{// 先拷贝再添加var temp = v.cloneNode(true);value.insertBefore(temp, value.firstChild);res.push(temp);}});});// 3.返回所有添加的元素return $(res);
},

• append

指定元素.append.元素 ==> 将元素添加到指定元素内部的最后

appendTo 和 append 不同点
两者顺序不同
appendTo把字符串当做选择器,append不会把字符串当做选择器
appendTo添加到数组,包装成返回值 append直接返回this(返回值类型不同)

append: function (sele) {// 判断传入的参数是否是字符串if(njQuery.isString(sele)){this[0].innerHTML += sele;}else{$(sele).appendTo(this);}return this;
},

原理？ 

• prepend

指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面

prependTo 和 prepend 不同点
参数调用不同
字符串处理不同
返回值不同

prepend: function (sele) {// 判断传入的参数是否是字符串if(njQuery.isString(sele)){this[0].innerHTML = sele + this[0].innerHTML;}else{$(sele).prependTo(this);}return this;
},

• insertBefore

jquery三种遍历方法、元素.insertBefore.指定元素==〉将元素添加到指定元素外部的前面
指定元素.before.元素==>将元素添加到指定元素外部的前面

insertBefore: function (sele) {// 1.统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2.遍历取出所有指定的元素$.each($target, function (key, value) {var parent = value.parentNode;// 2.遍历取出所有的元素$this.each(function (k, v) {// 3.判断当前是否是第0个指定的元素if(key === 0){// 直接添加parent.insertBefore(v, value);res.push(v);}else{// 先拷贝再添加var temp = v.cloneNode(true);parent.insertBefore(temp, value);res.push(temp);}});});// 3.返回所有添加的元素return $(res);
},

• insertAfter

元素.insertAfter.指定元素==>将元素添加到指定元素外部的后面
指定元素.after.元素==>将元素添加到指定元素外部的后面

insertAfter: function (sele) {// 1.统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2.遍历取出所有指定的元素$.each($target, function (key, value) {var parent = value.parentNode;var nextNode = $.get_nextsibling(value);// 2.遍历取出所有的元素$this.each(function (k, v) {// 3.判断当前是否是第0个指定的元素if(key === 0){// 直接添加parent.insertBefore(v, nextNode);res.push(v);}else{// 先拷贝再添加var temp = v.cloneNode(true);parent.insertBefore(temp, nextNode);res.push(temp);}});});// 3.返回所有添加的元素return $(res);
},

• replaceAll

jquery on方法参数。元素.replaceAll.指定元素 ==> 替换所有指定元素

replaceAll: function (sele) {// 1.统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2.遍历取出所有指定的元素$.each($target, function (key, value) {var parent = value.parentNode;// 2.遍历取出所有的元素$this.each(function (k, v) {// 3.判断当前是否是第0个指定的元素if(key === 0){// 1.将元素插入到指定元素的前面$(v).insertBefore(value);// 2.将指定元素删除$(value).remove();res.push(v);}else{// 先拷贝再添加var temp = v.cloneNode(true);// 1.将元素插入到指定元素的前面$(temp).insertBefore(value);// 2.将指定元素删除$(value).remove();res.push(temp);}});});// 3.返回所有添加的元素return $(res);
}

筛选相关方法

• next

返回被选元素的后一个同级元素

next: function (sele) {var res = [];if(arguments.length === 0){// 返回所有找到的this.each(function (key, value) {var temp = njQuery.get_nextsibling(value);if(temp != null){res.push(temp);}});}else{// 返回指定找到的this.each(function (key, value) {var temp = njQuery.get_nextsibling(value)$(sele).each(function (k, v) {if(v == null || v !== temp) return true;res.push(v);});});	}return $(res);
},

• prev

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的

prev: function (sele) {var res = [];if(arguments.length === 0){this.each(function (key, value) {var temp = njQuery.get_previoussibling(value);if(temp == null) return true;res.push(temp);});}else{this.each(function (key, value) {var temp = njQuery.get_previoussibling(value);$(sele).each(function (k, v) {if(v == null || temp !== v) return true;res.push(v);})});}return $(res);
}