HTML 学习笔记 JQuery(盒子操作)
这边博客详细的讲述一下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(盒子操作)的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- java学习笔记07--日期操作类
java学习笔记07--日期操作类 一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据(2)
tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据(1)
续集请点击我:tensorflow学习笔记——使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...
- 学习笔记--jQuery基础
学习笔记也算总结知识点,有些示例可能没有具体到元素,直接给出的语法.大家有基本理解在看可能会好些. jQuery使用前提,需要安装jQuery库 jQuery 库是一个 JavaScript 文件,您 ...
- ROS学习笔记INF-重要操作列表
该笔记将重要操作的步骤进行列表,以便查询: 添加消息 在包中的msg文件夹中创建msg文件 确保package.xml中的如下代码段被启用: <build_depend>message_g ...
- HTML 学习笔记 JQuery(DOM 操作2)
接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...
- HTML 学习笔记 JQuery(DOM 操作)
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
随机推荐
- 深入V8引擎-Time核心方法之win篇(1)
上一篇的源码看得十分无趣,官方文档跟黑心棉一样渣. 这一篇讲讲windows操作系统上的时间戳实现,由于类的声明,方法解释上一篇都贴过了,所以这次直接上对应版本的代码. windows与mac很不一样 ...
- python 设计模式之MVC模式
一.简单介绍 mvc模式 the model-view-controller pattern mvc模式是一个运用在软件工程中的设计模式.mvc模式脱离了以前简单的web服务设计逻辑,将开发,测试 ...
- delphi中将 4 个 Byte 合成 1 个 Integer 的五种方法
有4个字节类型的值,用移位或逻辑运算符怎么合成一个整数?比如 $FFEEDDCC.高$FF$EE$DD$CC低 //方法 1: 共用内存procedure TForm1.Button1Click(Se ...
- Jsp2.0自定义标签(第一天)——一个简单的例子
今天是学习自定义标签的第一天 Jsp2.0以来,自定义标签的实现比传统标签的实现容易了很多,一般只要extends类SimpleSupport重写doTag()方法即可. 先看最简单的例子,输出一个H ...
- 同步数据库到Codis代码
同步mysql数据库到codis缓存中 public void syncRule() { // 根据时间戳获取Mycat中规则表数据 logger.info("start ..." ...
- 连接Zookeeper操作
public class ZKConnector implements Watcher{ private static final Logger logger =LoggerFactory.getLo ...
- 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 ...
- 【Excle数据透视】如何创建多条件汇总的数据透视表
创建多条件的数据透视表,源数据如下: 插入数据透视表 根据需求拖拽字段(统计该地区下销售人员销售业绩) 数据透视结果 数据透视表布局的各个区域说明 区域 说明 数值 用于显示汇总值数据 行标签 用于将 ...
- 【Python】matplotlib绘制折线图
一.绘制简单的折线图 import matplotlib.pyplot as plt squares=[1,4,9,16,25] plt.plot(squares) plt.show() 我们首先导入 ...
- 2、C++ 的升级
1.内联函数 define 可以定义宏代码片段,但是,C++ 推荐使用内联函数替代宏代码片段. inline int f(int a, int b) { } 只需要在 函数定义(实现) ...