HTML 学习笔记 JQuery(盒子操作)
2024-09-07 00:52:48
这边博客详细的讲述一下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中对于盒子模型的一些操作。
最新文章
- MyBatis学习总结_19_Mybatis传多个参数(三种解决方案)
- Oracle 数据库整理表碎片
- wavecom短信猫常用AT命令
- [RxJS] Combining streams in RxJS
- JS 获取网页的宽高
- opencv基础到进阶(1)
- 51 nod 1495 中国好区间 奇葩卡时间题 700ms 卡O(n*log(n)), 思路:O(n)尺取法
- android开发性能分析
- mysql 表关联批量更新
- 这款APP太像微信 腾讯起诉索赔1000万
- hadoop MapReduce 入门
- zookeeper安装和使用(Windows环境)
- VNC实现Windows远程访问Ubuntu 16.04(无需安装第三方桌面,直接使用自带远程工具)
- kubernetes 环境搭建(ubuntu16.04)
- ACM题目————A Knight&#39;s Journey
- Win10重命名文件夹导致资源管理器卡顿的解决办法
- PAT 1020 月饼 (25)(精简版代码+思路+推荐测试用例)
- 牛客练习赛3 F - 监视任务
- 【单调队列】BZOJ1342-[Baltic2007]Sound静音问题
- KVC/KVO之KVO
热门文章
- Java中final和static关键字总结
- jersey上传文件解决办法
- workflow engine Ruote初体验之一(概念)
- asp.net上传文件夹权限配置以及权限配置的分析
- 执行 innerHTML 里的 <;script>;
- IOS7开发~NSAttributedString
- 【spring cloud】子模块启动报错com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAspect
- Android开发常见的Activity中内存泄漏及解决办法
- ThinkPHP创建应用的一般开发流程及实例
- cordova热更新插件调试