浅析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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
动态样式类封装JS代码
Sep 02 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
前端如何实现动画过渡效果
Feb 05 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常量的详解
2013/06/09 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
银行介绍信范文
2014/01/10 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
2014国培学习感言
2014/03/05 职场文书
小学生综合素质评语
2014/04/23 职场文书
体育节口号
2014/06/19 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript