• jQuery小结四

    jQuery 获取尺寸

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

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

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

    参数可以不必写单位 

    1.   <style>
    2.     div{
    3.       width: 200px;
    4.       height: 400px;
    5.       border: 8px solid #f35;
    6.       padding:4px;
    7.       margin: 24px;
    8.       box-sizing: border-box;  注意这里设置样式作用 padding border 不会撑大盒子 
    9.     }
    10.   style>
    11.  
    12. <script>
    13.  
    14.   不包含padding的值 不包含border
    15.   console.log($('div').width());   176
    16.   console.log($('div').height());  376
    17.  
    18.   包含padding的值 不包含border
    19.   console.log($('div').innerWidth()); 184
    20.   console.log($('div').innerHeight()); 384
    21.  
    22.   包含padding的值 包含border  就是盒子的正常大小
    23.   console.log($('div').outerWidth());  200
    24.   console.log($('div').outerHeight()); 400
    25.  
    26.   再多增加 margin的值
    27.   console.log($('div').outerWidth(true)); 248
    28.   console.log($('div').outerHeight(true)); 448
    29. script>

    jQuery 获取元素的位置

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

    offset 获取或设置元素偏移

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

    position() 获取元素偏移量

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <link rel="stylesheet" href="../Double%20thread/initialize.css">
    5.   <script src="jquery-3.6.0.js">script>
    6.   <meta charset="UTF-8">
    7.   <title>根据页面滚动改变一些样式title>
    8.   <style>
    9.     div{
    10.       margin: 0px auto 10px;
    11.       width: 1200px;
    12.     }
    13.     #header{
    14.       height: 240px;
    15.       background: slateblue;
    16.     }
    17.     #banner{
    18.       height: 455px;
    19.       background: #888888;
    20.       background-image: url("27.png");
    21.       background-repeat: no-repeat;
    22.  
    23.     }
    24.     #content{
    25.       height: 2468px;
    26.       background: antiquewhite;
    27.     }
    28.     #right_fixed{
    29.       position: fixed;
    30.       top: 250px;
    31.       right: 0px;
    32.       background: #548642;
    33.       width: 80px;
    34.       display: none;
    35.     }
    36.     #right_fixed p{
    37.       background: #ff3355;
    38.       color: white;
    39.       display: none;
    40.       line-height: 2;
    41.     }
    42.     #right_fixed span{
    43.       display: block;
    44.       height: 80px;
    45.       text-align: center;
    46.       line-height: 80px;
    47.       font-size: 20px;
    48.       cursor: pointer;
    49.       transition: 0.2s;
    50.     }
    51.     .map1{
    52.       width: 70%;
    53.       margin: 20px;
    54.       height: 400px;
    55.     }
    56.  
    57.     .bai{
    58.       color: white;
    59.       background: black;
    60.  
    61.     }
    62.  
    63.   style>
    64.   <script>
    65.     let flag = true
    66.     $(function () {
    67.       let conTop = $('#content').offset().top
    68.       function where(){
    69.         if ($(document).scrollTop() >= conTop){
    70.           $('p,#right_fixed').fadeIn()
    71.         }else {
    72.           $('p,#right_fixed').fadeOut()
    73.         }
    74.       }
    75.       $(window).scroll(function () {
    76.         where()
    77.         if (flag){
    78.           $('.map1').each(function (i,ele) {
    79.             if ($(document).scrollTop() >= $(ele).offset().top){
    80.               $('#right_fixed span').eq(i).addClass('bai').siblings().removeClass('bai')
    81.             }
    82.           })
    83.         }
    84.       })
    85.  
    86.       $('p').click(function () {
    87.         $('html,body').animate({
    88.           scrollTop:0
    89.         })
    90.       })
    91.  
    92.       $('#right_fixed span').click(function () {
    93.           flag = false
    94.           let dtan = $('.map1').eq($(this).index()).offset().top;
    95.           $('html,body').stop().animate({
    96.             scrollTop: dtan
    97.           },function () {
    98.             flag = true
    99.           })
    100.  
    101.         $(this).addClass('bai').siblings().removeClass('bai')
    102.  
    103.       })
    104.  
    105.     })
    106.   script>
    107. head>
    108. <body>
    109. <div id="header">div>
    110. <div id="banner">div>
    111. <div id="content">
    112.   滚动的不是document文档 而是html 和 body 元素 <br>
    113.   节流阀原理：
    114.   定义一个变量为true  点击后为false
    115.   一般再通过回调函数改回来
    116.   <div class="map1" style="background: #1e75d8">div>
    117.   <div class="map1" style="background: #ff3355">div>
    118.   <div class="map1" style="background: #ff8200">div>
    119.   <div class="map1" style="background: #0dbb5b">div>
    120. div>
    121. <div id="right_fixed">
    122.   <span class="bai">1span>
    123.   <span>2span>
    124.   <span>3span>
    125.   <span>4span>
    126.   <p>返回顶部p>
    127. div>
    128.  
    129. <script>
    130.   /** 原生 JS
    131.   let gen = document.documentElement,// doc 包含 html 根元素
    132.     banner = document.querySelector('#banner'),
    133.     p = document.querySelector('#right_fixed p'),
    134.     rrr = document.querySelector('#right_fixed'),
    135.     rrrTop = rrr.offsetTop,
    136.     bannerTop = banner.offsetTop;
    137.  
    138.   document.addEventListener('scroll',function () {
    139.     if (window.pageYOffset > bannerTop){
    140.       p.style.display = 'block'
    141.       rrr.style.position = 'fixed'
    142.       rrr.style.top = (rrrTop - bannerTop) + 'px'
    143.     }else {
    144.       p.style.display = 'none'
    145.       rrr.style.position = 'absolute'
    146.       rrr.style.top = '700px'
    147.     }
    148.   })
    149.  
    150.   p.addEventListener('click',function () {
    151.       goTop(window,0)
    152.   })
    153.  
    154.   let btn = document.querySelector("button")
    155.   btn.onclick = function () {
    156.     document.querySelector('#content').scrollIntoView({
    157.       behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
    158.       block: "start", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
    159.       inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
    160.     })
    161.  
    162.   }
    163.  
    164. // 返回顶部的函数
    165.   function goTop(obj,num,callback) {
    166.     clearInterval(obj.timeOut) // 清除以前的定时器 只保留一个定时器执行
    167.     obj.timeOut = setInterval(function () {
    168.       let step = (num - window.pageYOffset) / 10
    169.       // 取整 三元表达式 步长取为整数 正数就往大了取 负数就往小了取
    170.       step = step > 0 ? Math.ceil(step) : Math.floor(step)
    171.       if (window.pageYOffset == num){
    172.         clearInterval(obj.timeOut)
    173.         // if (callback){
    174.         //   callback()
    175.         // }
    176.         callback && callback()
    177.       }
    178.       window.scroll(0,window.pageYOffset + step)
    179.     },15)
    180.   }**/
    181. script>
    182. body>
    183. html>

  • 相关阅读:
    无法将RELEASE.pom上传到nexus的解决办法
    nginx部署web项目（跟着搞不出来，来砍我）
    【软件安装】ubuntu+CGAL+QT可视化+draw_triangulation_2+draw_triangulation_3
    真菌基因组研究高分策略（一）：比较基因组揭示真菌菌丝和多细胞的起源
    搜题公众号搜题功能系统搭建教程
    DJYOS驱动开发系列一：基于DJYOS的UART驱动编写指导手册
    【C语言】模拟实现内存函数
    vue2引入wangEditor5富文本编辑器
    8月23日计算机视觉理论学习笔记——图像检索
    【8. 调度算法】
  • 原文地址：https://blog.csdn.net/benlalagang/article/details/126194551