jQuery常用API（六）

最新推荐文章于 2023-05-10 11:19:16 发布
最新推荐文章于 2023-05-10 11:19:16 发布
阅读量237 收藏 1
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45659764/article/details/124768863
版权
本文详细介绍了如何使用jQuery进行元素的尺寸（width(), height(), innerWidth(), outerWidth()等）测量和设置，以及position()、offset()和scrollTop()/scrollLeft()方法来处理元素位置。实例演示了如返回顶部按钮和品优购电梯导航的实现。
摘要由CSDN通过智能技术生成

目录

7. jQuery尺寸、位置操作

7.1 jQuery尺寸

7.2 jQuery位置

1.offset()设置或获取元素偏移

 2. position()获取元素偏移

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

 案例：带有动画的返回顶部

案例：品优购电梯导航

 

7. jQuery尺寸、位置操作

7.1 jQuery尺寸

语法用法
width() / height()取得匹配元素宽度和高度值 只算width / height
innerWidth() / innerHeight()取得匹配元素宽度和高度值，包括padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true) / outerHeight(true)

取得匹配元素宽度和高度值，包含padding、border、margin

  • 以上参数为空，则是获取相应值，返回的是数字型
  • 如果参数为数字，则是修改相应值
  • 参数可以不必写单位
<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            $("div").width(300);
        })
    </script>
</body>

 

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
        
            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());
        })
    </script>
</body>

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
        
            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

           

        })
    </script>
</body>

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
        
            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));

        })
    </script>
</body>

                                                

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div></div>
    <script>
        $(function () {
            $("div").outerWidth(100);
        })
    </script>
</body>

 使用$("div").outWidth(100)，将border+padding+width的值改为了100px，但是border、padding值固定，一共50px，所以width值变为了50px

7.2 jQuery位置

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

1.offset()设置或获取元素偏移

（1）offset()方法这是或返回被选元素相对于文档的偏移坐标，跟父级没有关系，得到的是一个对象

（2）该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

（3）可以设置元素的偏移：offset({top:10,left:30})

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;

        }
    </style>
    <script src="jquery.min.js"></script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().left);
        })
    </script>
</body>

 

 如果设置了定位，还修改了子盒子的偏移量，会发现子盒子相对于父盒子的定位对子盒子的偏移量没有影响：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 20px;

        }
    </style>
    <script src="jquery.min.js"></script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
            // 1. 获取设置距离文档的位置（偏移） offset
             $(".son").offset({
                left: 200,
                top: 200
            });
            console.log($(".son").offset());
        })
    </script>
</body>

 

 2. position()获取元素偏移

（1）position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

（2）这个方法只能获取不能设置

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 20px;

        }
    </style>
    <script src="jquery.min.js"></script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function () {
             // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            console.log($(".son").position());
        })
    </script>
</body>

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

 

（1）scrollTop()方法设置或返回被选元素被卷去的头部

（2）scrollTop(值)设置被选元素被卷去的头部

<style>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function () {
            $(document).scrollTop(200); //使页面一开始就位于距离文档200px的位置
            // 页面滚动事件
            $(window).scroll(function () {
                if ($(document).scrollTop() >= $(".container").offset().top) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
        })
    </script>
</body>

 

 案例：带有动画的返回顶部

 注意：

只能给元素做动画 ，不能给文档document做动画，所以给body和html添加动画效果

 <style>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function () {
            $(document).scrollTop(200); //使页面一开始就位于距离文档200px的位置
            // 页面滚动事件
            $(window).scroll(function () {
                if ($(document).scrollTop() >= $(".container").offset().top) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function () {
                $("body,html").stop().animate({  //stop()动画停止排队                    scrollTop: 0
                });
            });
        })
    </script>
</body>

案例：品优购电梯导航

--------------------------------------------------显示隐藏电梯导航-------------------------------------------------------

 步骤：

  1. 给窗口绑定滚动事件
  2. 如果文档滚动的距离大于等于今日推荐模块距离文档顶部的距离，就显示导航模块
  3. 如果小于，就隐藏导航模块

$(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() >= $(".recommend").offset().top) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
    });
})

----------------------------------------------------点击滚动到目标位置--------------------------------------------------

步骤：

  1. 把电梯导航中的所有盒子获取过来，绑定点击事件
  2. 每点击电梯导航中的一个小盒子的时候，就获取到它的index
  3. 通过index找到内容区域中的对应元素，获取到它距离文档顶部的距离
  4. 给页面元素（body,html）设置动画效果，使页面滚动的距离作为步骤3得到的距离 

 注意：

1.电梯导航和内容区域是一一对应的，点击电梯导航对应的盒子，返回点击的盒子对应的index，然后根据index去选择内容区域中的第几个盒子，页面要滚动去的距离就是被选中的内容区域的盒子距离文档顶部的距离（offset().top）

 // 2.点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function () {
        // console.log($(this).index());
        // 页面要滚动到的距离
        var des = $(".floor .w").eq($(this).index()).offset().top;
        $("body,html").stop().animate({
            scrollTop: des
        });
    });

一条咸鱼o*v*o
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery笔记
liufengxian3399的博客
10-08 283
1、jQuery简介 1.1 jQuery概念 jQuery是一个兼容多浏览器的、轻量级的JavaScript库 jQuery，顾名思义，也就是JavaScript和查询（Query），如今，jQuery已经成为最流行的JavaScript库 其宗旨是 ——WRITE LESS,DO MORE （写的少，做的多） 1.2 jQuery作用 HTML元素选取(选择器) HTML元素操作 CSS操作 HTML事件处理 JS动画效果 链式调用 读写合一 浏览器兼容 易扩展插件 ajax封装 等。
jQuery 中console.log什么意思
u014704496的专栏
05-29 6014
您好！您说的这个是一个日志文件，控制台日志。这个是浏览器的函数，如果你使用firefox并且装有firebug插件，当使用console.log(……)时，会把括号内的字符串输出到控制台，当然，在IE中这个是没有的，要报错。相同的还有console.info(……),console.debug(……)，区别是有些能通过控制台的输出点进去对应的语句。 希望对您有帮助！
jQuery语法整理
weixin_45955339的博客
07-23 244
jQuery概念 jQuery 是一个快递的、简介的javascript库，其设计的宗旨是 write less，Do More，即倡导写更少的代码，做更多的事情 jQuery封装了 javascript常用的功能代码，优化了DOM操作、事件处理、动画和Ajax交互 优点 1、轻量级、核心文件才几十kb，不会影响页面加载的速度 2、跨浏览器兼容，基本兼容了现在主流的浏览器 3、链式编程、隐式迭代 4、对事件、样式、动画支持，大大简化了DOM操作 5、支持插件扩展开发，有着丰富的第三方插件 6、免费、开源 j
JQuery
yhwl66的博客
05-10 151
jquery是一个轻量级的JavaScript库，它对应原生的js进行了封装，将对应的dom操作及对应的动画等做了一系列的方法封装，里面所有的内容都是方法。它的核心是链式调用及对应的jquery对象的扩展。$.extend自定义原型函数//静态方法扩展 $ . extend({console . log('hello') } }) $ . sayHello() //原型方法扩展 $ . fn . extend({
三、jQuery属性操作
小康博客
06-15 287
jQuery内容选择器 为了方便测试，先将DOM元素写为以下格式： <div></div> <div>我是div</div> <div>我是div123</div> <div><span></span></div> <div><p></p></div> :empty找到既没有文本内容也没有子元素的指定元素。 这个选择器对于以上内容只能找
jquery api 3.2.1
11-14
《jQuery API 3.2.1详解：解锁前端开发新高度》 jQuery，这款轻量级的JavaScript库，自2006年发布以来，便以其简洁的语法和强大的功能深受开发者喜爱。本文将深入探讨jQuery API 3.2.1版本中的关键知识点，帮助...
jQuery常用API操作.pptx
10-30
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do ...
jQueryAPI中文手册3.1.rar
07-15
《jQuery API 中文手册 3.1》是一个针对jQuery库的详细参考文档，旨在帮助中文用户更好地理解和使用这个广泛应用于Web开发的JavaScript框架。jQuery以其高效、易用和丰富的功能特性，深受开发者喜爱。这份手册提供了...
jQuery API文档
01-15
jQuery API文档。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。...
jQuery常用api手册大全
06-20
**jQuery API 大全** jQuery 是一款广泛应用于前端开发的JavaScript库，以其简洁的语法和强大的功能深受开发者喜爱。这个API手册大全包含了多个版本及专题的jQuery知识，旨在帮助开发者深入理解和熟练运用jQuery。 ...
jquery.log.js:JQuery 的 console.log 包装器
06-26
jQuery console.log() 包装器 jQuery logger 是一种工具，可以通过关联的 jQuery 元素不显眼地触发 console.log 消息。 可以在不删除的情况下为开发/生产打开/关闭此代码。 记录器支持多个日志级别、分组消息和回溯。 用法 通过将 jQuery 记录器包含到链中，以不显眼的方式将信息记录到关联元素 $ ( 'div.title' ) . show ( ) . log ( 'Title displayed' ) ; 这将输出包含 jQuery 元素作为关联元素的console.log消息 通过首先使用参数散列调用$.log函数来扩展默认设置 $ . log ( { /* activate the logger */ active : true , /* outputs console.trace() after the log
js-day20 jq第一天
ILove_bugs的博客
10-15 91
jQuery 介绍 jquery: js的工具库 事件处理 文档的处理 动画 唯一变量 $ jQuery 强大的选择器 开源 完善的文档 ... jquery: \1. 官网: \2. cdn: jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源
扩展jquery 实现增强版console.log方法
Y_东东的博客
11-29 4225
1.console.log()方法在打印原始类型变量的时候会正常的输出，如string,number...，在输出对象类型的时候就会得到 [object Array]或[object Object],这时候就需要使用JSON.stringify()进行数据格式转换； 2.扩展jquery方法实现打印不同类型的数据 $.extend({     log:function(message){   ...
jQuery 尺寸操作 与 位置操作 【后附本章案例】
weixin_52212950的博客
05-07 1482
🧡🧡🧡 原生 JS 学习中，我们学会了使用 offset 来获取元素距离 父元素（有定位的父元素） 或 文档元素 上（offsetLeft）左（offsetTop）的距离，还学会了使用 offsetWidth 来获取元素的尺寸，以及 scroll 事件中的scrollTop 卷上去头部尺寸的方法等等。jQuery 里也封装了一系列方法来完成 元素尺寸 以及 位置 的操作，学会了这个，我们便可以使用 jQuery 来完成以前用原生 JS 写过的京东放大镜，以及电梯导航等案例啦，大家下面跟我一起学习看看吧！..
jQuery 学习笔记 黑马
HGKIVD的博客
10-31 232
jQuery学习笔记
jquery对象和javascript对象的console.log结果
weixin_30555753的博客
08-17 269
array.push($("div").children("label")); console.log(array); 输出： 这个是jquery对象，如果在选择器后面加上.get(0)，就会转为javascript对象 array.push($("div").children("label").get(0)); console.log(array); ...
jQuery console.log当前函数名称
04-14 273
下面是一些快速的JavaScript代码片段，找出并在JavaScript中记录当前的函数名 。 //way 1 var fName = arguments.callee.toString(); console.log(fName); fName = fName.substr('function '.length); console.log(fName); fName = fName.subs...
console.log 用法
weixin_45677987的博客
02-19 1990
console.log()| 作用： 前端调试js 代码的时候： 使用alert 调试。 但是alert 会阻断js 的执行。 而且对一些类型的变量无法输出。造成一些不必要麻烦。 console.log(): 定义： console.log () 可以将变量输入到浏览器控制台中，方便开发者调试代码： 使用频率很高的功能。 console.log(var); var: 数据类型： var: 可以是变量， 数组类型， 对象类型， 或者字符串类型。 ...
jQuery常用的API
最新发布
05-18
1. 选择器：常用的选择器有ID选择器、类选择器、...6. 插件开发：jQuery提供了丰富的插件接口，可以方便地开发插件，扩展jQuery的功能。 7. 工具函数：包括类型判断、遍历、数组操作、字符串操作等常用的工具函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值