浅析jQuery1.8的几个小变化


Posted in Javascript onDecember 10, 2013

一,.width() 和 .height()方法

1.8增加了对css属性box-sizing的支持,需要注意与1.7.2的区别了。1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度,不包括padding和border。

1.8后则不同了,当设置了css属性box-sizing: box-border后,使用width()返回的数值有可能与css中设置的不同。如

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"/> 
        <style type="text/css">
            #container { 
                box-sizing: border-box; 
                -moz-box-sizing: border-box; 
                width: 500px; 
                padding: 5px; 
                border: 5px solid gold; 
            } 
        </style> 
        <script src="js/jquery-1.8.0.js"></script> 
    </head> 
    <body> 
        <div id="container"></div> 
        <script> 
            var $el = $('#container') 
            var w = $el.width(); 
            console.log(w) 
        </script> 
    </body>    
</html>

div[id=container]的box-sizing设置为border-box(Firefox14.1尚不支持border-box,使用-moz-border-box)。

除了设置width:500px外,还设置了padding和border分别为5px。各浏览器打印结果如下

IE6/7 : 500

IE8/9/10: 480

Safari5/6: 480

Chrome21/Firefox14: 480

IE6/7不支持box-sizing,输出的依然是500。但支持该熟悉的浏览器此时输出的结果则是480(刨去了盒模型的border和padding)。因此在1.8中需要注意使用box-sizing属性带来的width和height的结果变化。

二,.outerWidth 和 .outerHeight()方法

1.7.2及之前版本,outerWidth/outerHeight只作为getter。不传true时返回元素的宽度或高度(含padding和border),传true时(当然也可以传数字1)返回值加上margin。

1.8及后具有了setter功能,如果获取时想计算margin只能传true,不能传数字1等,因为传数字1等在jQuery内部将处理为设置元素宽高。且返回的不是数字而是jQuery对象(和jQuery其它setter一样)。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
Javascript中各种trim的实现详细解析
Dec 10 #Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 #Javascript
ExtJS的拖拽效果示例
Dec 09 #Javascript
用Javascript获取页面元素的具体位置
Dec 09 #Javascript
jQuery取得select选择的文本与值的示例
Dec 09 #Javascript
JavaScript—window对象使用示例
Dec 09 #Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
You might like
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
学习Node.js模块机制
2016/10/17 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python简单商城购物车实例代码
2018/03/15 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
教育课题研究自我鉴定范文
2013/12/28 职场文书
小学家长学校培训材料
2014/08/24 职场文书
地理科学专业自荐信
2014/09/01 职场文书
导游词之无锡古运河
2019/11/14 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Mysql 用户权限管理实现
2021/05/25 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python