先贴出元素模型信息

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 元素信息的更多相关文章

  1. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

  2. jquery元素插入、删除、清空

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  3. 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取

    获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML  var $shadow = new Object(); /** 获取 ...

  4. JQuery元素获取

    前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...

  5. jquery元素定位方法

    用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的 ...

  6. uiautomatorviewer 可以查看到android中的web 元素信息

    以知乎社区账号登录使用微博账号为例,使用uiautomatorviewer 可以定位到登录框.密码框,需要结合appium的inspector 1.genymotion 模拟器开启,模拟器安卓系统为4 ...

  7. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  8. 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.数组插入.删除 ...

  9. 获取APP的元素信息和Activity

    一.获取元素信息 (1)第一种方法是,在windows命令行中输入uiautomatorviewer.bat(前提是已配置好Android SDK环境),按回车键:等待几秒后会打开UI Automat ...

  10. jquery元素插入、删除、清空、找父子级元素

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

随机推荐

  1. Glob 语法

    Glob 通常用来匹配 file, gitignore, Tailwind CSS purge 都有用到 参考: Online Test Tool 语法解释 常用到的 ./PdfTemplate/** ...

  2. 如何使用hugo搭建个人博客

    整体架构 在 github 托管两个仓库,仓库 1 保存博客内容源文件,仓库 2 保存 Hugo 生成的网站文件,博客内容仓库通过 git submodule 的方式在仓库 2 管理.使用 Obsid ...

  3. Maven高级——属性

    属性 自定义属性 定义属性 <!-- 定义属性--> <properties> <spring.version>5.2.10.RELEASE</spring. ...

  4. Python—键盘输入input()语句

    用法: 简化写法:

  5. Spring —— 整合JUnit

    整合JUnit   

  6. [34]（CSP 集训）CSP-S 联训模拟 1

    A 几何 重复若干次 -> 不能重叠,因此考虑直接暴力 DP 设 \(f_{i,j,k}\) 表示主串匹配到第 \(i\) 位(将前 \(i\) 位分别归为两类),其中 \(x\) 在重复了若干 ...

  7. [TK] Terrible Prime

    题目链接 T415418 这道题严格的时间限制比较令人头疼,似乎需要一些高级的算法,但实际上是,想要用点基础知识通过这道题需要两种算法:费马小定理 (见下函数Miller_rabin) 用于subta ...

  8. [摘录] WebView2 与 JS 交互

    https://docs.microsoft.com/zh-cn/microsoft-edge/webview2/gettingstarted/win32 步骤 5-脚本 托管应用还可以将 JavaS ...

  9. CPU性能测试基准(Dhrystone)学习

    简介 Dhrystone是测量处理器运算能力的最常见基准程序之一,常用于处理器的整型运算性能的测量.程序是用C语言编写的,因此C编译器的编译效率对测试结果也有很大影响. Dhrystone是由Rein ...

  10. 数据库周刊57丨Oracle 2021年度安全警报；MySQL 8.0.23发布；MySQL索引优化导致的死锁案例；巨杉数据库跨引擎事务实践；MongoDB企业级能力解析；OceanBase OBCP 实验指导手册……

    摘要:墨天轮数据库周刊第57期发布啦,每周1次推送本周数据库相关热门资讯.精选文章.干货文档. 热门资讯 1.Oracle 2021年度安全警报: Critical Patch Update 发布8个 ...