浅析jQuery1.8的几个小变化_jquery

一,.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一样)。

时间: 2024-09-29 02:34:30

浅析jQuery1.8的几个小变化_jquery的相关文章

“新诺基亚”的一个小变化

刘佳 这应该是以往诺基亚采访中很难见到的一幕--诺基亚成长基金(Nokia Growth Partner,下称"NGP")的中国合伙人邓元鋆手边放着一部Lumia手机.一部三星NOTE3,还有一台配了键盘的iPad摆在面前:而他身边的执行董事郭路面前,放着的是苹果"土豪金".而以往,诺基亚高管手边只有诺基亚智能手机"标配". 这或许是诺基亚在将手机业务正式卖给微软之后,"新诺基亚"的一个小变化."对NGP来说,一个很

百度搜索结果小变化 为知名网站添加小图标

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百度搜索结果发生小变化,知名于权威站点搜索结果的标题前面多了一个ico图标,据悉,百度此举的目的是为了帮助用户从搜索结果中识别官方网站.例如,百度搜索"麦包包""京东商城""优酷""招商银行",你会看到: 据腾讯微博的"百度说(@baidusays)&q

爱乐活蔡虎:互联网行业的小变化、大趋势

中介交易 SEO诊断 淘宝客 云主机 技术大厅 蔡虎2009年进入互联网,2010年终接手百度电子商务,用他的话说是,"想看看这个中间还有什么机会.当时我们发现严重的问题:从百度搜索生活服务和消费的需求是巨大的,然而搜索引擎能够提供的答案却不尽如人意." 2010年年终的时候,他们决定抓住机会,想出一些方法,立足解决生活信息靠谱性的问题.2011年百度把电子商务业务拆分,爱乐活诞生. 以下是蔡虎作为一名O2O领域创业者,他看到的互联网行业这一年的一些变化并重新进行了解读. 消费习惯三大

新版Google主页截图泄露 外观和功能设置有不小变化

据资讯网站Softpedia报道,http://www.aliyun.com/zixun/aggregation/4065.html">互联网巨头公司Google将迎来一次历史上最重大的改版.众所周知,谷歌主页与其搜索页面很长时间都没有什么太大的变化.这一次谷歌工程师和网页设计人员花费了大把精力对主页进行修改.目前,疑似谷歌新主页的截图已经泄露出来.从图片可以看出,外观和功能设置等方面都有不小变化:谷歌Logo的颜色.新增Web应用.总体相比旧版,变得更加生动. 另一方面,新主页被分为三个

浅谈Android Studio 3.0 的一些小变化

前言 一大早还在北京拥挤的地铁里,我的CTO闫哥在微信里给我发了一条信息:Android Studio 3.0发布了. 为什么会这么关注Android Studio 3.0 的版本发布呢?主要是因为公司即将开发的新app准备使用Kotlin语言,而Android Studio 3.0 已经把Kotlin的语言支持内置进去了,这样就省去了很多的麻烦,如果你还没接触过Kotlin语言,可以去百度一下 他们的官网,如果你现在使用的Java语言,那么你真是太幸运了,因为Kotlin对于你来说,将会非常简

浅析论坛营销的几个小技巧

网络营销从上个世纪就开始有人做起,只是如今互联网发展的实在太快,很多营销方法还来不及使用就已经被淘汰,很多新来的站长们都希望能从网络中获得一桶金,同时随着网络营销时代的盛行,越来越多的传统行业转向网络营销的队伍,并不断的在网络营销中取得好的业绩, 这都得利于好的营销方法. 同时,不同的行业和产品选择不同的营销模式,这样可使我们取得更好的效果. 之前我和几个站长讨论过网络营销是几个基本的技巧,现在我把这些技巧和方法总结,归纳了一下,将这些推广方法整理为以下几个营销策略: 论坛营销技巧,博客营销技巧

谷歌和百度搜索引擎的一些小变化

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在异域天空的博客看到这条信息,说百度搜索的相关结果条数发生了变化,原本是在右上角的,现在移动到了左下角. 于是也去百度查看了下,果然如此! 说到百度搜索的变化,也让我想到了前些日子开始发现谷歌的搜索结果页面也发生了些许变化. 谷歌在搜索结果的右边加入了一个评星功能,目的在于增加对用户体验结果的显示,这个功能类似360浏览器对网站安全性的评级.

特许经营:小变化带来大收益

成为一个加盟店的所有人就像在一个需要不断创新的环境中,是吗?对的,这些加盟商都会一下成为另一个毕加索.但有一个中心的主题:你不能做大的变动,而只能做小的修补,让组织变得更好. 举例来说,Greg Hund于6年前在纽约开办了Mail Boxes Etc曾,年营业额超过$100万,并开办了5个高档的连锁店.37岁的Hund发明了Virtual Doorman.每个盒子的运费是$10,Hund的商店和纽约的其它一些邮递盒子的商店都接受各种各样的包裹.这种服务能让公寓大楼的居民安全的接受邮递. Hun

百度的一点小变化

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅