这边博客详细的讲述一下JQuery中关于盒子模型的一些方法

offset([coordinates])方法

获取匹配元素在当前适口的相对偏移

返回的对象包含两个模型属性:top和left 以像素计。此方法只对可见元素有效。

参数

coordinates{top,left}

示例代码

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p>hello<p id="offp">world</p></p>
<script>
var p = $("#offp");
var offset = p.offset();
//获取距左距右的距离
p.html("left:" + offset.left + ",top:" + offset.top);
//设置这个p的距左距右距离
p.offset({left:100,top:50});
</script>
</body>
</html>

结果


position()方法

获取匹配元素相对父元素的偏移

返回的对象包含两个属性,top和left,为精确计算结果,请在补白,边框和填充属性上使用像素单位,只对可见元素有效

代码:

//获取第一个p元素
var firstP = $("p:first");
//获取第一个元素相对于父元素的位置
var pos = firstP.position();
firstP.text("left:" + pos.left + "top:" + pos.top);

效果


scrollTop([val])方法

获取匹配元素相对于滚动条顶部的偏移

此方法对可见和隐藏元素均有效

参数:

val:  string,Number

示例:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 10px;
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello<p id="scrollP">world</p></p>
<script>
var p = $("p:first");
//设置相对偏移
p.scrollTop(200);
$("#scrollP").text("scrollTop :" + p.scrollTop() + " scrollLeft: " + p.scrollLeft());
</script>
</body>
</html>

height([val|fn])方法

获取匹配元素当前计算的高度值(px) 在JQuery1.2以后 可以用来获取window和document的高

参数

val : String Number Function

设定CSS中 height的值可以是字符串或者数字 还可以是一个函数,返回要设置的数值,第一个参数是元素在原先集合中的索引位置,第二个参数是原来的高度。

示例代码

var p = $("p:first");
//获取p元素当前的高度
$("body").append("<p>" + p.height() + "</p>") //显示18

还可以用这个方法给元素设置高度

var p = $("p:first");
//设置高度
p.height(100);

以10像素的幅度增加p元素的高度

$("#pBtn").click(function() {
$("p:first").height(function(index,oldValue){
return oldValue + 10;
});
});

width([val|fn])方法

取得匹配元素当前计算的宽度值(px)

在JQuery1.2以后可以用来获取window和document的宽度

参数

val:String Number Function

关于参数用法和height()方法一样。

示例:

//获取宽度
$("p:first").width();
//设置匹配元素的宽度
$("p:first").width(100);
//以10元素的幅度增加p元素的宽度
$("#pBtn").click(function() {
$("p:first").width(function(index,oldValue){
return oldValue +10;
});
});

innerWidth() 和 innerHeight()方法

获取匹配元素的内部区域高度(包括补白(内边距) 不包括边框)

此方法对可见元素和隐藏元素均有效

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
padding: 10px;
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p>hello<p id="innerP">world</p></p>
<script>
$("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight())
</script>
</body>
</html>

outerHeight([options]) 和 outerWidth([options])方法

获取匹配元素的外部高度(默认包括补白和边框)

此方法对可见和隐藏元素均有效

参数

options Boolean(默认值false) 设置为true时  计算边距在内

示例代码

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
/*padding: 10px;*/
}
</style>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p>hello<p id="innerP">world</p></p>
<div></div>
<script>
$("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight())
$("div").text("outerWidth :" + $("p:first").outerWidth() + "outerHeight" + $("p:first").outerHeight());
</script>
</body>
</html>

以上就是JQuery中对于盒子模型的一些操作。

HTML 学习笔记 JQuery(盒子操作)的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. IOS学习笔记25—HTTP操作之ASIHTTPRequest

    IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...

  3. java学习笔记07--日期操作类

    java学习笔记07--日期操作类   一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...

  4. tensorflow学习笔记——使用TensorFlow操作MNIST数据(2)

    tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...

  5. tensorflow学习笔记——使用TensorFlow操作MNIST数据(1)

    续集请点击我:tensorflow学习笔记——使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...

  6. 学习笔记--jQuery基础

    学习笔记也算总结知识点,有些示例可能没有具体到元素,直接给出的语法.大家有基本理解在看可能会好些. jQuery使用前提,需要安装jQuery库 jQuery 库是一个 JavaScript 文件,您 ...

  7. ROS学习笔记INF-重要操作列表

    该笔记将重要操作的步骤进行列表,以便查询: 添加消息 在包中的msg文件夹中创建msg文件 确保package.xml中的如下代码段被启用: <build_depend>message_g ...

  8. HTML 学习笔记 JQuery(DOM 操作2)

    接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...

  9. HTML 学习笔记 JQuery(DOM 操作)

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

随机推荐

  1. 深入V8引擎-Time核心方法之win篇(1)

    上一篇的源码看得十分无趣,官方文档跟黑心棉一样渣. 这一篇讲讲windows操作系统上的时间戳实现,由于类的声明,方法解释上一篇都贴过了,所以这次直接上对应版本的代码. windows与mac很不一样 ...

  2. python 设计模式之MVC模式

    一.简单介绍 mvc模式  the  model-view-controller pattern mvc模式是一个运用在软件工程中的设计模式.mvc模式脱离了以前简单的web服务设计逻辑,将开发,测试 ...

  3. delphi中将 4 个 Byte 合成 1 个 Integer 的五种方法

    有4个字节类型的值,用移位或逻辑运算符怎么合成一个整数?比如 $FFEEDDCC.高$FF$EE$DD$CC低 //方法 1: 共用内存procedure TForm1.Button1Click(Se ...

  4. Jsp2.0自定义标签(第一天)——一个简单的例子

    今天是学习自定义标签的第一天 Jsp2.0以来,自定义标签的实现比传统标签的实现容易了很多,一般只要extends类SimpleSupport重写doTag()方法即可. 先看最简单的例子,输出一个H ...

  5. 同步数据库到Codis代码

    同步mysql数据库到codis缓存中 public void syncRule() { // 根据时间戳获取Mycat中规则表数据 logger.info("start ..." ...

  6. 连接Zookeeper操作

    public class ZKConnector implements Watcher{ private static final Logger logger =LoggerFactory.getLo ...

  7. Could not open lock file/var/lib/dpkg/lock

    apt-get时出现错误提示: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailabl ...

  8. 【Excle数据透视】如何创建多条件汇总的数据透视表

    创建多条件的数据透视表,源数据如下: 插入数据透视表 根据需求拖拽字段(统计该地区下销售人员销售业绩) 数据透视结果 数据透视表布局的各个区域说明 区域 说明 数值 用于显示汇总值数据 行标签 用于将 ...

  9. 【Python】matplotlib绘制折线图

    一.绘制简单的折线图 import matplotlib.pyplot as plt squares=[1,4,9,16,25] plt.plot(squares) plt.show() 我们首先导入 ...

  10. 2、C++ 的升级

    1.内联函数     define 可以定义宏代码片段,但是,C++ 推荐使用内联函数替代宏代码片段. inline int f(int a, int b) { }     只需要在 函数定义(实现) ...