jQuery小结四

最新推荐文章于 2024-07-20 10:36:53 发布

benlalagang

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量227

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/benlalagang/article/details/126194551

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery 获取尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值只计算内部
innerWidth() / innerHeight()	取得匹配元素宽度和高度值包含 padding
outWidth() / outHeight()	取得匹配元素宽度和高度值包含 padding border
outWidth(true) / outHeight(true)	取得匹配元素宽度和高度值包含 padding border margin

以上参数为空，返回的就是对应的值，返回的是数字类型

如果参数为数字，则是修改相应值

参数可以不必写单位

  <style>
    div{
      width: 200px;
      height: 400px;
      border: 8px solid #f35;
      padding:4px;
      margin: 24px;
      box-sizing: border-box;  注意这里设置样式作用 padding border 不会撑大盒子 
    }
  </style>

<script>

  不包含padding的值 不包含border
  console.log($('div').width());   176
  console.log($('div').height());  376

  包含padding的值 不包含border
  console.log($('div').innerWidth()); 184
  console.log($('div').innerHeight()); 384

  包含padding的值 包含border  就是盒子的正常大小
  console.log($('div').outerWidth());  200
  console.log($('div').outerHeight()); 400

  再多增加 margin的值
  console.log($('div').outerWidth(true)); 248
  console.log($('div').outerHeight(true)); 448
</script>

jQuery 获取元素的位置

位置主要有三个：offset() position() scrollTop() / scrollLeft()

offset 获取或设置元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性left,top, offset().top用于获得元素距离文档顶部的距离，offset().left 用于获取元素距文档左侧的距离
可以设置元素的偏移量：offset({top:10,left:30})

position() 获取元素偏移量

position() 方法用于返回元素相对于带定位的父元素偏移坐标，如果父元素都没有定位，则以文档为准 position()方法只能获取不能设置

scrollTop() / scrollLeft() 设置或获取元素被卷去的头部或左侧

侧导航显示隐藏&&切换页面位置的案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="../Double%20thread/initialize.css">
  <script src="jquery-3.6.0.js"></script>
  <meta charset="UTF-8">
  <title>根据页面滚动改变一些样式</title>
  <style>
    div{
      margin: 0px auto 10px;
      width: 1200px;
    }
    #header{
      height: 240px;
      background: slateblue;
    }
    #banner{
      height: 455px;
      background: #888888;
      background-image: url("27.png");
      background-repeat: no-repeat;

    }
    #content{
      height: 2468px;
      background: antiquewhite;
    }
    #right_fixed{
      position: fixed;
      top: 250px;
      right: 0px;
      background: #548642;
      width: 80px;
      display: none;
    }
    #right_fixed p{
      background: #ff3355;
      color: white;
      display: none;
      line-height: 2;
    }
    #right_fixed span{
      display: block;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }
    .map1{
      width: 70%;
      margin: 20px;
      height: 400px;
    }

    .bai{
      color: white;
      background: black;

    }

  </style>
  <script>
    let flag = true
    $(function () {
      let conTop = $('#content').offset().top
      function where(){
        if ($(document).scrollTop() >= conTop){
          $('p,#right_fixed').fadeIn()
        }else {
          $('p,#right_fixed').fadeOut()
        }
      }
      $(window).scroll(function () {
        where()
        if (flag){
          $('.map1').each(function (i,ele) {
            if ($(document).scrollTop() >= $(ele).offset().top){
              $('#right_fixed span').eq(i).addClass('bai').siblings().removeClass('bai')
            }
          })
        }
      })

      $('p').click(function () {
        $('html,body').animate({
          scrollTop:0
        })
      })

      $('#right_fixed span').click(function () {
          flag = false
          let dtan = $('.map1').eq($(this).index()).offset().top;
          $('html,body').stop().animate({
            scrollTop: dtan
          },function () {
            flag = true
          })

        $(this).addClass('bai').siblings().removeClass('bai')

      })

    })
  </script>
</head>
<body>
<div id="header"></div>
<div id="banner"></div>
<div id="content">
  滚动的不是document文档 而是html 和 body 元素 <br>
  节流阀原理：
  定义一个变量为true  点击后为false
  一般再通过回调函数改回来
  <div class="map1" style="background: #1e75d8"></div>
  <div class="map1" style="background: #ff3355"></div>
  <div class="map1" style="background: #ff8200"></div>
  <div class="map1" style="background: #0dbb5b"></div>
</div>
<div id="right_fixed">
  <span class="bai">1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <p>返回顶部</p>
</div>

<script>
  /** 原生 JS
  let gen = document.documentElement,// doc 包含 html 根元素
    banner = document.querySelector('#banner'),
    p = document.querySelector('#right_fixed p'),
    rrr = document.querySelector('#right_fixed'),
    rrrTop = rrr.offsetTop,
    bannerTop = banner.offsetTop;

  document.addEventListener('scroll',function () {
    if (window.pageYOffset > bannerTop){
      p.style.display = 'block'
      rrr.style.position = 'fixed'
      rrr.style.top = (rrrTop - bannerTop) + 'px'
    }else {
      p.style.display = 'none'
      rrr.style.position = 'absolute'
      rrr.style.top = '700px'
    }
  })

  p.addEventListener('click',function () {
      goTop(window,0)
  })

  let btn = document.querySelector("button")
  btn.onclick = function () {
    document.querySelector('#content').scrollIntoView({
      behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
      block: "start", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
      inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
    })

  }

// 返回顶部的函数
  function goTop(obj,num,callback) {
    clearInterval(obj.timeOut) // 清除以前的定时器 只保留一个定时器执行
    obj.timeOut = setInterval(function () {
      let step = (num - window.pageYOffset) / 10
      // 取整 三元表达式 步长取为整数 正数就往大了取 负数就往小了取
      step = step > 0 ? Math.ceil(step) : Math.floor(step)
      if (window.pageYOffset == num){
        clearInterval(obj.timeOut)
        // if (callback){
        //   callback()
        // }
        callback && callback()
      }
      window.scroll(0,window.pageYOffset + step)
    },15)
  }**/
</script>
</body>
</html>