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> <! ...
随机推荐
- A Proof of Golden Section of Fibonacci Sequence
Update on 2024/6/25 10:40 (UTF+8) : Add the Part Five and correct some words Hello, I'm glad to show ...
- mysql后台导入sql文件-设定字符集
需求描述:有一个user_info.sql 的文件里面都是插入user_info表的insert语句数据,数据量500M,要求快速插入mysql的数据库中. 解决方法: 1.利用客户端工具加载文件插入 ...
- c++线程--快速上手
线程创建 头文件#include thread 是在 C++11 标准中引入的. C++11 标准引入了对多线程编程的标准化支持,其中包括了线程的创建.管理和同步机制. 头文件提供了基本的线程支持库, ...
- 国产OS 中标麒麟下 C# 桌面应用开发环境搭建笔记
1.中标麒麟 7.0 x86 桌面版 默认安装创建用户时,如果没勾选 root 用户使用相同的口令,那么安装完成以后,root 是没有设置口令的,通过 sudo passwd root 输入当前普通用 ...
- 1. C#面试题 - Webservice和WebApi的区别
1. Webservice : 基于SOAP协议的,数据格式时XML,只支持http协议,不是开源的,只能部署在IIS上 2. Webapi 开源的,.net 平台
- C#查漏补缺----对象内存结构与布局
环境变量 .Net Core 8.0 Windows 11 64位 内存布局 引用类型 在.NET中,数据会按照类型分为不同的对象,对于引用类型的实例,由一个对象标头(Object Header)和方 ...
- 用于 Wi-Fi 密码破解
wpa-dictionary 用于 Wi-Fi 密码破解. Linux 篇(推荐) 1. 安装 aircrack-ng 使用相应包管理工具安装,例如 Debian/Ubuntu 使用 apt 安装: ...
- Linux查看CPU核数
**方法一:通过proc文件系统 获取cpu总数量 命令如下 ** cat /proc/cpuinfo |grep processor 方法二:nproc命令 nproc 方法三:lscpu 显示CP ...
- 【转】sqlplus/RMAN/lsnrctl 等工具连接缓慢
AIX上sqlplus /as sysdba rman target / 或者lsnrctl start时或者通过sqlplus system/oracle@orcl这样通过监听连接等方式来登陆时非常 ...
- Awesome Tools，程序员常用高效实用工具、软件资源精选，办公效率提升利器！
前言 在当今这个技术日新月异的时代,开发者只有持续学习,才能紧跟时代的浪潮.为了助力开发者在高效学习与工作中实现平衡(告别996的束缚),众多卓越且实用的开发工具应运而生,它们如同强大的助力器,极大地 ...