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> <! ...
随机推荐
- docker 修改容器内容后更新镜像的流程
在 Docker 中,如果你修改了一个容器的内容并希望将这些更改保存为一个新的镜像,可以按照以下步骤进行: docker version: 26.1 1. 确保容器运行 首先,确保你正在修改的容器是运 ...
- 【赵渝强老师】MongoDB中的索引（上）
索引是提高查询查询效率最有效的手段.索引是一种特殊的数据结构,索引以易于遍历的形式存储了数据的部分内容(如:一个特定的字段或一组字段值),索引会按一定规则对存储值进行排序,而且索引的存储位置在内存中, ...
- 【赵渝强老师】在MongoDB中使用MapReduce方式计算聚合
MapReduce 能够计算非常复杂的聚合逻辑,非常灵活,但是,MapReduce非常慢,不应该用于实时的数据分析中.MapReduce能够在多台Server上并行执行,每台Server只负责完成一部 ...
- 从0到1搭建权限管理系统系列四 .net8 中Autofac的使用（附源码）
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...
- KPTI——可以缓解“熔断” (Meltdown) 漏洞的内核新特性
Linux 内核修复办法:内核页表隔离KPTl(kernel page table isolation) 每个进程一张页表变成两张:运行在内核态和运行在用户态时分别使用各自分离的页表 Kernel页表 ...
- iOS键盘通知弹框使用小结
项目开发中文本框输入的时候经常会用到键盘弹框遮挡的问题.解决办法就是根据底部键盘弹出的高度动态的改变对应view的位置.这里以多行文本框输入为例,效果图如下. //第一步,注册监听键盘通知 [[NSN ...
- IOC注入分类 依赖注入
依赖注入 也就是服务的注入 可以理解 一些服务的容器,目的:把一些全局需要使用的资源,服务放到某个接口中,使其可以在全局中使用 和前端的状态管理工具实现的功能差不多 注册服务的三种形式 单例模式Ad ...
- log4j2配置自定义filter报错Unable to invoke factory method in class
报错Unable to invoke factory method in class com....log4j.ScheduleLoggerFilter 2020-05-13 16:32:35,613 ...
- PostgreSQL 17重磅登场——世界上最成功的数据库
朋友们,万众期待的 PostgreSQL 大版本发布又来了!这一次,PostgreSQL 17 带着全新的性能优化和开发者必备的新功能强势登场.与其说这是一场普通的更新,不如说它是一场专为高并发工作负 ...
- appium环境搭建及命令行启动sdk模拟器-附踩坑以及解决过程
安装教程这里就不阐述了,网上一大堆教程,下载完成后安装然后配置对应的环境变量即可 android sdk及java home配置: path配置: %ANDROID_HOME%\platform-to ...