<!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. PHP获取用户的真实IP地址

    本文出至:新太潮流网络博客 PHP获取用户的真实IP地址,非代理IP function getClientIP(){ global $ip; if(getenv("HTTP_CLIENT_I ...

  2. Oracle EBS AR 收款API收款方法标识无效

    1.确认是不是没有收款方法 methods那个表的问题2.查看收款方法那个LOV的问题3.界面录入 是否会有问题  碰到的问题是 收款日期比较早时 找不到对应的收款方法 银行账户需要重新设置

  3. Linux系统管理员命令：sudo

    sudo是个统管一切的命令.它的字面意思是代表“超级用户才能做!”(super user do!)对Linux系统管理员或高级用户而言,它是必不可少的最重要的命令之一.你可曾有过这样的经历:在终端中试 ...

  4. Sql Server数据库备份脚本以及如何在阿里云云数据库RDS还原数据库（代码源自阿里云）

    今天研究阿里云服务数据库的迁移,备份和还原的时候,在阿里云web后台发现了一个很好用的sql脚本,就默默地偷了过来,它可以支持全量备份,差异备份和日志备份,代码解释也都很清楚,我也尝试着跑了一下,性能 ...

  5. Redis学习---基础学习[all]

    什么是NoSQL型数据库 NoSQL数据库---NoSQL数据库的分类 Redis学习---NoSQL和SQL的区别及使用场景 Redis学习---负载均衡的原理.分类.实现架构,以及使用场景 什么是 ...

  6. Ubuntn系统（虚拟机）忘记密码的解决方法

    1.重启ubuntu系统,开机时长按shift按键进入GRUB菜单,选择第二个高级选项,enter键进入.如下图: 2.在高级选择中选择Recovery mode模式,键盘按“e”键进入编辑模式.如下 ...

  7. 开源作业调度框架 - Quartz.NET - 实战使用1

    简介: 第一步:下载Quartz.NET 下载Quartz.NET只需要打开网址选择适宜的版本进行下载解压缩即可. 目前最新版本是2.3.3,压缩包为6MB,不过鉴于国内网速.我还是加一下博客园的下载 ...

  8. December 03rd 2016 Week 49th Saturday

    By failing to prepare, you are preparing to fail. 不做准备,那就准备失败吧. How does the case when you had prepa ...

  9. HTML头标签使用-又一次定向，refresh

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. verilog实现VGA显示方块屏幕保护

    verilog实现VGA显示方块屏幕保护 输入和输出 时钟信号 clk 复位信号 reset rgb三颜色输出 [2:0] r,g, [1:0] b 行信号输出 hs 列信号输出 vs 参数设定 设定 ...