jQuery DOM操作
empty/remove
<!--
* @Author: 码小余
* @Date: 2020-06-24 16:07:12
* @LastEditTime: 2020-06-24 17:06:02
* @FilePath: \代码\jQuery原理\07-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>07-jQueryDOM操作相关方法</title>
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
1、empty ==> 清空指定元素中的所有内容
2、remove ==> 删除所有的元素或指定元素
*/
var btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", function () {
// $("div").empty();
// console.log($("div").empty());
// $("div").remove();
// console.log($("div").remove());
$("div").remove(".box");
});
});
</script>
</head>
<body>
<button>调用remove</button>
<div>
我是div
<p>我是段落</p>
</div>
<div class="box">
我是div
<p>我是段落</p>
</div>
<p class="box"></p>
</body>
</html>
empty/remove 实现原理
empty: function () {
// 1. 遍历指定的元素
this.each(function (key, value) {
value.innerHTML = "";
});
// 方便链式编程
return this;
},
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 (key, value) {
// 4. 获取指定元素的类型
var t = value.tagName;
// 5. 判断找到的元素的类型和指定元素的类型是否相等
if (t === type) {
// 根据遍历到的元素找到对应的父元素
var parent = value.parentNode;
// 通过父元素删除指定的元素
parent.removeChild(value);
}
});
});
}
return this;
},
html/text
<!--
* @Author: 码小余
* @Date: 2020-06-24 17:14:52
* @LastEditTime: 2020-06-24 17:29:31
* @FilePath: \代码\jQuery原理\08-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>08-jQueryDOM操作相关方法</title>
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
3、html ==> 设置所有元素的内容,获取第一个元素的内容
4、text ==> 设置所有元素的文本内容,获取所有元素的文本内容
*/
var btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", function () {
var $div = $("div");
// console.log($div.html());
// $div.html("123");
// $div.html("<div><span>我是span</span></div>");
// console.log($div.text());
// $div.text("123");
$div.text("<div><span>我是span</span></div>");
});
});
</script>
</head>
<body>
<button>调用text</button>
<div>
我是div1
<p>我是段落1</p>
</div>
<div class="box">
我是div2
<p>我是段落2</p>
</div>
</body>
</html>
html/text实现原理
html: function (content) {
if (arguments.length === 0) {
return this[0];
} else {
this.each(function (key, value) {
value.innerHTML = content;
});
}
},
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
<!--
* @Author: 码小余
* @Date: 2020-06-24 17:52:32
* @LastEditTime: 2020-06-25 09:03:56
* @FilePath: \代码\jQuery原理\09-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
/*
特点:
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
*/
// 接收一个字符串 $(".item"); ==> jQuery
// $("p").appendTo(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").appendTo($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").appendTo(divs);
console.log($("p").appendTo(".item"));
};
});
</script>
</head>
<body>
<button>调用appendTo</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
</body>
</html>
appendTo实现原理
appendTo: function (sele) {
// 1. 统一的将传入的数据转换为jQuery对象
var $target = $(sele);
var $this = this;
var res = [];
// 2. 遍历取出所有指定的元素
$.each($target, function (key, value) {
$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
<!--
* @Author: 码小余
* @Date: 2020-06-25 09:11:01
* @LastEditTime: 2020-06-25 09:23:03
* @FilePath: \代码\jQuery原理\10-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>10-jQueryDOM操作相关方法</title>
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串 $(".item"); ==> jQuery
// $("p").prependTo(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").prependTo($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").prependTo(divs);
console.log($("p").prependTo(".item"));
};
// function prependTo(source, target) {
// /*
// 调用者.insertBefore(插入的元素, 参考的元素);
// insertBefore方法, 调用者是谁就会将元素插入到谁里面
// */
// target.insertBefore(source, target.firstChild);
// }
// var p = document.querySelector("p");
// var div = document.querySelector("div");
// prependTo(p, div);
});
</script>
</head>
<body>
<button>调用prependTo</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
</body>
</html>
prependTo实现原理
prependTo: function (sele) {
// 1. 统一的将传入的数据转换为jQuery对象
var $target = $(sele);
var $this = this;
var res = [];
// 2. 遍历取出所有指定的元素
$.each($target, function (key, value) {
$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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-jQueryDOM操作相关方法</title>
<!--<script src="js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串
// $("p").appendTo(".item");
$(".item").append("p");
// $(".item").append("<span>我是span</span>");
// console.log($(".item").append("p"));
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("div").append($("p"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// var ps = document.querySelectorAll("p");
// $(divs).append(ps);
}
});
</script>
</head>
<body>
<button>调用append</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
</body>
</html>
append实现原理
appped: function (sele) {
// 判断传入的参数是否是字符串
if (njQuery.isString(sele)) {
this[0].innerHTML += sele;
} else {
$(sele).appendTo(this);
}
return this;
},
prepend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-jQueryDOM操作相关方法</title>
<!--<script src="js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串
// $("p").prependTo(".item");
// $(".item").prepend("p");
// $(".item").prepend("<span>我是span</span>");
console.log($(".item").prepend("p"));
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("div").prepend($("p"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// var ps = document.querySelectorAll("p");
// $(divs).prepend(ps);
}
});
</script>
</head>
<body>
<button>调用prepend</button>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
</body>
</html>
prepend实现原理
prepend: function (sele) {
// 判断传入的参数是否是字符串
if (njQuery.isString(sele)) {
this[0].innerHTML = sele + this[0].innerHTML;
} else {
$(sele).prependTo(this);
}
return this;
},
insertBefore
<!--
* @Author: 码小余
* @Date: 2020-06-25 10:15:53
* @LastEditTime: 2020-06-25 10:16:13
* @FilePath: \代码\jQuery原理\13-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>13-jQueryDOM操作相关方法</title>
<!--<script src="js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.2.0.js"></script>
<script>
$(function () {
/*
DOM 操作:
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串 $(".item"); ==> jQuery
// $("p").prependTo(".item");
$("p").insertBefore(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").insertBefore($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").insertBefore(divs);
console.log($("p").insertBefore(".item"));
};
function insertBefore(source, target) {
/*
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
*/
// 1.拿到指定元素的父元素
var parent = target.parentNode;
// 2.利用指定元素的父元素来调用insertBefore方法
parent.insertBefore(source, target);
}
var p = document.querySelector("p");
var div = document.querySelector("div");
// insertBefore(p, div);
});
</script>
</head>
<body>
<button>调用insertBefore</button>
<div class="item">
<p>我是段落</p>
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
</body>
</html>
insertBefore实现原理
insertBefore: function (sele) {
// 1. 统一的将传入的数据转换为jQuery对象
var $target = $(sele);
var $this = this;
var res = [];
// 2. 遍历取出所有指定的元素
$.each($target, function (key, value) {
$this.each(function (k, v) {
// 找到指定元素的父元素
var parent = value.parentNode;
// 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);
},