uTools-Manuals/docs/jQuery/jQuery.support.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.support</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/properties/">内部属性</a> &gt; <a href="/category/properties/global-jquery-object-properties/">全局 jQuery 对象的属性</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/utilities/">工具类</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/deprecated/">弃用</a> &gt; <a href="/category/deprecated/deprecated-1.9/">1.9 版本弃用的 API</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.support/" target="_blank">jQuery.support</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry property" id="jQuery-support1"><h2 class="section-title">
<span>jQuery.support</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>
			它们代表了不同的浏览器功能或错误存在的属性集合。当他们不再需要在内部以提高页面的启动性能时，这些特定属性可能会被删除。
			对于你自己的项目功能检测的需求，
			我们强烈建议使用外部库，比如<a href="http://modernizr.com">Modernizr</a>的，而不是依赖于<code>jQuery.support</code>上的属性。
			</p>
<ul class="signatures"><li class="signature"><h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>jQuery.support</h4></li></ul>
<div class="warning">注：官网中以下全部内容已经被删除，我们强烈建议浏览器功能性检测不要使用<code>jQuery.support</code>上的属性。而使用比如<a href="http://modernizr.com">Modernizr</a>这样的外部类库！</div>
<div class="longdesc" id="entry-longdesc">
<p>与使用 <code>$.browser</code> 来检测 user agent 或者根据不同的浏览器改变页面的展示效果相比，使用<strong>功能检测</strong>是更好的作法。为了使该该过程变得更简单，jQuery 进行了很多这样的测试，来设置 <code>jQuery.support</code> 对象的属性。
			         </p>
<p><strong>由于 jQuery 内部需要使用这些方法来进行检测，所以它们会在<em>每次</em>加载页面时被执行。下面列出了一些可用于检测的属性，但是某些不建议使用的或被删除的属性并没有被列出来，因为这些属性不是讨论的重点，而且当 jQuery 的内部代码不再需要某些属性时，它们就会被移除。</strong></p>
<div class="warning">
<p>以下是解释如何使用少的资源特征检测工作：</p>
<ul>
<li>
<a href="http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting">http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting</a>
</li>
<li>
<a href="http://www.jibbering.com/faq/faq_notes/not_browser_detect.html">http://www.jibbering.com/faq/faq_notes/not_browser_detect.html</a>
</li>
<li>
<a href="http://yura.thinkweb2.com/cft/">http://yura.thinkweb2.com/cft/</a>
</li>
</ul>
</div>
<p>对于你自己的项目功能检测的需求，
			我们强烈建议使用外部库，比如<a href="http://modernizr.com">Modernizr</a>的，而不是依赖于<code>jQuery.support</code>上的属性。</p>
<p>在这些测试包括<code>jQuery.support</code>如下：
			</p>
<ul>
<li>
<code>ajax</code> 如果浏览器能创建 <code>XMLHttpRequest</code> 对象，则返回 true。
			            </li>
<li>
<code>boxModel</code> 如果页面是根据 <a href="http://www.w3.org/TR/REC-CSS2/box.html">W3C CSS Box Model</a> (当 IE 6 和 7 工作在 Quirks 模式下，该属性值是 false) 进行描绘的，则返回 true。在文档 ready 发生之前，该属性值一直是 null。
			            </li>
<li>
<code>changeBubbles</code> 如果 change 事件满足 <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a> 的要求，在 DOM 树中向上冒泡时，则返回 true。(目前 IE 会返回 false，因为冒泡行为是 jQuery 模拟的。)
			            </li>
<li>
<code>checkClone</code> 如果浏览器正确克隆了文档片断中的复选框或单选按键的状态，则返回 true。
			            </li>
<li>
<code>checkOn</code> 当复选框在没有赋值的情况下，其默认值是 "on"，则返回 true。
			            </li>
<li>
<code>cors</code> 如果浏览器能创建 <code>XMLHttpRequest</code> 对象，并且该 <code>XMLHttpRequest</code> 对象含有 <code>withCredentials</code> 属性的话，则返回 true。在尚不支持 cors 属性，但是允许跨域 <abbr title="XMLHttpRequest">XHR</abbr> 请求(例如 windows gadget, 等)的环境下，要启用跨域请求，请进行如下设置 <code>$.support.cors = true;</code>。
			               <a href="http://www.w3.org/TR/cors/">CORS WD</a>
</li>
<li>
<code>cssFloat</code> 如果属性值含有的 CSS float 值是 .cssFloat 的话，则返回 true。其中， .cssFloat 是在 <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties-cssFloat">CSS Spec</a> 中定义的。(目前在 IE 中，该属性的返回值是 false，因为 IE 使用了 styleFloat 来代替该属性)。
			            </li>
<li>
<code>hrefNormalized</code> 如果 <code>.getAttribute()</code> 方法返回的 <code>href</code> 属性值没有发生变化，并不是标准化成完整的 URL 的话，则返回 true。(目前在 IE 中会返回 false，因为 IE 会将 URL 标准化。)
			               
			               <div>
<a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-666EE0F9">DOM l3 spec</a>
</div>
</li>
<li>
<code>htmlSerialize</code> 如果浏览器能够使用元素的 <code>.innerHTML</code> 属性来序列化/插入 <code>&lt;link&gt;</code> 元素的话，则返回 true。(目前在 IE 中会返回 false)。 
			               <div>
<a href="http://www.w3.org/TR/2008/WD-html5-20080610/serializing.html#html-fragment">HTML5 WD</a>
</div>
</li>
<li>
<code>leadingWhitespace</code> 如果使用 .innerHTML 进行内容插入时，插入后的结果和所提供的内容完全一致，并且保留开头的空白字符，则返回 true。(在 IE 6-8 中返回 false)。 
			               <div>
<a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML5 WD</a>
</div>
</li>
<li>
<code>noCloneChecked</code> 如果克隆后的 DOM 元素保持了 <code>.checked</code> expando 状态，则返回 true。 (目前在 IE 中会返回 false)。 (在 jQuery 1.5.1 中追加的该属性)
			            </li>
<li>
<code>noCloneEvent</code> 如果克隆后的 DOM 元素上并没有被克隆元素上的事件(也就是说，源元素不是被克隆的。)，则返回 true。(目前在 IE 中会返回 false)。
			               <div>
<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Registration-interfaces-h3">DOM l2 spec</a>
</div>
</li>
<li>
<code>opacity</code> 如果浏览器能正确的处理透明度属性，则返回 true。(目前在 IE 中会返回 false，因为 IE 使用了 alpha 滤镜来代替该属性)。
			               <div>
<a href="http://www.w3.org/TR/css3-color/#transparency">CSS3 spec</a>
</div>
</li>
<li>
<code>optDisabled</code> 如果含有被禁用的 option 元素的 select 元素没有被自动禁用的话，则返回 true。
			               <div>
<a href="http://dev.w3.org/html5/spec/the-button-element.html#attr-option-disabled">HTML5 WD</a>
</div>
</li>
<li>
<code>optSelected</code> 如果被默认选中的 <code>&lt;option&gt;</code> 元素是通过 <code>selected</code> 属性被选中的，则返回 true。
			               <div>
<a href="http://dev.w3.org/html5/spec/the-button-element.html#attr-option-selected">HTML5 WD</a>
</div>
</li>
<li>
<code>scriptEval()</code> 如果通过标准的 DOM 操作方法，例如，<code>.appendChild()</code> 和 <code>.createTextNode()</code>，向文档中插入内嵌脚本时，如果脚本被自动计算并执行了，则返回 true。(目前在 IE 中会返回 false，因为 IE 使用 <code>.text</code> 来插入可执行的脚本)。
			               
			               <div>
<strong>注意: 该属性在 jQuery 1.6 中已经被移除。</strong>在 jQuery 1.5.1 之前，<code>scriptEval()</code> 方法还是一个静态的 <code>scriptEval</code> 属性。将静态属性改成方法，允许测试被推迟到第一次使用时进行，是为了防止违反内嵌脚本的内容安全策略。
			               </div>
<div>
<a href="http://www.w3.org/TR/2008/WD-html5-20080610/tabular.html#script">HTML5 WD</a>
</div>
</li>
<li>
<code>style</code> 如果可以通过 DOM 属性访问元素的 inline 样式，以满足 DOM Level 2 规约，则返回 true。在这种情况下，使用 <code>.getAttribute('style')</code> 能够返回 style 的值。在 Internet Explorer 中，则要使用 <code>.cssText</code> 来达到相同的目的。
			               <div>
<a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM l2 Style spec</a>
</div>
</li>
<li>
<code>submitBubbles</code> submit 事件根据 <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a> 的规定，能够在 DOM 树中向上冒泡，则返回 true。(目前在 IE 中会返回 false，因为冒泡行为是 jQuery 模拟的)。
			            </li>
<li>
<code>tbody</code> 如果允许一个空的 <code>&lt;table&gt;</code> 元素在没有 <code>&lt;tbody&gt;</code> 元素的情况下存在，则返回 true。根据 HTML 规范，<code>&lt;table&gt;</code> 的子元素是可选的，因此，在完全符合规范的浏览器中，该属性的值应该是 true。如果返回了 false，则我们必须要考虑浏览器隐式注入 <code>&lt;tbody&gt;</code> 标签的可能性。(目前在 IE 中会返回 false，因为如果通过 <code>innerHTML</code> 进行赋值的字符串中不存在 <code>tbody</code> 的话，则 IE 会自动插入 <code>tbody</code>)。
			               <div>
<a href="http://dev.w3.org/html5/spec/Overview.html#the-table-element">HTML5 spec</a>
</div>
</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc"> 返回 iframe 的盒子模型。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">20</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).html(<span class="string">"This frame uses the W3C box model: &lt;span&gt;"</span> +</code></div></div><div class="container"><div class="line"><code>            jQuery.support.boxModel + <span class="string">"&lt;/span&gt;"</span>);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">在 Internet Explorer 中，访问的页面处于 QuirksMode，则返回 false。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>jQuery.support.boxModel</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="literal">false</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>