NULL博文链接：https://nuysoft.iteye.com/blog/1195296userAgentMozilla/5.0(Windows NT 6.1; rv: 5.0) Gecko/20100101 Firefox/ 5.0测试结果让人纠结,既然。, Chrome、 Safari、 Opera就不测了!不过,我们也发现userAgent似乎包含了较全的信息。浏览器在发起HTTP请求时,会把userAgent的信息作为请求头中User-Agent的值。服务器需要的话可以据此检测浏览器类型,对响应的内容进行适配,比如适配各种型号的手机浏览器。jQuery就是根据 userAgent属性来检测浏览器的类型,并提供了$ browser对象,通过$. browser,我们可以获取当前浏览器的类型和版本。$. browser包含四种最流行的浏览器标记( IE, Mozilla, Webkit, Opera)和版本,对应的有效标记有webkitsafari(deprecated)operamsiemozilla$. browser不需等待s( document). ready就可以获取。使用示例:S browser,, msie/ mozilla/webkit/operas browser version由于$ browser基于 navigator.user^ Agent检测浏览器类型,很容易被用户和浏览器欺骗,并且缺乏灵活性和不够全面。因此最好避免编写基于特定浏览器的代码。相对于$ browser,$ support针对浏览器特定特性的检测则更为有效。从API文档中可以看到,未来 jQuery browser可能会移到一个插件中$ browser的实现代码如下://用户代理检测正则表达式定义varwebkit =/(webkit)[\/]([\w]+)/ropera =/(apera)(?: version)?[ \/([\w]+)/msie =/(msie)([\w1+)/mozi1a=/(mozi11a)(?:*?rv:([W.]+))?///到处都是把属性取岀来,作为局部变量使用,可以减少跨作用域查询,提高性能userAgent navigatoruserAgent,//用户代理匹配结果browserMatch//实际执行匹配的函数uaMatch: function( ua)ua= ua. tolowerCaseo)i//依次匹配各浏览器var ratch webkit, exec( uaropera exec( ua)IImsie. exec( ua)IIua indexof ("compatible")<0&& mozilla exec( ua )II// match[1]||"": match[1]为 false(空字符串、nu1l、 undefined、0等)时,默认为""// match[2]|"0: matcn[2]为 false(空字符串、n11、 undefined、0等)时,默认为"0return browser: match[l version: match[2|0"ir//将测试结果保存至 g Query. browserbrowserMatch jQuery uaMatc userAgent )iif( browserMatch browser )iQuery browser[ browserMatch browser ]=true;i Query browser version browserMatch version;//不推荐使用afar标记,用 webkit代替if jQuery browser. webkit ) ijQuery browser safari=true6.2功能特性检测法即根据浏览器是否支持某项特定的功能特性,来决定程序的执行分支,这种方法不考虑浏览器类型和版本,也不考虑浏览器升级带来的变化,更加安全、灵活,同时减少了维护工作,因此成为了当下主流的检测方法。例如绑定load事件的代码//兼容事件模型,通过检测浏览器的功能特性,而非嗅探浏览器if( document addeventlistener )i7, Use the handy event callback//使用较快的加载完毕事件document. addeventL-stener( "DOMContentLoaded" dCMcontentloaded, false )i//A fallback to window. onload, that will always work//注册 window. onload回调函数window. adCEventlistener( load", jQuery ready, false )i/ If IE event model is used//如果是IE事件模型t else if( document attachEmentensure firing before onload,/ maybe late but safe also for iframes//确保在 onload之前触发 onreadystatechange,可能慢一些但是对 iframes更安全document. attachEvent("onreadystatechange", DOMContentloaded )i// A fallback to window. onload, that will always work/注册 window.on1oad回调函数window.attachEvent(onload",jQuery. readyIf IE and not a frame/ continually check to see if the document is readyvar toplevel falsetoplevel =window. frameElement = null3 catch(e)(if( document documentElement. doScrcll & topleveldoscrollchecko63盒模型盒模型是CSS中的一个概念,CSS将所有的网页元素都看做是一个知形框,这个框由元素的内容( content)内边距( padding)边框( border)和外边距( margIn)组成,如下图(摘自http://www.w3.org/tr/css3-box/)content edgemarginpaddingadding edgleftcontentborder edgemargin edgebottom两种盒模型IE传统模型: width和 height属性包括内边距和边框宽度●W3C标准模型: width和 height属性不包含边距和边框宽度Query. boxModelQuery提供了 boxModel属性, jQuery.boxMσdel为true时,表示攴持W3C盒模型, false表示支持正传统盒模型。尺寸封装jQuery封装了这两种盒模型的差异,统为W3C标准模型,并提供了修正后的接口接口计算公式width, heightcontentinnerWidth, innerHeight content+ paddingouter Width,, outerHeight| content+ padding+ border+可选的 margin最后附个有趣的图, Chrome发布的时候看到的,会心笑,不解释:Google Google i googleonebloeFEDERIco FIENI 2008