jQuery的position()方法详解
position()方法的定义和用法:
此方法获取匹配元素相对某些元素的偏移量。
返回的对象包含两个整型属性(top和left)的对象。
此方法只对可见元素有效。
语法结构:
$(selector).position()
在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量。很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位。方法的偏移量参考原则如下:
1.如果父辈元素中没有采用定位的(position属性值为relative、absolute或者fixed),那么偏移量参考对象为窗口。
2.如果父辈元素中有采用定位的,那么偏移量的参考对象为距离它最近的采用定位的元素,
实例代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="text/css"> *{ margin:0px; padding:0px; } .father{ background-color:green; width:200px; height:200px; padding:50px; margin-bottom:50px; margin-left:100px; } .children{ height:150px; width:150px; background-color:red; line-height:150px; text-align:center; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".children").each(function(){ var text; text="left:"+$(this).position().left; text+="top:"+$(this).position().top; $(this).text(text); }) }) </script> </head> <body> <div class="father" style="position:relative"> <div class="children"></div> </div> <div class="father"> <div class="children"></div> </div> </body> </html>
在以上代码中顶部组合,由于父元素采用的是相对定位,那么获取的偏移量就是相对于父元素的。在底部的组合中,由于父元素没有采用定位,那么偏移量参考对象就是窗口。
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关推荐
-
jQuery.position()方法获取不到值的安全替换方法
调用jQuery.position()方法会返回相对于父元素的位置,jQuery官方文档中描述说,它跟.offset()方法不一样,.offset()返回的是相对于document的位置,而.position()返回的是相对于父元素的位置. 但事实上,在使用的过程中,我们发现.position()返回的值经常是0.但事实不是0.尤其是谷歌浏览器和IE浏览器里.火狐浏览器没有此问题. 究其原因,以基于Webkit的浏览器(谷歌浏览器和Safari浏览器)为例,只有当元素(图片.flash等)完全加
-
jQuery position() 函数详解以及jQuery中position函数的应用
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse
-
jQuery中position()方法用法实例
本文实例讲述了jQuery中position()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.
-
Jquery中offset()和position()的区别分析
本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 例如: <!DOCTYPE html> <html> <head> <style> p { margin-left
-
jQuery Position方法使用和兼容性
1.position方法 jquery api地址:http://jquery.cuishifeng.cn/position.html position方法获取匹配元素相对父元素的偏移. 2.说明 2.1 与offset()区别 .offset()是获得该元素相对于documet的当前坐标 .position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素. 2.2 值计算 .元素本身所占用的边框,边距和填充的大小不计. .父元素的边框和边距不计,父元素的填
-
Jquery中的offset()和position()深入剖析
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 复制代码 代码如下: // Get *real*
-
jQuery的position()方法详解
position()方法的定义和用法: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.方法的偏移量参考原则如下: 1.如果父辈元素中没有采用定位的(position
-
jQuery的ready方法详解
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function() { //取消事件监听,执行ready方法 if ( document.addEventListener ) {
-
JQuery ZTree使用方法详解
JQuery ZTree简单使用 @(JavaScript)[jQuery, ztree, 入门] 基本概述 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. zTree 是开源免费的软件(MIT 许可证).在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更
-
jQuery 遍历map()方法详解
一.定义和用法 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 二.语法 .map(callback(index,domElement)) 三.详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组 四.案例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>
-
使用jQuery和ajax代替iframe的方法(详解)
iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的.其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过. 目前主流的应用都使用了ajax代替了iframe. html: <ul class="nav navbar-nav" id="indexMenu"> <li><a target=&quo
-
jquery 键盘事件的使用方法详解
jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); 2. keyup(); 3. keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按
-
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解 1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">&l
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
-
jquery 遍历数组 each 方法详解
JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="
随机推荐
- AngularJS ui-router (嵌套路由)实例
- shell脚本编程之循环语句学习笔记
- JavaScript ES6中export、import与export default的用法和区别
- java解压zip文件示例
- 2种简单的js倒计时方式
- 浅谈javascript中onbeforeunload与onunload事件
- mysql错误处理之ERROR 1665 (HY000)
- JavaScript实现标题栏文字轮播效果代码
- JavaScript Event学习第六章 事件的访问
- 彻底删除thinkphp3.1案例blog标签的方法
- Shell脚本实现根据文件的修改时间来分类文件
- 关于H1的位置解析
- 使用仙剑奇侠传四算号器不小心中了广告插件的解决办法
- SQL Server将一列的多行内容拼接成一行的实现方法
- bootstrap模态框示例代码分享
- JavaScript实现按键精灵的原理分析
- 巧改注册表来增强网络功能—注册表使用全攻略之五
- 详解C++编程中一元运算符的重载
- vue实现仿淘宝结账页面实例代码
- JS实现的邮箱提示补全效果示例