浅析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中Image对象以及对其预加载处理示例
Nov 20 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
原生JS实现留言板
Mar 26 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php中opendir函数用法实例
2014/11/15 PHP
php中filter_input函数用法分析
2014/11/15 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
javascript date格式化示例
2013/09/25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python处理大数字的方法
2015/05/27 Python
Python之os操作方法(详解)
2017/06/15 Python
python机器学习库常用汇总
2017/11/15 Python
Django如何配置mysql数据库
2018/05/04 Python
在Python中增加和插入元素的示例
2018/11/01 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
说出一些常用的类,包,接口
2014/09/22 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
扬州个园导游词
2015/02/06 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
高中历史教学反思
2016/02/19 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers