浅析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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JqGrid web打印实现代码
May 31 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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网站基础优化方法小结
2008/09/29 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js轮播图代码分享
2016/07/14 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python中的多重装饰器
2015/04/11 Python
python排序方法实例分析
2015/04/30 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python 异或加密字符串的实例
2018/10/14 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python的log日志功能及设置方法
2019/07/11 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
党支部书记先进事迹
2014/01/17 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
商场促销活动总结
2014/07/10 职场文书
服务明星事迹材料
2014/12/29 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电