先贴出元素模型信息

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. DOM – Work with Document.styleSheets and JS/Scss Breakpoint Media Query

    前言 为了方便管理, 我们会定义 CSS Variables, 类似于全局变量. 有时候做特效的时候还需要 JavaScript 配合, 这时就会希望 JavaScript 可以获取到 CSC Var ...

  2. EF Core – Temporal Table 时态表

    前言 EF core 6.0 开始有 build-in 的 Temporal Table 支持了. 关于 SQL Server Temporal Table 可以看这篇. 主要参考 What's Ne ...

  3. C++ STL（标准模版库）—— vector 与 迭代器

    STL 基本概念 STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称. STL 从广义上讲分为三类:algorithm(算法).containe ...

  4. 《Vue.js 设计与实现》读书笔记 - 第 4 章、响应系统的作用与实现

    第 4 章.响应系统的作用与实现 4.1 响应式数据与副作用 副作用函数就是会对外部造成影响的函数,比如修改了全局变量. 响应式:修改了某个值的时候,某个会读取该值的副作用函数能够自动重新执行. 4. ...

  5. vagrant快速安装虚拟机

  6. vue 中 slot 的使用方式，以及作用域插槽的用法

    分类:插槽又分为匿名插槽.具名插槽以及作用域插槽 : 匿名插槽,我们又可以叫它单个插槽或者默认插槽 因为组件标签中间是不允许写内容的,但是可以插入 插槽 :template 标签 : 插槽的使用方法 ...

  7. C#查漏补缺----Exception处理实现，无脑抛异常不可取

    前言 环境:.NET 8.0 系统:Windows11 参考资料:CLR via C#, .Net Core底层入门 https://andreabergia.com/blog/2023/05/err ...

  8. 关于uniapp的兼容性的一些问题

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  9. 云原生周刊：K8s 上的 gRPC 名称解析和负载平衡

    开源项目推荐 Kraken Kraken 是一个基于 P2P 的 Docker 注册表,专注于可扩展性和可用性.它专为混合云环境中的 Docker 镜像管理.复制和分发而设计.借助可插拔的后端支持,K ...

  10. python多线程完成模拟支付请求

    import asyncioimport sysfrom queue import Queuesys.path.append("../")from tool.__init__ im ...