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;
},
- 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;
});
}
},
- 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
元素.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
元素.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
元素.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);
}