jQ节点操作和元素尺寸

大大大石头
202 阅读4分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

jQ节点操作和元素尺寸

创建、追加元素

创建元素：$( 字符串类型解构 )

  • 向父元素结尾添加元素：
    • 父元素jq对象.append( 新创建的元素 )
    • 新创建元素.appendTo( 父元素jq对象 / 选择器 )
  • 向父元素开头添加元素
    • 父元素jq对象.prepend( 新创建的与元素 )
    • 新创建元素.prependTo( 父元素jq对象 / 选择器 )
  • 向兄弟元素后面添加元素
    • 兄弟元素jq对象.after( 新创建的元素 )
    • 新创建的元素.insertAfter( 兄弟元素jq对象 / 选择器 )
  • 向兄弟元素前面添加元素
    • 兄弟元素jq对象.before( 新创建的元素 )
    • 新创建的元素.insertBefore( 兄弟元素jq对象 / 选择器 )
<body>
  <div>
    <p>我是旧的p标签</p>
    <p class="me">我是旧的p标签，我是me</p>
    <p>我是旧的p标签</p>
    <p>我是旧的p标签</p>
  </div>
  <script>
    // 创建新元素
    const $newP = $('<p>我是新的p标签</p>')
    // 打印看一下
    console.log($newP)

    // 在父元素内底部添加子元素
    $('div').append($('<p>我是新的p标签,添加在div最后</p>'))
    // 在父元素内顶部添加子元素
    $('<p>我是新的p标签，添加在div最前面</p>').prependTo('div')


    // 在子元素后面添加元素
    $('.me').after($('<p>我是新的p标签,添加在me后面</p>'))
    // 在子元素前面添加元素
    $('<p>我是新的p标签,添加在me前面</p>').insertBefore($('.me'))
  </script>
</body>

删除、清空元素

  • 删除元素：jq对象.remove()
  • 清空元素内部内容
    • jq对象.empy()：直接清空全部内容，比较彻底，建议使用
    • jq对象.html(' ')：相当于把内部内容替换为空，但是内如如果之前定义过事件等内容无法被清空
<body>
  <div>
    <p>我是旧的p标签</p>
    <p class="remove">我是要删除的节点</p>
  </div>
  <div>
    <p>我会被清空，如果你看到了我说明你写错了</p>
  </div>
  <script>
    // 删除元素节点
    $('.remove').remove()
    // 清空元素，下面两方法都可以，更推荐第一种，清除更彻底
    $('div:eq(1)').empty()
    // $('div:eq(1)').html('')
  </script>
</body>

克隆元素

语法：jq对象.clone( true / false)

参数：

  • true表示全部克隆，即克隆内容，也克隆事件
  • flase（默认值）表示仅仅克隆内容
<body>
  <p>我是一个p，如果你发现有两个我既说明你克隆成功了，如果我的点击事件两个都有，擦么克隆参数就是true</p>
  <script>
    // 给p添加事件
    $('p').click(() => console.log('事件'))
    // 把克隆的元素添加到body中，下面两中都可以做到，区别是参数true可以克隆事件
    // $('body').append($('p').clone())
    $('body').append($('p').clone(true))
  </script>
</body>

操作元素尺寸

  • 获取、设置内容区域：
    • jq对象.width( ' 可选参数 ' )
    • jq对象.height( ' 可选参数 ' )
  • 获取、设置内容区域 + padding
    • jq对象.innerWidth( ' 可选参数 ' )
    • jq对象.innerHeight( ' 可选参数 ' )
  • 获取、设置内容区域 + padding + border
    • jq对象.outerWidth( ' 可选参数 ' )
    • jq对象.outerHeight( ' 可选参数 ' )

无参数代表获取，有参数代表设置

<body>
  <div class="box" style="width: 200px;height: 200px;padding: 50px;border: solid 5px #ccc;background-color: pink;">
  </div>

  <script>
    // 获取修改内容区域
    // console.log($('.box').width())
    // $('.box').height(400)

    // 获取、修改内容区域+padding区域，差值会设置给内容区域
    // console.log($('.box').innerWidth())
    // $('.box').innerHeight(400)

    // // 获取、修改内容区域+padding+border区域，差值会设置给内容区域
    console.log($('.box').outerWidth())
    $('.box').outerHeight(400)
  </script>
</body>

注意：当设置参数的时候，差值会在内容区域的width和height上增减，padding、border保持不变，如果设置的值太小，内容区域最小只能为0

操作元素的位置

  • jq对象.offtset( )：获取元素到文档顶点的距离，和父元素什么都没关系，只针对文档顶点，就算文档滚动了也一样
  • jq对象.position()：获取元素距离上个参考元素的位置，和定位有关
<body>
  <div class="box" style="width: 200px;height: 200px;background-color: pink;position: relative;top: 50px;left: 50px;">
    <p style="position: absolute;width: 100px;height: 100px;background-color: skyblue;top: 50px;left: 50px;"></p>
  </div>

  <script>
    // 获取定位属性
    console.log($('p').offset())
    console.log($('p').position())
    console.log($('div').position())
  </script>
</body>

操作滚动条卷走的距离

获取设置页面滚动条滚动的距离

语法：jq对象.scrollTop/Left( 可选参数 )

有参数代表设置，无参数代表查询

<body>
  <div style="height: 1000px;"></div>
  <span style="position: fixed;bottom: 50px;right: 50px;">返回顶部</span>
  <script>
    // 给整个documen添加滚动时间
    $(document).scroll(function () {
      // 打印滚出的距离
      console.log($(this).scrollTop())
    })
    // 返回顶部点击事件，把整个文档的滚动距离设置为0
    $('span').click(() => $(document).scrollTop(0))
  </script>
</body>

综合案例：固定导航和返回顶部

需求：

页面滚动到一定位置固定这个位置的元素于页面顶部，下面可以继续滚动，并且出现返回顶部按钮

当点击返回顶部按钮页面以运动方式返回顶部

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script src="./js/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    div {
      height: 50px;
      background-color: pink;
    }

    div.me {
      width: 100%;
      background-color: skyblue;
    }

    div.content {
      height: 1000px;
      background-color: #fff;
    }

    div.fixed {
      position: fixed;
      top: 0;
    }

    span {
      display: none;
      position: fixed;
      right: 50px;
      bottom: 50px;
    }
  </style>
</head>

<body>
  <!-- 顶部元素 -->
  <div>1</div>
  <!-- 滚动到me需要me固定在页面顶部 -->
  <div class="me">2</div>
  <!-- 撑开页面出现滚动条 -->
  <p>1</p>
  <p>12</p>
  <p>123</p>
  <p>1234</p>
  <p>1234451</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <p>1234456787654321</p>
  <span>返回顶部</span>

  <script>
    // 获取信号量，获取me距离整个文档顶部的距离
    const meTop = $('.me').offset().top
    // 给document添加滚动事件
    $(document).scroll(function () {
      // 判断滚动出去的距离是否大于等于me距离文档顶部的距离
      if ($(this).scrollTop() >= meTop) {
        // 如果大于，me添加类名
        $('.me').addClass('fixed')
        // 让返回顶部出现
        $('span').show()
      } else {
        // 如果不大于
        // 删除me的类名
        $('.me').removeClass('fixed')
        // 隐藏返回顶部
        $('span').hide()
      }
    })
    // 返回顶部点击事件
    $('span').click(() => {
      // 给html和body添加运动方法，500ms完成
      $('html,body').animate({
        'scrollTop': 0
      }, 500)
    })

    // 注意，返回顶部不可以直接给$（documen）,因为他没有scrollTop的css属性
    // 我们可以打印一下$（documen），可以发现$（documen）下面有一个scrollElement的滚动元素，下面有一个scrollTop的css样式
    // 所以，我们把animate添加给html或者body都可以
  </script>
</body>

</html>

综合案例：楼梯导航

需求：当页面滚动到指定楼层，右侧导航栏指定楼层高亮，并且点击导航跳到指定楼层，首层滚动到现实导航栏，否则隐藏导航栏

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>楼梯导航效果</title>
  <script src="./js/jquery.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div.ceng {
      height: 500px;
      border: solid 10px red;
      background-color: pink;
      text-align: center;
      line-height: 500px;
    }

    div.daohang {
      display: none;
      position: fixed;
      top: 50%;
      right: 20px;
      width: 50px;
      height: 250px;
      margin-top: -135px;
      background-color: #ccc;
      text-align: center;
    }

    div.daohang p {
      float: left;
      width: 50px;
      height: 50px;
      line-height: 50px;
    }

    div.daohang p.now {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <!-- // 几个楼层，1-5才是导航需要的楼层 -->
  <div class="ceng">顶楼</div>
  <div class="ceng lou">一层</div>
  <div class="ceng lou">二层</div>
  <div class="ceng lou">三层</div>
  <div class="ceng lou">四层</div>
  <div class="ceng lou">五层</div>
  <div class="ceng">底层</div>
  <!-- // 导航栏 -->
  <div class="daohang">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>

  <script>
    // 创建数组，容纳各个楼层顶部距离文档距离
    const louTop = []
    // 获取所有楼层
    const $lou = $('.lou')
    // 获取所有导航
    const $ps = $('.daohang p')
    // 把所有楼层的距离保存进数组
    $lou.each(function () {
      louTop.push($(this).offset().top)
    })
    // 给整个页面添加滚动事件
    $(document).scroll(function () {
      // 判断是否滚到第一层，如果滚到第一层，现实导航栏，否则隐藏
      if (($(document).scrollTop() >= louTop[0])) {
        $('.daohang').show()
      } else {
        $('.daohang').hide()
      }
      // for (let i = louTop.length - 1; i >= 0; i--) {
      //   if ($(document).scrollTop() >= louTop[i]) {
      //     $ps.eq(i).addClass('now').siblings().removeClass('now')
      //     break
      //   }
      // }
      // 遍历所有楼层，带一个参数i
      $lou.each(function (i) {
        // 判断页面是否滚到指定楼层，用页面滚动距离和数组中的第i项进行对比
        if ($(document).scrollTop() >= louTop[i]) {
          // 如果满足条件设置此楼层的class添加类名，并把其他兄弟元素去掉类名，这样不会出现多个楼层高亮的情况
          $(this).addClass('now').siblings().removeClass('now')
        }
      })
    })
    // 导航栏添加点击事件，点击跳转到指定楼层
    $ps.click(function () {
      // 让html/body滚动
      $('html,body').animate({
        'scrollTop': louTop[$(this).index()]
      }, 500)
    })
  </script>
</body>

</html>

补充：

$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。

avatar
文章
阅读
粉丝