jQuery 元素信息
先贴出元素模型信息
1.获取内容区大小
- css()：返回值是带单位的（getComputedStyle(node).width）
<script>
$(function(){
console.log($("div").css("width")) //200px
console.log($("div").css("height")) //200px
})
</script>
- width() / height()：返回值不带单位
<script>
$(function(){
console.log($("div").width()) //200
console.log($("div").height()) //200
})
</script>
2.获取内容区+内边距大小
- innerWidth()/innerHeight()：返回的元素 内容区+内边距 的大小，不带单位
<script>
$(function(){
console.log($("div").innerWidth()) //240
console.log($("div").innerHeight()) //240
})
</script>
3.获取内容区+内边距+边框大小
- outerWidth()/outerHeight()：返回的元素 内容区+内边距+边框 的大小，不带单位
<script>
$(function(){
console.log($("div").outerWidth()) //260
console.log($("div").outerHeight()) //260
})
</script>
- 如果传入参数true,则返回结果中追加 外边距 的大小，即（内容区+内边距+边框+外边距）
<script>
$(function(){
console.log($("div").outerWidth(true)) //646
console.log($("div").outerHeight(true)) //300
})
</script>
4.元素的位置信息
- position()：返回元素相对于父级定位元素的距离信息，返回值数据格式是对象
- 注意：查找最近的父级定位元素，如果没有，则以body标签为准
<body>
<div id="box">定位父元素
<div class="item">非定位元素
<div class="child">当前元素</div>
</div>
</div>
</body>
<script>
$(function(){
console.log($(".child").position())
//{top: 87, left: 120}
})
</script>
- offset()：返回当前元素相对于document顶部的绝对距离信息，返回值数据格式是对象（如果body有滚动条，要加上被body滚动条隐藏的距离）
<script>
$(function(){
console.log($(".child").offset()) //{top: 157, left: 283}
})
</script>
- scrollLeft()/scrollTop()：获取或设置滚动距离（当前元素必须有滚动条）
//获取被滚动条卷去的宽度和高度
$('.box').scrollLeft();
$('.box').scrollTop();
//设置滚动条位置（页面回到顶部）
$(window).scrollLeft(0);
$(window).scrollTop(0);
5.获取同级元素索引值
- index()：返回当前元素在其兄弟元素中的索引值
<div class="box">
<p>1</p>
<div class="item">2</div>
<p>3</p>
</div>
console.log($('.item').index()); //1
jQuery 元素信息的更多相关文章
- 深入学习jQuery元素过滤
× 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...
- jquery元素插入、删除、清空
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取
获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML var $shadow = new Object(); /** 获取 ...
- JQuery元素获取
前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...
- jquery元素定位方法
用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的 ...
- uiautomatorviewer 可以查看到android中的web 元素信息
以知乎社区账号登录使用微博账号为例,使用uiautomatorviewer 可以定位到登录框.密码框,需要结合appium的inspector 1.genymotion 模拟器开启,模拟器安卓系统为4 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- 获取APP的元素信息和Activity
一.获取元素信息 (1)第一种方法是,在windows命令行中输入uiautomatorviewer.bat(前提是已配置好Android SDK环境),按回车键:等待几秒后会打开UI Automat ...
- jquery元素插入、删除、清空、找父子级元素
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
随机推荐
- C# and TypeScript – Enum Flags
前言 以前就有提过 Enum Flags,但平日不常用.最近翻 Angular 源码,发现它很多地方用到,而且没有封装语义代码.一堆符号真的看不惯啊... 于是又去复习了一遍,熟悉熟悉.顺便写一篇做记 ...
- Google Analytics – GA4 & Tag Manager 概念篇
前言 当我们设计好网站或者 App 后, 我们要怎样知道这个产品用户是否满意呢? 如果发掘潜在的提升空间呢? 等用户反馈? 投诉? 显然不是上策, 更好的方式是观察. 身为一个产品经理, 我只要看着你 ...
- 五行八字在线排盘api接口免费版_json数据格式奥顺互联内部接口
「八字在线排盘」谁都想知道自己一生中的事业.财运.婚姻.功名.健康.性格.流年运程将是怎样,通过八字排盘,四柱八字排盘会有你想知道的答案.一个人出生的年月时天干地支的排列组合(即八字)就是命.不过仅凭 ...
- 4.3 等比数列及其前n项和
\(\mathbf{{\large {\color{Red} {欢迎到学科网下载资料学习}} } }\)[[高分突破系列] 高二数学下学期同步知识点剖析精品讲义! \(\mathbf{{\large ...
- 使用 vuex 和 本地存储实现永久性token存在 并且在请求拦截统一添加headers token 避免重复代码
在 vuex 仓库中设置state的token值:从本地中取值: 登录的时候调用唯一可以修改state数据的mutations方法设置token : export default new Vuex.S ...
- 前端 vue.config.js 处理跨域问题 proxy 代理
问: 业务中的跨域问题是如何解决的? 这个的话我们公司⼤概分了俩种环境,⼀种是开发的时候,⼀种是上⽣产的时候,开发的时候因为要对 接的后端可能会⽐较多,他们配置不太⽅便,这个时候采取的是⽐较⽅便的前端 ...
- 1.flask 源码解析：简介
目录 一.flask 源码解析:简介 1.1 flask 简介 1.2 两个依赖 1.2.1 werkzeug 1.2.2 Jinja2 1.3 如何读代码 Flask 源码分析完整教程目录:http ...
- 深入浅出 Kubernetes 项目网关与应用路由
KubeSphere 项目网关与应用路由提供了一种聚合服务的方式,将集群的内部服务通过一个外部可访问的 IP 地址以 HTTP 或 HTTPs 暴露给集群外部.应用路由定义了这些服务的访问规则,用户可 ...
- SpringBoot数据访问，配置数据源
配置文件目录 配置数据源jdbc版本 JDBC(.tomcat.jdbc.pool.DataSource作为数据源) <?xml version="1.0" encoding ...
- vue数据异步加载！坑
"Error in render: "TypeError: Cannot read property '0' of undefined""渲染错误问题 搭建项目 ...