jQuery中宽、高、位置和滚动条总结
来源:互联网 发布:多少人得空调病 数据 编辑:程序博客网 时间:2024/06/06 12:35
js中各种宽高令人头疼,相反,jQuery中则精简了不少。
宽、高
jQuery中获取宽高,最经典的就是width()和height()。因为CSS盒子模型的缘故,元素的宽高分为很多。以下以获取元素的宽为例:
$("div").width(); //内容的宽$("div").innerWidth(); //内容的宽 + 左内边距 + 右内边距$("div").outerWidth(); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框$("div").outerWidth(true); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
对于元素的高是同样的道理。
同时需要注意的是,$(window)代表浏览器窗口,通过$(window).height()获取的是浏览器窗口的高,如果调整浏览器的高度,则其值会变。
$(document)代表HTML文档,通过$(document).height()获取的是整个文档的高,如果调整浏览器的高度,则其值不会变。
1.对于$(window)和$(document)来说,他们的width()、innerWidth()和outerWidth()的值都是一样的。
2. width()和css(“width”)的区别在于,后者获取的值带有单位
位置
jQuery中,与元素位置相关的有两个函数:offset()和position()。
这两个函数都返回一个对象,这个对象中含有两个属性:left和top。
这两个函数不同点在于,offset是元素相对于文档的位置,而position是元素相对于其含有position属性的最近祖先元素的位置。
$("div").offset().left; //元素相对于HTML文档左边的距离$("div").position().left; //元素相对于其含有position属性的最近祖先元素左边的距离
滚动条
主要有两个函数scrollTop()和scrollLeft()。
对于普通元素来说,scrollTop()就是该元素滚动上去的距离,对于$(window)来说,就是整个网页滚动上去的距离。
$("div").scrollTop(); $(window).scrollTop();
举例1 可视区域加载
当页面滚动到元素所在位置时,再进行一些动作,比如执行动画,加载图片。这是怎么实现的呢?
其实很简单,只要$(window).scrollTop() + $(window).height()的和大于$(“div”).offset().top就行了。
$(window).scroll(function(){ var flag = ($(window).scrollTop() + $(window).height()) > $("div").offset().top; if(flag){ //do something }});
举例2 滚动到底部自动加载
经常在网页中看到,当页面滚动到底部时,页面自动加载,这是怎么实现的呢?
其实判断页面是否滚动到底部,很简单,只要$(window).height() + $(window).scrollTop() 的和大于$(document).height()就行了。
前面已经说了,window和document是不同的,window指的是浏览器窗口,而document指的是HTML文档。
$(window).scroll(function(){ var flag = ($(window).height() + $(window).scrollTop()) > $(document).height(); if(flag){ //加载新数据 }});
- jQuery中宽、高、位置和滚动条总结
- jquery滚动条滚动的指定位置
- jquery中获取元素的位置和宽高
- ClistCtrl中滚动条位置自动滚动
- jquery获取滚动条高度和位置,JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- jquery中点击某元素后滚动条滚动到某元素位置或底部
- jQuery实现将div中滚动条滚动到指定位置的方法
- [jquery] 简单判断滚动条位置
- jQuery获取元素位置、滚动条高度
- jQuery实现定位滚动条位置
- Jquery怎么获取元素文档大小、偏移、位置和滚动条位置
- jquery 滚动条 scroll 和 animate出现的问题总结
- jquery操作滚动条滚动到指定位置
- LeetCode 22 Generate Parentheses
- Vladik and Courtesy
- linux crontab 重复执行
- Android 分享
- 安卓实用工具
- jQuery中宽、高、位置和滚动条总结
- lcd参数解释及计算
- APK空包签名
- Android主题与Toolbar样式之间的关系
- Eclipse导入git上的maven web项目 部署
- caffe:math_functions 分析
- 初始化列表
- 虚拟机liunx 配置静态ip地址
- Leetcode 54 Spiral Matrix