JQuery学习笔记(3)——节点操作 节点查找
程序员文章站
2022-06-24 11:06:13
插入节点 内部插入 所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入。 append() prepend() appendTo() prependTo() append和prepend是相反的 后面以 结尾的,参数为被插入内容的节点 append可以理解为尾部插入,prepen ......
插入节点
内部插入
所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入。
- append()
- prepend()
- appendto()
- prependto()
append和prepend是相反的
后面以to
结尾的,参数为被插入内容的节点
append可以理解为尾部插入,prepend为头部插入
//在div里面的内容,末尾再追加一个p标签,插入的p标签在div所有子元素的末尾 $("#mydiv").append($("<p>末尾插入</p>")); //在div里面的内容,头部追加一个p标签,插入的p标签位于div的所有子元素的首位 $("#mydiv").prepend($("<p>头部插入</p>")); //下面两种鱼上面的效果是一样的,只是调用的对象和参数这两者换了位置 $("<p>末尾插入</p>").appendto($("#mydiv")); $("<p>头部插入</p>").prependto($("#mydiv"));
外部插入
- after()
- before()
- insertafter()
- insertbefore()
这里,使用方法与之前的内部插入类似
//div之前插入一个p标签,p标签和div是同级关系 $("#mydiv").after($("<p>末尾插入</p>")); //div之后插入一个p标签,p标签和div是同级关系 $("#mydiv").before($("<p>头部插入</p>"));
替换节点
下面的两个方法,效果一样,只是调用对象和目标相反
- replacewith(content|fn)
$('div.second').replacewith('<h2>new heading</h2>');
- replaceall(selector)
$('<h2>new heading</h2>').replaceall('.inner');
删除节点 克隆节点
删除节点
- empty()
删除节点下面的所有元素,只保留节点 - remove([selector])
删除节点,包括节点本身,可以添加选择器进行过滤 - detach([selector])
删除节点,但保留节点属性,可以添加选择器进行过滤
克隆节点
clone()
var btn = $('#mybutton').clone(); //在添加到某个节点之前可以修改属性 btn.css({background:red}); btn.appendto($('#mydiv'));
查找节点
我们获得一个节点,想要获取它的子节点或者父节点,都是属于查找节点
下列的方法,未标明返回类型的,都是返回一个jquery对象
过滤
- first() 获得第一个节点
- last() 获得最后一个节点
- boolean hasclass() 获得包含有某个样式的节点
<div id="mydiv" class="foo bar"></div>
上面的div有两个样式,使用hasclass,参数为两个的样式中的一个,都会返回true
$('#mydiv').hasclass('foo') 返回true $('#mydiv').hasclass('bar') 返回true
- has(selector) 获得包含某个元素的节点
<ul> <li></li> </ul> <ul></ul> $('ul').has('li').css(); ul中包含有li的ul的css会被修改
查找
- find(selector) 查找后代元素
- children(selector) 只查找子元素
- eq(index) 获得节点里指定索引的子元素(调用的jquery对象包含多个元素)
$('tbody').eq(2) //0开始,索引为 $('tbody').eq(-1) //倒数第一个
推荐阅读
-
前端笔记知识点整合之jQuery(下)事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
-
jQuery中的DOM操作-查找节点
-
JQuery学习笔记(3)——节点操作 节点查找
-
JavaScript DOM学习笔记5——创建和操作节点
-
javascript学习笔记(十九) 节点的操作实现代码_基础知识
-
jQuery里面的DOM操作(查找,创建,添加,删除节点)
-
javascript学习笔记(十九) 节点的操作实现代码_基础知识
-
Web前端学习笔记——JavaScript之事件、创建元素、节点操作
-
前端笔记知识点整合之jQuery(下)事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
-
jQuery中的DOM操作-查找节点