浅析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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue视图不更新情况详解
May 16 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php中异常处理方法小结
2015/01/09 PHP
php实现的递归提成方案实例
2015/11/14 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
使用tensorflow实现AlexNet
2017/11/20 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
浅析Python中字符串的intern机制
2020/10/03 Python
金融专业推荐信
2013/11/14 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python