1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.support</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/properties/" title="View all posts in Properties">Properties</a> > <a href="http://api.jquery.com/category/properties/global-jquery-object-properties/" title="View all posts in Properties of the Global jQuery Object">Properties of the Global jQuery Object</a></span> | <span class="category"><a href="http://api.jquery.com/category/utilities/" title="View all posts in Utilities">Utilities</a></span>
</div>
</div>
<div id="jQuery-support1" class="entry property">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.support</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Object">Object</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>A collection of properties that represent the presence of different browser features or bugs.</p>
<ul class="signatures"><li class="signature" id="jQuery-support"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>jQuery.support</h4></li></ul>
<div class="longdesc">
<p>Rather than using <code>$.browser</code> to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to perform <strong>feature detection</strong>. This means that prior to executing code which relies on a browser feature, we test to ensure that the feature works properly. To make this process simpler, jQuery performs many such tests and makes the results available to us as properties of the <code>jQuery.support</code> object.</p>
<p>The values of all the support properties are determined using feature detection (and do not use any form of browser sniffing). </p>
<blockquote>
<p>Following are a few resources that explain how feature detection works:</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>
</blockquote>
<p>While jQuery includes a number of properties, developers should feel free to add their own as their needs dictate. Many of the <code>jQuery.support</code> properties are rather low-level, so they are most useful for plugin and jQuery core development, rather than general day-to-day development. Since jQuery requires these tests internally, they must be performed on <em>every</em> page load; for that reason this list is kept short and limited to features needed by jQuery itself.</p>
<p>The tests included in <code>jQuery.support</code> are as follows:</p>
<ul>
<li>
<code>ajax</code> is equal to true if a browser is able to create an <code>XMLHttpRequest</code> object.</li>
<li>
<code>boxModel</code> is equal to true if the page is rendering according to the <a href="http://www.w3.org/TR/REC-CSS2/box.html">W3C CSS Box Model</a> (is currently false in IE 6 and 7 when they are in Quirks Mode). This property is null until document ready occurs.</li>
<li>
<code>changeBubbles</code> is equal to true if the change event bubbles up the DOM tree, as required by the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a>. (It is currently false in IE, and jQuery simulates bubbling).</li>
<li>
<code>checkClone</code> is equal to true if a browser correctly clones the checked state of radio buttons or checkboxes in document fragments.</li>
<li>
<code>checkOn</code> is equal to true if the value of a checkbox defaults to "on" when no value is specified.</li>
<li>
<code>cors</code> is equal to true if a browser can create an <code>XMLHttpRequest</code> object and if that <code>XMLHttpRequest</code> object has a <code>withCredentials</code> property. To enable cross-domain requests in environments that do not support cors yet but do allow cross-domain <abbr title="XMLHttpRequest">XHR</abbr> requests (windows gadget, etc), set <code>$.support.cors = true;</code>.
<a href="http://www.w3.org/TR/cors/">CORS WD</a>
</li>
<li>
<code>cssFloat</code> is equal to true if the name of the property containing the CSS float value is .cssFloat, as defined in the <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties-cssFloat">CSS Spec</a>. (It is currently false in IE, it uses styleFloat instead).</li>
<li>
<code>hrefNormalized</code> is equal to true if the <code>.getAttribute()</code> method retrieves the <code>href</code> attribute of elements unchanged, rather than normalizing it to a fully-qualified URL. (It is currently false in IE, the URLs are normalized).
<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> is equal to true if the browser is able to serialize/insert <code><link></code> elements using the <code>.innerHTML</code> property of elements. (is currently false in IE). <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> is equal to true if the browser inserts content with .innerHTML exactly as provided—specifically, if leading whitespace characters are preserved. (It is currently false in IE 6-8). <div><a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML5 WD</a></div>
</li>
<li>
<code>noCloneChecked</code> is equal to true if cloned DOM elements copy over the state of the <code>.checked</code> expando. (It is currently false in IE). (Added in jQuery 1.5.1)</li>
<li>
<code>noCloneEvent</code> is equal to true if cloned DOM elements are created without event handlers (that is, if the event handlers on the source element are not cloned). (It is currently false in IE). <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> is equal to true if a browser can properly interpret the opacity style property. (It is currently false in IE, it uses alpha filters instead). <div><a href="http://www.w3.org/TR/css3-color/#transparency">CSS3 spec</a></div>
</li>
<li>
<code>optDisabled</code> is equal to true if option elements within disabled select elements are not automatically marked as disabled. <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> is equal to true if an <code><option></code> element that is selected by default has a working <code>selected</code> property. <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> is equal to true if inline scripts are automatically evaluated and executed when inserted into the document using standard DOM manipulation methods such as <code>.appendChild()</code> and <code>.createTextNode()</code>. (It is currently false in IE, it uses <code>.text</code> to insert executable scripts).
<div>
<strong>Note: No longer supported; removed in jQuery 1.6. Prior to jQuery 1.5.1</strong>, the <code>scriptEval()</code> method was the static <code>scriptEval</code> property. The change to a method allowed the test to be deferred until first use to prevent content security policy inline-script violations. </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> is equal to true if inline styles for an element can be accessed through the DOM attribute called style, as required by the DOM Level 2 specification. In this case, <code>.getAttribute('style')</code> can retrieve this value; in Internet Explorer, <code>.cssText</code> is used for this purpose. <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> is equal to true if the submit event bubbles up the DOM tree, as required by the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a>. (It is currently false in IE, and jQuery simulates bubbling).</li>
<li>
<code>tbody</code> is equal to true if an empty <code><table></code> element can exist without a <code><tbody></code> element. According to the HTML specification, this sub-element is optional, so the property should be true in a fully-compliant browser. If false, we must account for the possibility of the browser injecting <code><tbody></code> tags implicitly. (It is currently false in IE, which automatically inserts <code>tbody</code> if it is not present in a string assigned to <code>innerHTML</code>). <div><a href="http://dev.w3.org/html5/spec/Overview.html#the-table-element">HTML5 spec</a></div>
</li>
</ul>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Returns the box model for the iframe.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:20px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
</p>
<script>
$("p").html("This frame uses the W3C box model: <span>" +
jQuery.support.boxModel + "</span>");
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Returns false if the page is in QuirksMode in Internet Explorer</span>
</h4>
<pre class="prettyprint"><code class="example">jQuery.support.boxModel</code></pre>
<h4>Result:</h4>
<pre><code class="results">false</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
