<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>访问元素的尺寸与坐标</title>

        <script src="js/jquery.js"></script>

        <style>

            .big{

                position: absolute;

                left: 50px;

                top: 100px;

                width: 400px;

                height: 450px;

                background-color: #C0C0C0;

                overflow: auto;

            }

            .small{

                margin: 50px;

                padding: 30px;

                border: 20px solid blue;

                width: 200px;

                background-color: orange;

            }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //取得DIV高和宽

                var w=$(".big").width();

                var h=$(".big").height();

                console.info("高:"+h+",宽:"+w);

                //获取DIV位置信息 ppsition方法 取得左上角位置坐标

                var p = $(".big").position();

                console.info("位置信息:上"+p.top+",左"+p.left+");

                console.info("内部尺寸为:"+$(".small").offset().left+","+$(".small").height())

            })

        </script>

    </head>

    <body>

        <div class="big">

            <div class="small">

                XXXXXXXXXXXXXXXXX</br>

                XXXXXXXXXXXXXXXXX</br>

                XXXXXXXXXXXXXXXXX</br>

                XXXXXXXXXXXXXXXXX</br>

                XXXXXXXXXXXXXXXXX</br>

            </div>

        </div>

    </body>

</html>

jQuery学习-尺寸坐标的更多相关文章

  1. js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  4. jquery学习随笔

    转)jquery学习随笔(jquery选择器)   jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...

  5. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  6. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  7. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  8. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. 探讨Oracle分区表

    一年又一年,又到年底了,对于数据库的分区表需要检查一下,有无最大分区,次分区是否需要追加分区,如果程序不是自动追加分区的话,那么年中结算的时候,就会报错. 1.oracle分区主要有五种类型 (1)R ...

  2. [CENTOS7] 加入Windows域

    This following article is a snapshot from: https://www.rootusers.com/how-to-join-centos-linux-to-an- ...

  3. [IIS] 配置PHP的过程与坑

    * 32位与64位程序的兼容性问题 如果64位的IIS内的处理程序需要使用32位程序或者扩展,必须在ApplicationPool里面的高级设置里,将AppPool设置为允许32位.否则32位的程序将 ...

  4. Python入门-模块2（sys模块、shutil 模块）

    sys模块: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 s ...

  5. 【原创】Qt 使用ODBC driver 连接SQL Server

    最近在做数据库的课程设计.第一个需要解决的问题是使用什么工具来实现这个系统.经过一番资料查找,决定使用SQL Server Express 2012作为服务器,使用Qt作为编写客户端程序语言.问题是c ...

  6. PHP中抽象方法、抽象类和接口的用法

    在类中,没有方法体的方法就是抽象方法. abstract 可见性 function 方法名称(参数1,.....);      // 如果没有显示地指定可见性,则默认为public 如: public ...

  7. scala抽象类实战

    实战一: 声明一个抽象类(SuperTeacher):(超级老师) abstract class SuperTeacher(val name : String){ var id : Int var a ...

  8. 第一次项目冲刺（Alpha版本）2017/11/19

    一.当天站立式会议 会议内容 1.对数据库的设计的进一步讨论 2.讨论SSH一些配置细节 3.分配今天的任务 二.任务分解图 三.燃尽图 四.心得 1.零散的时间要利用起来,追上计划的进度. 2.在小 ...

  9. PHP SPL神器实现堆排序

    之前学习过内部排序的八大算法,也一一写过代码实现.其中堆排序的原理是 将一颗二叉树初始化为堆 依次将最后一个结点与堆顶结点交换.然后调整堆顶元素位置,重置堆. 将二叉树初始化为堆可以看做从最后一个非叶 ...

  10. 【原创】rabbitmq 学习

    rabbitmq 命令 1. 用户管理类命令: 该类别比较意图比较明显,详细查看官方文档.现做俩点说明: authenticate_user 此命令用于验证一个用户名和密码对不对,并没有什么用: se ...