浅析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 相关文章推荐
JQuery对checkbox操作 (循环获取)
May 20 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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 array_unique之后json_encode需要注意
2011/01/02 PHP
关于crontab的使用详解
2013/06/24 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
python实现人脸识别代码
2017/11/08 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
给女儿的表扬信
2014/01/18 职场文书
大型会议接待方案
2014/03/01 职场文书
公司授权委托书范本
2014/04/03 职场文书
小学三年级学生评语
2014/04/22 职场文书
2014年终个人工作总结
2014/11/07 职场文书
超市工作总结范文2014
2014/12/19 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS