Study JQuery《3、DOM操作》

最新推荐文章于 2020-12-20 18:41:46 发布

Naga

最新推荐文章于 2020-12-20 18:41:46 发布

阅读量376

点赞数

分类专栏： JQuery/JS 文章标签： jquery object 浏览器文档语言平台

本文链接：https://blog.csdn.net/jiangdragon/article/details/8025123

版权

JQuery/JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、基本概念
DOM：Document Object Model，文档对象模型，一种与浏览器、平台、语言无关的接口。
二、DOM操作
1、查找节点，如下：
 <html>
 <head>
 <title></title>
 </head>
 <body>
 Hello
 !Hello
 <ul>
 <li title="苹果">苹果</li>
 <li title="橘子">橘子</li>
 </ul>
 </body>
 </html>
 var li = $("ul li:eq(1)");//<ul>里第2个<li>节点
2、创建节点
 var li_1 = $("<li title='香蕉'>香蕉</li>");//创建<li>节点
 $("ul").append(li_1);//插入到<ul>节点中
3、插入节点
 append()：向每个匹配的元素内追加内容，后加。
 appendTo()：把内容追加到指定元素中，$(A).appendTo(B)。
 prepend()：向每个匹配的元素内前置内容，前加。
 prependTo()：把内容前置到指定元素中,$(A).prependTo(B)。
 注：以上是在匹配内容中操作。
 after()：在每个匹配元素之后加入内容，后加。
 insertAfter()：把内容加入到指定元素后面，$(A).insertAfter(B)。
 before()：在每个匹配元素之前加入内容，前加。
 insertBefore()：把内容加入到指定元素前面，$(A).insertBefore(B)。
 注：以上是在匹配内容的外面操作。
 如下：
 $("p").append("world");//Hello world
 $("world").appendTo("p");//Hello world
 $("p").prepend("world");//world Hello
 $("world").prependTo("p");//world Hello
 -------------------------------------------------------------
 $("p").after("world");//Helloworld
 $("world").insertAfter("p");//Helloworld
 $("p").before("world");//worldHello
 $("world").insertBefore("p");//worldHello
4、删除节点
 remove()：删除匹配的元素，本身在内存中。
 empty()：清空节点，本身并没有真正的删除。
 如下：
 $("ul li").remove("li[title=苹果]");
 $("ul li:eq(0)").remove();
 $("ul li:eq(0)").empty();
5、复制节点
 clone()：复制节点但不具有任何行为。
 clone(true)：复制节点同时复制元素所绑定事件。
 如：
 $("ul li:eq(0)").clone().appendTo("ul");
6、替换节点
 replaceWith()：用节点替换原来的节点。
 replaceAll()：与上作用一样，只是相反操作。
 如：
 $("p").replaceWith("World");
 //World
 $("World").replaceAll("p");
 //World
7、包裹节点
 wrap()：把匹配的节点用标记包裹起来。
 wrapAll():把所有匹配的元素用一个元素包裹起来。
 wrapInner()：把每一个匹配的元素的子内容用一个元素包裹起来。
 如：
 $("p").wrap("");
 //WorldWorld
 $("p").wrapAll("");
 //WorldWorld
 $("p").wrapInner("");
 //WorldWorld

----------------------------------------------------------------------------------------------------------

Naga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Study JQuery《3、DOM操作》

一、基本概念 DOM：Document Object Model，文档对象模型，一种与浏览器、平台、语言无关的接口。二、DOM操作 1、查找节点，如下： Hello !Hello 苹果橘子 var li = $("ul li:eq(1)");/
复制链接

扫一扫

专栏目录