<!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. SQLServer中DataLength()和Len()两内置函数的区别

    最近工作中遇到了个问题:在数据库中声明字段类型时char(4),但实际只存储了‘DCE’三个字母,程序中拼装以该字段作为key的Map中,会把‘DCE’+空格作为其Key,这样造成用没加空格的‘DCE ...

  2. MySQL InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析

    MySQL InnoDB支持三种行锁定方式: l   行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. l   间隙锁(Gap Lock):锁定索引记录间隙,确保索引记录的间隙 ...

  3. Allure 安装及使用

    linux下安装方法 Allure requires Java 8 or higher    npm install -g allure-commandline --save-dev (如果npm不能 ...

  4. SparkSql实现Mysql到hive的数据流动

    今天去面试了一波,因为调度系统采用了SparkSql实现数据从Mysql到hive,在这一点上面试官很明显很不满我对于Spark的理解,19年的第一个面试就这么挂了. 有问题不怕,怕的是知道了问题还得 ...

  5. 铁乐学Python_day07_集合and浅谈深浅copy

    1.[List补充] 在循环一个列表时,最好不要使用元素和索引进行删除操作,一旦删除,索引会随之改变,容易出错. 如果想不出错,可以采用倒着删除的方法,因为倒着删除进行的话,只是后面元素的位置发生了变 ...

  6. web应用配置文件详解(web.xml)

    转载链接地址:http://blog.csdn.net/guihaijinfen/article/details/8363839 <?xml version="1.0" en ...

  7. .net mvc HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容

    1. 检查服务器上是否安装了“HTTP重定向”功能和“静态内容压缩”功能(在添加/删除程序或增加角色处安装).这是我所遇到的问题: 2. 应用程序池要被配置为“集成” 3. 把.net 4.0安装在i ...

  8. Spring Boot Mybatis-Plus

    Mybatis-Plus 是对 Mybatis-Plus 的一些扩充. 在 Spring Boot 中进行集成的时候其实基本上和 mybatis 是一致的. 在你的配置文件中.配置 你的 entity ...

  9. 玩Web虎-运行时受保护文件不可复制

    1. 直接复制粘贴,提示“操作无法完成,因为文件已在system中打开” 2.拔下加密锁后,复制粘贴,依然上错 3.用NoVirusThanks的 kernel-mode driver loader ...

  10. setnx redis

    使用锁 1)setnx(lockkey, 当前时间+过期超时时间) ,如果返回1,则获取锁成功:如果返回0则没有获取到锁,转向2.2.)get(lockkey)获取值oldExpireTime ,并将 ...