携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
jQuery 的节点操作
原生 JS 的节点操作
创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
jQuery 的节点操作
创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
公共基础样式部分
<div class="a">
hello
<p class="b">我是 div 里面的 p 标签
</p> world </div>
1. 创建节点
$(html 结构字符串)
当 $() 里面传递一个选择器的时候, 就是获取元素
当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点
当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合
// 0. 准备一个节点
const p = $('<p>我是 jQuery 创建的 p 元素节点</p>')；
// 1. 创建节点 c
onst div = $('<div>我是一个创建的 div</div>')；
console.log(div)；
2. 插入节点
内部插入(父子关系的插入)
2-1. append()： 父元素.append(子元素)
子元素插入到父元素内部, 放在末尾的位置
$('div').append(p)\
2-2. appendTo()：子元素.appendTo(父元素)
子元素插入到父元素内部, 放在末尾的位置
p.appendTo($('div'))\
2-3. prepend(): 父元素.prepend(子元素)
子元素插入到父元素内容, 放在最前面的位置
$('div').prepend(p)\
2-4. prependTo(): 子元素.prependTo(父元素)
子元素插入到父元素内容, 放在最前面的位置
p 是一个 jQuery 创建的元素节点, 但是是一个复杂数据类型的变量
存储的是一个 地址, 只要我使用 p, 就是在使用堆里面得哪个空间
p.prependTo($('div'))\
2-5. after(): 存在元素.after(插入元素)
插入元素排在存在元素的后面, 以兄弟关系出现
$('div').after(p)\
2-6. insertAfter(): 插入元素.insertAfter(存在元素)
插入元素排在存在元素的后面, 以兄弟关系出现
p.insertAfter($('div'))\
2-7. before(): 存在元素.before(插入元素)
插入元素排在存在元素的前面, 以兄弟关系出现
$('div').before(p)\
2-8. insertBefore(): 插入元素.insertBefore(存在元素)
插入元素排在存在元素的前面, 以兄弟关系出现
p.insertBefore($('div'))\
3. 删除节点
3-1. remove(): 元素集合.remove()
从自己的父元素里面移出
$('div').remove()\
3-2. empty(): 元素集合.empty()
变成空标签后 把所有后代节点全部移除
$('div').empty()\
4. 替换节点
4-1. replaceWith(): 换下节点.replaceWith(换上节点)
$('div > p').replaceWith(p)\
4-2. replaceAll(): 换上节点.replaceAll(换下节点)
p.replaceAll($('div > p'))\
5. 克隆节点
5-1. clone(): 元素集合.clone()
必然携带所有节点过来
第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true
第二个参数默认是 跟随第一个, 表示是否克隆元素后代节点的事件, 选填
注意: ****当第一个参数是 false 的时候, 第二个参数没有意义
$('.a').click(function () { console.log('div') })\
$('.b').click(function () { console.log('p') })\
下面这里介绍几个实战案例
1 回到顶部
- 获取元素, 绑定点击事件
在点击事件里面使用动画让他上去
页面回到顶部, 一定要运动 html 元素
2. 一旦走起来停不下来了
//CSS部分 * {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.gotop {
width: 50px;
height: 50px;
background-color: skyblue;
position: fixed;
bottom: 50px;
right: 50px; }
<div class="gotop">
</div>
//js部分 记得要引入jQuery样式文件
$('.gotop').click(() => {
// 让页面回到顶部
$('html').animate({
scrollTop: 0
}, 1000)
})
滑动选项卡
- 每一个 li 有一个鼠标移入事件
获取到移入的这个 li 的索引
span 的 left 就是索引 * 100 的位置
2. 一旦挨个触发动画, 小横线跟不上了 ?
stop()
3. 文字改变
获取到 当前 li 里面的文件设置商
4. 点击事件没有了
因为 span 覆盖在了 li 身上, 你点击到的都是 span
把 li 的事件委托给 ul, 并且设置 span 不作为事件目标
//css样式* {
margin: 0;
padding: 0;
}
ul { width: 900px; height: 40px; margin: 50px auto; border-bottom: 3px solid skyblue; position: relative; }
ul, li { list-style: none; }
li { float: left; width: 100px; text-align: center; line-height: 40px; cursor: pointer; }
ul > span { width: 100px; height: 40px; background-color: skyblue; border-bottom: 3px solid red; text-align: center; line-height: 40px; position: absolute; left: 0; bottom: -3px; color: #fff;
/* 不作为事件目标 */ pointer-events: none; }<ul> <li>选项菜单1</li> <li>选项菜单2</li> <li>选项菜单3</li> <li>选项菜单4</li> <li>选项菜单5</li> <li>选项菜单6</li> <li>选项菜单7</li> <li>选项菜单8</li> <li>选项菜单9</li>
<span>选项菜单1</span>
\
//js部分
$('li').mouseover(function () {
const index = $(this).index()
$('span').stop().animate({
left: index * 100 },
100).text($(this).text())
})
$('ul').on('click', 'li', function () {
console.log(this)
})
树状菜单
1. 给一级菜单的每一个 li 绑定事件
ul > li，自己添加 active, 所有的兄弟没有 active
自己下面的 ol 展开
自己所有兄弟元素下面的 ol 都闭合
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
ul {
width: 300px;
border: 3px solid pink;
margin: 30px auto;
padding: 30px;
}
ul > li > ol {
padding-left: 30px;
/* height: 0; */
/* overflow: hidden; */
display: none;
}
ul > li > ol > li {
height: 20px;
line-height: 20px;
}
ul > li:before {
content: '+'; }
ul > li.active::before {
content: '-' }
<ul>
<li>
<span>第一级菜单</span>
<ol>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
</ol>
</li>
<li>
<span>第一级菜单</span>
<ol>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
</ol> </li>
<li>
<span>第一级菜单</span>
<ol>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
<li>+ 第二级菜单</li>
</ol>
</li>
</ul>
// js代码$
('ul > li').click(function () {
$(this).toggleClass('active').siblings().removeClass('active')
$(this).find('ol').slideToggle().parent().siblings().find('ol').slideUp()
})
