先贴出元素模型信息

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. Word字体与像素的对应关系

    英文字体的1磅(pt),相当于1/72 英寸(inch),约等于1/2.8mm.12PT的字打印出来约为4.2mm.网页中12px的字才相当于12像素. 虽然 四号=(14/72)*96=18.6px ...

  2. sicp每日一题[2.13-2.16]

    Exercise 2.13 Show that under the assumption of small percentage tolerances there is a simple formul ...

  3. Advanced .Net Debugging 11：完结篇

    一.介绍 这是我的<Advanced .Net Debugging>这个系列的第十一篇文章,也是这个系列的最后一篇了.我已经把原书的前八章内容全部写完了,本来打算继续写第九章和第十章的内容 ...

  4. [OI] 二项式期望 DP

    OSU OSU yet Another OSU yet yet Another OSU OSU 的题目是这样的:有一些相邻的块,给定每一个块的联通概率,每个连通块对答案有 \(size^{3}\) 的 ...

  5. 【赵渝强老师】MongoDB插入文档

    MongoDB是非关系型数据库NoSQL的代表,作为一款可分布式存储的数据库,对文档的操作是MongoDB的重中之重.在本文中,我们将着重为大家介绍如何在MongoDB中插入文档. MongoDB一共 ...

  6. thinkphp在原字段上面进行加减操作

    经常有需要对某个数据表的计数字段进行加减操作,我们来看下在ThinkPHP中的具体使用办法. 最简单的,使用下面方法对score自加,第二个参数也可以不要,默认加1:   M('User')-> ...

  7. USB总线-Linux内核USB设备驱动之UAC2驱动分析（十）

    1.概述 UVC(USB Audio Class)定义了使用USB协议播放或采集音频数据的设备应当遵循的规范.目前,UAC协议有UAC1.0和UAC2.0. UAC2.0协议相比UAC1.0协议,提供 ...

  8. 数据库小白看这里，这个Oracle数据库知识图谱你值得拥有（含MySQL、PG图谱）

    2022年前后,墨天轮社区曾陆续推出PostgreSQL知识图谱.MySQL知识图谱,并得到了大家的广泛好评.此后,便有众多朋友对Oracle知识图谱发起不断"催更".经过近期的内 ...

  9. ⼯作中有做过数据处理吗？ tree 组件 根据 pid 寻找父节点

    主要是在组件和后端返回的数据之间,或者组件产⽣的数据和需要提交给后端的数据之间,有可能会出 现结构对不上,这个时候可能会处理⼀下,举个例⼦,⽐如说我们常⽤的tree型组件要求必须是嵌套的 tree型数 ...

  10. 小程序的image组件

    mode属性:用来制定图片的裁剪和缩放模式:常用属性如下: