jQuery的节点操作
<body>
<h1>我是h1标签</h1>
<script src="./jquery.min.js"></script>
<script>
// jQuery的节点操作
// 1,创建节点
// 给一个变量,赋值,赋值形式是 $('你要创建的标签')
// 创建了一个div标签节点
const oDiv1 = $('<div>我是div标签1</div>');
// 创建标签的同时,可以定义标签的属性和属性值
const oDiv2 = $('<div class="div1" name="div">我是div标签2</div>');
// 2,写入节点
// 为了方便链式编程,jQuery中提供了多种写入节点的方法
// (1), $(父级标签).append(要写入的子级标签)
// 在最后 --- 父子关系
// $('h1').append(oDiv1);
// $('h1').append( $('<a href="https://www.baidu.com">百度</a>') );
// (2), 要写入的子级标签.appendTo( $(父级标签) )
// 在最后 --- 父子关系
// oDiv2.appendTo( $('h1') );
// $('<span>我是span</span>').appendTo( $('h1') );
// (3), $(父级元素).prepend(子级标签)
// 在起始 --- 父子关系
// $('h1').prepend(oDiv1);
// (4) 自己标签.prependTo( $(父级标签) )
// 在起始 --- 父子关系
// oDiv2.prependTo( $('h1') );
// (5) 已有标签.after(新增标签)
// 在之后 --- 兄弟关系
// $('h1').after(oDiv1);
// (6) 新增标签.insertAfter(已有的标签)
// 在之后 --- 兄弟关系
// oDiv2.insertAfter( $('h1') );
// (7) 已有标签.before(新增标签)
// 在之后 --- 兄弟关系
$('h1').before(oDiv1);
// (8) 新增标签.insertBefore(已有的标签)
// 在之后 --- 兄弟关系
oDiv2.insertBefore( $('h1') );
// 总结:
// 1,创建标签,是使用 js 的语法定义变量,来存储
// jQuery中,定义的都是js的操作方法,没有定义变量的语法
// 要想定义变量,必须是 js 语法
// 2,写入时,可以直接写入 js语法变量 中存储的标签对象
// 也可以直接写入 $(创建的标签)
// 3,写入语法,为了方便链式编程
// 具体使用那种语法,完全看,你当前的标签对象是哪个
// 父子
// 在最后
// $(父级).append(子级)
// 子级.appendTo($(父级))
// 在之前
// $(父级).prepend(子级)
// 子级.prependTo($(父级))
// 兄弟
// 在之后
// $(已有标签).after(新增标签)
// 新增标签.insertAfter($(已有标签))
// 在之前
// $(已有标签).before(新增标签)
// 新增标签.insertBefore($(已有标签))
</script>
删除节点
<body>
<div>
我是div
<span>我是span</span>
<h1>我是h1</h1>
<p>我是p标签</p>
</div>
<script src="jquery.min.js"></script>
<script>
// 删除节点
// 1, empty()
// 将 标签对象,定义为一个空标签
// 所谓的空标签,就是没有任何的内容
// $('div').empty();
// 2, remove()
// 将 标签对象本身,从页面中移除
// 移除,也是就是这个标签本身都不存在了
// $('div').remove();
// 删除子节点,或者清空子节点
// 通过强大的选择器,选择到子节点就可以了
// $('div').remove(); 删除div
$('div>span').remove(); // 删除div中的span标签
</script>
</body>
替换节点
<div>
我是div
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<a href="JavaScript" name="a">我是要被替换的</a>
<h1>我是h1</h1>
<p>我是p标签</p>
</div>
<script src="jquery.min.js"></script>
<script>
// 替换节点
// 1, $(已有标签).replaceWith(替换成的标签)
// 使用 替换成的标签 来替换 已有的标签
// 替换所有
// 2, 替换成的标签.replaceAll( $(已有标签) )
// 使用 替换成的标签 来替换 已有的标签
// 替换所有
// 创建一个节点
const oA = $('<a href="https://www.baidu.com">百度</a>');
// 使用这个超链接节点,替换 span标签
// $('div>span').replaceWith(oA);
// replaceWith 和 replaceAll 只是标签顺序写法不同
oA.replaceAll( $('div>span') );
$('<h5>我是替换的</h5>').replaceAll( $('[name="a"]') );
</script
克隆节点
<div>
我是div
<span>我是span</span>
<h1>我是h1</h1>
<p>我是p标签</p>
</div>
<nav>
我是nav
</nav>
<script src="jquery.min.js"></script>
<script>
// 克隆节点
// $().clone() 克隆赋值标签节点
// 参数1: 布尔值 默认值是false,表示不克隆标签上绑定的事件
// 设定为true,是克隆事件,克隆标签本身和子级标签的事件都克隆
// 参数2: 布尔值
// 只有当参数1为true时,才起作用
// 设定是否要克隆子级标签的事件,false是不克隆
// 默认值是 true , 因此,当前标签,自己标签,事件都克隆,写一个true就可以了
// 给div标签绑定事件
$('div').click(function(){
console.log('我是div');
})
// 给div标签的子级绑定事件
$('div>h1').click(function(){
console.log('我是h1');
})
// const oDiv = $('div').clone();
// oDiv.appendTo( $('nav') );
// 没有克隆事件
// $('div').clone().appendTo( $('nav') ) ;
// 克隆事件 , 写一个true,父级子级,事件都克隆
// $('div').clone(true).appendTo( $('nav') ) ;
// 克隆事件 , 第一个true,是克隆标签本身事件
// 第二个false,是不克隆子级标签事件
$('div').clone(true,false).appendTo( $('nav') ) ;
</script>
