jqeury中的节点操作

最新推荐文章于 2021-06-16 04:34:13 发布

冲呀web

最新推荐文章于 2021-06-16 04:34:13 发布

阅读量147

点赞数

分类专栏： jquery 文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_44698566/article/details/108810486

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jqeury的节点操作

1.添加节点
添加到父元素内部，内部插入:将节点添加到选中标签内部，包含关系
通过父节点添加：
$父节点.append($(“孩子节点”))
$父节点.prepend$(“孩子节点”))
$(“孩子节点”).appendTo($父节点)
$(“孩子节点”).prependTo($父节点)
通过已存在的子节点增加：
$(已存在的兄弟).after($obj)
$(已存在的兄弟 ).before($obj)
$obj.insertAfter($已存在的兄弟)
$obj.insertBsefore($已存在的兄弟)

//1. append 在父元素末尾插入子元素
		$lists.append($("<li>我是append添加的</li>"));
		//2. appendTo 将子元素插入到父元素的末尾
		$("<li>我是appendTo添加的</li>").appendTo($lists);
		//3. prepend 在父元素的头部插入子元素
		$lists.prepend($("<li>我是prepend添加的</li>"));
		//4. prependTo:将子元素插入到父元素的头部
		$("<li>我是prependTo添加的</li>").prependTo($lists);

添加到父元素内部了，外部插入，将节点添加到选中标签外，同级关系

A.after(B):在A元素后面添加兄弟元素B

$lists.after($("<p>我是通过after添加的</p>"));

2.A.insertAfter(B):将A元素添加到B元素的后面

$("<p>我是通过insertAfter添加的</p>").insertAfter($lists);

A.before(B):在A元素的前面添加B元素

$lists.before($("<p>我是通过before添加的</p>"));

4.A.insertBefore(B):将A添加到B元素的前面

$("<p>我是通过insertBefore添加的</p>").insertBefore($lists);

dom结构：

<ul id="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>

效果图：在这里插入图片描述
2.元素的包裹
dom结构：

		<li>a1</li>
		<li>a2</li>
		<li>a3</li>

1 wrap元素包裹（所有匹配到的li都会被包裹）

 $('li').wrap($('<ol></ol>'));

结果：在这里插入图片描述
2.unwrap 解除元素的包裹

 $('li').unwrap($('<ol></ol>'));//上面添加的<ol></ol>全部被清除

3.wrapAll 将所有匹配的元素使用一个元素进行包裹

$('li').wrapAll($('<ol></ol>'));

结果：在这里插入图片描述
4.wrapInner 将匹配的元素和子元素之间使用一个元素进行包裹

$('li').wrapInner($('<b></b>'));

结果：在这里插入图片描述
3.元素的替换
1.元素替换 replaceWith
dom结构：

    <li>1</li>
    <li>1</li>
    <li>1</li>

 $('li').replaceWith($('<b>2</b>'));//匹配到的li标签都会替换为b标签

结果：在这里插入图片描述
2.元素替换 replaceAll

$('<h1>3</h1>').replaceAll($('li'));

在这里插入图片描述
4.元素的删除
dom结构;

	<li>香蕉</li>
    <p>榴莲</p>

1.empty:移除元素内的所有节点，不会删除元素节点本身

   $('li').empty();

结果：在这里插入图片描述
2.remove:移除元素内部的所有子节点，包括自己本身

$('p').remove();//p标签本身也被移除

结果：在这里插入图片描述
5.克隆
clone(布尔值)说明：js的克隆不能克隆事件，jQuery可以克隆事件
true:会克隆事件
false：不会克隆事件，默认false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我</button>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
    // 绑定事件
    $('#btn').click(function() {
        console.log('人不狠站不稳');
    });

    // 克隆btn
    $('#btn').clone().css('color', 'red').appendTo($(document.body));
    $('#btn').clone(true).css('color', 'blue').appendTo($(document.body));
    </script>
</body>
</html>

冲呀web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqeury中的节点操作

jqeury的节点操作1.添加节点添加到父元素内部，内部插入:将节点添加到选中标签内部，包含关系通过父节点添加：$父节点.append($(“孩子节点”))$父节点.prepend$(“孩子节点”))$(“孩子节点”).appendTo($父节点)$(“孩子节点”).prependTo($父节点)通过已存在的子节点增加：$(已存在的兄弟).after($obj)$(已存在的兄弟 ).before($obj)$obj.insertAfter($已存在的兄弟)$obj.insertBse
复制链接

扫一扫

专栏目录