<!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. https的网站用了百度分享后网站在浏览器中不安全解决方法

    本文出至:新太潮流网络博客 一.先下载百度分享需要的所有东西 下载地址:http://pan.baidu.com/s/1boM7N8V 二.打开百度分享,获取到分享的代码 三.将下载好的百度分享需要的 ...

  2. SQLServer 查询使用键查找时锁申请及释放顺序

    最近看了高兄的一篇文章,Sql Server 高频,高并发访问中的键查找死锁解析,很有收获,里面讲到了键查找引起的死锁问题. 当然看的过程中,其实自己有个疑问: 对于键查找这类查询,会申请哪些锁,锁申 ...

  3. nodejs+redis使用

    安装 linux安装及配置之前写过了http://www.cnblogs.com/zycbloger/p/6226682.html windows安装 下载地址:https://github.com/ ...

  4. MySQL->>innodb_autoinc_lock_mode参数控制auto_increment 插入数据时相关锁的模式

    转自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/15498/viewspace-2141640/ ---------------------------------- ...

  5. Coursera-AndrewNg(吴恩达)机器学习笔记——第二周编程作业（线性回归）

    一.准备工作 从网站上将编程作业要求下载解压后,在Octave中使用cd命令将搜索目录移动到编程作业所在目录,然后使用ls命令检查是否移动正确.如: 提交作业:提交时候需要使用自己的登录邮箱和提交令牌 ...

  6. Exchange & Office 365最小混合部署

    前言 这篇文章的主题是混合部署~ 混合使得本地组织和云环境像一个单一的.协作紧密的组织一样运作.当组织决定进行混合部署,达到本地Exchange Server和Office 365共存的状态时,就会面 ...

  7. CSS学习摘要-布局

    注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...

  8. 实践和感悟 - scala向下转型和减少穷举

    工作中的问题总结: 问题一:scala 之向下转型 引言:假如在复杂的业务逻辑中,变量的类型不能确认,只能给个接口类型,这样数据类型推导不会错误,但是后面要使用实现类的类型时,你却发现转不过来了? 对 ...

  9. ZT 链表逆序

    链表逆序 原帖地址http://blog.csdn.net/niuer09/article/details/5961004 分类: C/C++2010-10-23 17:23 18425人阅读 评论( ...

  10. 1305. [CQOI2009]跳舞【最大流+二分】

    Description 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会 ...