jquery操作元素的位置
.offset()
在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。
.offset() 这个不接受任何参数。
var offset = p.offset(); //获取到这个元素的位置
p.html( "left: " + offset.left + ", top: " + offset.top ); offset.left 元素距左面的距离, .offset.top 元素距上面的距离
如果元素设置的是visibility:hidden; 可以获取到坐标,
如果元素设置的是 display:none; 位置值是 undefined;
.offset(coordinates)
coordinates 一个包含top 和 left 属性的对象,用整数指明元素的新顶部和左边坐标。
.offset(function(index,coords))
返回用于设置坐标的函数。
$("p:last").offset({ top: 10, left: 30 }); 设置最后一个p元素的位置。
.offsetParent();
取得离指定元素最近的含有定位信息的元素, css position 属性是 relative absolute, 或fixed。
.offsetParent() 这个元素不接受任何参数。
$('li.item-a').offsetParent().css('background-color', 'red');
.position()
获取到匹配元素中第一个元素的当前坐标
.position() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。包含 top 和 left 注,不支持获取隐藏元素的便宜的坐标
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
.scrollLeft()
获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离。
.scrollLeft() 这个方法不接受任何参数。
$("p:last").text( "scrollLeft:" + p.scrollLeft() ); 获取p 元素的 横向滚动条距离。
.scrollLeft(value)
设置每一个匹配元素的水平滚动条的距离。
$("div.demo").scrollLeft(300);
.scrollTop()
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。
.scrollTop() 这个方法不接受任何参数。
$("p:last").text( "scrollTop:" + p.scrollTop() ); 获取p 元素的垂直滚动条距离。
.scrollLeft(value)
设置每一个匹配元素的垂直滚动条的距离。
$("div.demo").scrollLeft(300);
jquery操作元素的位置的更多相关文章
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- jQuery操作元素的class属性
今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- JQuery操作元素的属性与样式及位置
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
随机推荐
- SETI ACdream - 1430 后缀自动机求不相交子串
http://blog.csdn.net/gatevin/article/details/45875343 题目是求不重叠的不同子串个数 一般来说, endpos集合包含了子串结尾位置,结尾在&quo ...
- IO流等学习笔记
1.为什么日期的开始是从1970年0101开始记录,计算机的日期记录是现在的时间距1970年的时间,可正可负.? 2.引用类型默认都为null,基本数据类型为0,除基本数据类型外所有的都为引用数据类型 ...
- php防止重复提交问题总结
用户提交表单时可能因为网速的原因,或者网页被恶意刷新,致使同一条记录重复插入到数据库中,这是一个比较棘手的问题.我们可以从客户端和服务器端一起着手,设法避免同一表单的重复提交. 1.使用客户端脚本 提 ...
- ASP.NET Core后台任务
之前在控制台程序中学习如何运行后台任务,ASP.NET Core中其实也有同样的方法BackgroundService,本以为跟HostedService没有区别,毕竟BackgroundServic ...
- JDBC之Java连接mysql实现增删改查
使用软件:mysql.eclipse 链接步骤: 1.注册驱动 2.创建一个连接对象 3.写sql语句 4.执行sql语句并返回一个结果或者结果集 5.关闭链接(一般就是connection.stat ...
- one + two = 3
读入两个小于100的正整数A和B,计算A+B.需要注意的是:A和B的每一位数字由对应的英文单词给出. 输入 测试输入包含若干测试用例,每个测试用例占一行,格式为"A + B =", ...
- 【起航计划 025】2015 起航计划 Android APIDemo的魔鬼步伐 24 App->Notification->Notifying Service Controller service中使用Notification
这个例子介绍了如何在Service中使用Notification,相关的类为NotifyingController和NotifyingService. 在Service中使用Notification的 ...
- 前端怎样学习react
这是一个很长的话题.....慢慢写
- 项目01-nginx模块
项目01-nginx模块 1.nginx介绍 nginx是一款高性能web服务器和反向代理服务器,在互联网项目中使用非常频繁,尤其其出色的性能以及轻量级进程占用,已经超过了apache的httpd服务 ...
- 中兴ZXR10 6905核心交换机配置案例
Connecting to 192.168.0.254:23...Connection established.To escape to local shell, press 'Ctrl+Alt+]' ...