Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:jquery只有一个普通的函数库罢了, 不要将它的功能过度夸大, 实际上开发中50%以上的功能还是要靠原生代码实现
JQuery
中的DOM
操作主要对包括:建(新建)、增(添加)、删(删除)、改(修改)、查(查找)(像数据库操作)。下面的DOM操作将围绕上面的DOM
树进行学习JQueryDOM
操作。
var cl = console.log.bind(console);
// 1. 元素的插入与替换, 父元素.append(子元素)
$("body").append("<ol>");
// 子元素.appendTo(父元素)
$("<li>").text("笔记本电脑").appendTo("ol");
$("<li>").addClass("active").text("智能手机").appendTo("ol");
$("<li>", {
id: "hello",
style: "background-color:yellow",
})
.html("<a href=''>格子衫</a>")
.appendTo("ol");
// append(callback)
$("ol").append(function () {
var res = "";
for (var i = 0; i < 5; i++) {
res += "<li><a href=''>最新商品" + (i + 1) + "</a></li>";
}
return res;
});
prepend()方法将每匹配的元素内部前置要添加的元素,prependTo()方法将元素添加到每一个匹配的元素内部前置
$("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
// prepend(), prependTo(), 将新元素插入到头部
$("<li>最新留言</li>").prependTo("ol");
after()方法向匹配的元素后面添加元素,新添加的元素做为目标元素后的紧邻的兄弟元素。 before()方法在每一个匹配的元素之前插入,做为匹配元素的前一个兄弟节点。
//方法将查找节点p,然后把新建的元素添加到span节点后面做为p的兄弟节点。
$("p").after("<span>新加段新加段新加段新加段新加段</span>");
// 从第3个元素前面添加<li>, before(), 在某个元素之前添加
$("ol > li:nth-of-type(3)").before("<li>新元素</li>");
insertAfter()方法将新建的元素插入到查找到的目标元素后,做为目标元素的兄弟节点。insertBefore()方法将新建元素添加到目标元素前,做为目标元素的前一个兄弟节点。
// insertAfter()
$("<li>新元素2</li>").insertAfter("ol > li:nth-of-type(4)");
$("<a href='#'>锚</a>").insertBefore("ul");
// insertBefore()新建a元素,将新建的a元素添加到元素ul前,做为ul的前一个兄弟节点。
替换节点$(element).repalcewith()
、$(element).repalceAll()
,替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()
和replaceAll()
.
使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素。
// 元素的换: replaceWith()
$("ol > li:last-of-type").replaceWith("<h3>Hello PHP.CN</h3>");
$("<p>Hello World...</p>").replaceAll("ol > li:first-of-type");
jQuery就类似laravel框架和TP框架,jQuery作为JavaScript常用的函数库,封装了许多方法,用起来确实很巧妙,精简了很多操作步骤。这也难怪市面上的jQuery项目占了70%,毕竟上手了就很难回头去学习原生的了。