jquery源码解析:jQuery静态属性对象support详解

jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能。针对jQuery内部使用。

我们先来看一些源码:

jQuery.support = (function( support ) {

  ......

  return support;
})( {} );

jQuery.support其实就是一个json对象。在火狐浏览器下,打印出support对象:

接下来,我们来看它的源码

jQuery.support = (function( support ) {

  var input = document.createElement("input"),
    fragment = document.createDocumentFragment(),
      div = document.createElement("div"),
        select = document.createElement("select"),
          opt = select.appendChild( document.createElement("option") );

  if ( !input.type ) {    //如果创建的input元素没有type类型,就直接返回。现在的浏览器都支持type类型,所以不会进入if语句
    return support;
  }

  input.type = "checkbox";   //改变这个input的type类型

  support.checkOn = input.value !== "";   //复选框的value值默认是什么,老版本的webkit下,默认值是"",所以它的support.checkOn = false。其他浏览器默认值是on,所以support.checkOn = true。针对这种差异化,jQuery通过hooks来解决,使所有的浏览器返回的值是一样的,解决兼容性问题。

  support.optSelected = opt.selected;//创建了一个下拉菜单select,并且创建了一个子项option。在火狐和谷歌浏览器下,第一个子项会被默认选上。但是在IE下,不会被默认选中。

  support.reliableMarginRight = true;   //这三个检测要等DOM加载完才会进行判断,这里只是先定义一下。
  support.boxSizingReliable = true;
  support.pixelPosition = false;

  input.checked = true;   //让复选框选中
  support.noCloneChecked = input.cloneNode( true ).checked; //克隆出来的新的复选框是否也被选中。火狐下,safari下,chrome下,克隆出来的都是选中的,IE9-10下,克隆出来的并没有被选中。jQuery会用hooks解决这个兼容性问题,让IE9-10下,克隆出来的复选框选中

  select.disabled = true;    //禁止下拉菜单
  support.optDisabled = !opt.disabled;     //select下的option应该不受影响,老版本webkit的opt.disabled也会变成true,就是受select影响 

  input = document.createElement("input");    //创建一个新的input 
  input.value = "t";    //设置input的value值为"t"。
  input.type = "radio";   //再设置input的type类型
  support.radioValue = input.value === "t";   //判断input的value值是否等于"t",IE下会等于on,因此IE下返回false

  input.setAttribute( "checked", "t" );   //设置input的checked属性值为"t"
  input.setAttribute( "name", "t" );    //设置input的name属性值为"t"

  fragment.appendChild( input );   //把这个input添加到文档碎片对象中

  support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;//在老版本的webkit下,克隆文档碎片,不能返回checked的值,因此等于false。

  support.focusinBubbles = "onfocusin" in window; //只有IE下支持这个事件。focus事件不会冒泡,而focusin支持

  div.style.backgroundClip = "content-box";//背景剪切
  div.cloneNode( true ).style.backgroundClip = "";//克隆出来的div应该不影响原div
  support.clearCloneStyle = div.style.backgroundClip === "content-box";//IE下会被影响,变成"",等于false

  jQuery(function() {    //有些方法需要等到DOM加载完才能通过功能检测判断,意思就是等这些新创建的元素真正的添加到页面中才能进行检测

    var container, marginDiv,
      divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box", //content-box是标准模式,border-box是怪异模式。
          body = document.getElementsByTagName("body")[ 0 ];

    if ( !body ) {   //如果body不存在,直接return。
      return;
    }

    container = document.createElement("div");
    container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

    body.appendChild( container ).appendChild( div );
    div.innerHTML = "";
    div.style.cssText = "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%";

    jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {//zoom是放大页面的属性,等于1的时候,不放大也不缩小
      support.boxSizing = div.offsetWidth === 4;//怪异模式下,等于4,支持boxSizing,所有浏览器都支持
    });

    if ( window.getComputedStyle ) {
      support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";//safari下返回1%,因此等于false。而其他浏览器会转换成像素值。
      support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";//IE下,如果是怪异模式,width不等于4px,需要减去padding,border

      marginDiv = div.appendChild( document.createElement("div") );
      marginDiv.style.cssText = div.style.cssText = divReset;
      marginDiv.style.marginRight = marginDiv.style.width = "0";
      div.style.width = "1px";//老版本的webkit下,会让marginDiv的width变成1

      support.reliableMarginRight =!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );//应该等于0,reliableMarginRight等于true。
    }

    body.removeChild( container );
  });

  return support;
})( {} );

在上面打印出来的support对象中还有两个属性没讲,一个是ajax,一个是cors。源码是:

jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );//首先判断ajax对象是否存在,并且是否支持跨域。xhrSupported 就是new XMLHttpRequest()对象,IE9以及以下版本不支持
jQuery.support.ajax = xhrSupported = !!xhrSupported; //是否支持ajax请求。

加油!

时间: 2024-09-30 11:09:20

jquery源码解析:jQuery静态属性对象support详解的相关文章

jQuery 源码分析(十九) DOM遍历模块详解

jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装和扩展,用于在DOM树中遍历父元素.子元素和兄弟元素. 可以通过jQuery的实例来访问,方法如下: parent()             ;获取匹配元素的父元素 parents(selector)         ;获取匹配元素的所有祖先元素                        ;s

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

jQuery源码分析(九) 异步队列模块 Deferred 详解

deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容) 异步队列有三种状态:待定(pending).成功(resolved)和失败(rejected),初始时处于pending状态 我们可以使用jQuery.Deferred创建一个异步队列,返回一个对象,该对象含有如下操作: done(fn/arr

jQuery源码解析(jQuery对象的实例属性和方法)

1.记录版本号 以及 修正constructor指向 jquery: core_version, constructor: jQuery, 因为jQuery.prototype={ ... } 这种写法将自动生成的jQuery.prototype.constructor属性覆盖删除,所以需要重新修正(指向其构造函数 jQuery).2.init() 初始化方法: init()方法最终返回的是this -jQuery(其实是jQuery.prototype.init)方法的实例对象. 实例对象继承

jquery源码解析:代码结构分析

本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function(){}; (96,283)   给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用) (285,347)   extend : jQuery的继承方法 (349,817)   jQuery.extend():扩展一些工具方法(静态方法,直接通

jQuery源码解析(架构与依赖模块)第一章 理解架构

1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它