先贴出元素模型信息

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. js 翻译 c# 注意事项

    1. split('') 在 c# 是不可以 .Split("") 的 要写 ToCharArray() 更新: 2021-09-25, split('') 是不好的写法, es6 ...

  2. CSS – Naming Conversion

    参考: CSS Naming Conventions that Will Save You Hours of Debugging Class Name kebab-case .hero-section ...

  3. Angular 18+ 高级教程 – 国际化 Internationalization i18n

    介绍 先讲讲名词. Internationalization 的缩写是 i18n,中文叫国际化. Globalization 是 Internationalization 的同义词,都是指国际化. L ...

  4. C#|.net core 基础 - 值传递 vs 引用传递

    不知道你在开发过程中有没有遇到过这样的困惑:这个变量怎么值被改?这个值怎么没变? 今天就来和大家分享可能导致这个问题的根本原因值传递 vs 引用传递. 在此之前我们先回顾两组基本概念: 值类型 vs ...

  5. Java！！冲

    开始学习Java!!!

  6. Python 潮流周刊#70：微软 Excel 中的 Python 正式发布！（摘要）

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  7. 离线安装Redis

    redis 直接去官网下载tar包就可以 主要是gcc 环境的安装包不太好找,我下载的还缺少 make 如果服务器比较干净,还得预装一下lrzsz-0.12.20.tar.gz 上传下载文件,unzi ...

  8. 【翻译】实现 Blocked Floyd-Warshall 用于解决所有对最短路径问题 C# 实现

    介绍 在之前的帖子中,我们实现了Floyd-Warshall(弗洛伊德-沃沙尔算法)(四种变体)以及路由重建算法.在这些帖子中,我们探讨了所有对最短路径问题的基本概念.内存中的数据表示.并行性.向量化 ...

  9. 来参与Oracle VS openGauss 在线研讨，与盖国强老师、李国良教授面对面！

    11月11日下午14点,墨天轮社区邀请到两位数据库领域的巅峰人物:Oracle ACED 盖国强老师,和来自清华大学计算机与技术系的李国良教授,他们将进行一场"巅峰对话". 墨天轮 ...

  10. element的图片上传预处理函数

    /** 图片格式和大小的控制 */ beforeAvatarUpload (file) { // 允许上传 jpg 和 png 格式的图片 const isJPG = file.type === &q ...