jQuery 的节点操作

作者：Jason199

2022 年 7 月 17 日
本文字数：3379 字
阅读完需：约 11 分钟

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. 创建节点     const 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 回到顶部

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)    })

复制代码

滑动选项卡

1. 每一个 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()    })

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/00ee8c5845080593d57f46bc2】。

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

发布

暂无评论

创作场景

jQuery 的节点操作

jQuery 的节点操作

1. 创建节点

2. 插入节点

3. 删除节点

4. 替换节点

5. 克隆节点

下面这里介绍几个实战案例

1 回到顶部

滑动选项卡

树状菜单

Jason199

评论