uTools-Manuals/docs/jQuery/jQuery.html
2019-04-21 11:50:48 +08:00

607 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/core/">核心 API</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/jQuery/" target="_blank">jQuery()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
返回匹配的元素集合无论是通过在DOM的基础上传递的参数还是创建一个HTML字符串。<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#jQuery1">jQuery( selector [, context ] )</a><ul>
<li>jQuery( selector [, context ] )</li>
<li>jQuery( element )</li>
<li>jQuery( elementArray )</li>
<li>jQuery( object )</li>
<li>jQuery( jQuery object )</li>
<li>jQuery()</li>
</ul>
</li>
<li>
<a href="#jQuery2">jQuery( html [, ownerDocument ] )</a><ul>
<li>jQuery( html [, ownerDocument ] )</li>
<li>jQuery( html, attributes )</li>
</ul>
</li>
<li>
<a href="#jQuery3">jQuery( callback )</a><ul><li>jQuery( callback )</li></ul>
</li>
</ul>
</div><article class="entry method" id="jQuery1"><h2 class="section-title">
<span class="name">jQuery( selector [, context ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>接受一个包含一个CSS选择器的字符串用于匹配的一组元素。</p>
<ul class="signatures">
<li class="signature" id="jQuery-selector-context">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( selector [, context ] )</h4>
<ul>
<li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#selector">selector</a>
</div>
<div>一个包含CSS选择器的字符串</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#Element,%20jQuery">Element, jQuery</a>
</div>
<div>
一个DOM 元素、文档或 作为上下文context的jQuery 对象。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-element">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( element )</h4>
<ul><li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个用于封装成jQuery对象的DOM元素。</div>
</li></ul>
</li>
<li class="signature" id="jQuery-elementArray">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( elementArray )</h4>
<ul><li>
<div><strong>elementArray</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>一个用于封装成jQuery对象的DOM元素数组。</div>
</li></ul>
</li>
<li class="signature" id="jQuery-object">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( object )</h4>
<ul><li>
<div><strong>object</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个普通的对象包装在一个jQuery对象。</div>
</li></ul>
</li>
<li class="signature" id="jQuery-jQuery-object">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( jQuery object )</h4>
<ul><li>
<div><strong>jQuery object</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个用于克隆的jQuery对象。</div>
</li></ul>
</li>
<li class="signature" id="jQuery">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>jQuery()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>在上文列出的第一个公式中,<code>jQuery()</code> — 这个也可以写成 <code>$()</code> — 通过提供的选择器检索任何DOM元素并且通过这些元素创建一个新的jQuery对象</p>
<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="string">"div.foo"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果提供的选择器没有相匹配的新的jQuery对象是“空”;即,它不包含任何元素,<code><a href="/length">.length</a></code>属性为0。</p>
<h4 id="selector-context">Selector Context(上下文选择器)</h4>
<p>默认情况下,选择器是从文档根节点开始执行搜索。然而,可以给<code>$()</code>函数传递一个用于上下文检索的第二个可选参数(注:第二个上下文参数用于来指定选择器查找的范围)。 举个例子,如果在一个回调函数中我们希望为一个元素做一个检索, 我们可以限制搜索的范围:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"div.foo"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"span"</span>, <span class="keyword">this</span> ).addClass( <span class="string">"bar"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>由于我们限制这个span选择器的上下文为 <code>this</code>, 只有在点击元素里的span将会被附加样式。</p>
<p>在jQuery内部选择器上下文是使用<code>.find()</code>方法的,所以 <code>$('span', this)</code> 等价于<code>$(this).find('span')</code></p>
<h4 id="using-dom-elements">Using DOM elements(使用DOM节点)</h4>
<p>这个函数的第二个和第三个的方式使用一个或多个DOM元素或者我们用其他一些方式已找到的元素,创建一个jQuery对象.</p>
<p>
<strong>注意:</strong>这些方式意思仅消耗DOM元素;输送混合数据给 elementArray元素数组 的形式是特别鼓励。</p>
<p>
这个设备普遍使用jQuery方法通过一个回调函数传递<code>this</code>关键字 </p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"div.foo"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).slideUp();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这个例子,当点击使得这些元素隐藏的时候使用了滑动动画。因为事件处理通过 <code>this</code> 关键字,接收到了被点击的元素,但是该元素是原生的 DOM 元素,所以需要通过 $() 函数,将它转换成 jQuery 对象,然后就可以在该 jQuery 对象上调用 jQuery 方法了。</p>
<p>当一个Ajax请求返回XML数据时我们可以使用 <code>$()</code> 方法去把他包含在jQuery对象中我们可以很容易的工作。一旦这样做了之后我们可以使用<code>.find()</code>和其他DOM遍历方法在XML结构中检索特定元素。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post( <span class="string">"url.xml"</span>, <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> $child = $(data).find(<span class="string">"child"</span>);</code></div></div><div class="container"><div class="line"><code>})</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="cloning-jquery-objects">Cloning jQuery Objects(克隆jQuery对象)</h4>
<p>当一个jQuery对象作为一个参数传递给<code>$()</code>方法时这个对象的一个克隆对象将被创建。这个新的jQuery对象引用同一DOM元素。</p>
<h4 id="returning-empty-set">Returning an Empty Set(返回一个空集合)</h4>
<p>在jQuery 1.4中,如果你传递给<code>jQuery()</code>方法一个<em>空参数</em>一个空的jQuery设置将被返回<code><a href="/length">.length</a></code>属性为0。 在以前的jQuery版本中一个包含整个文档节点的集合将被返回。</p>
<h4 id="working-with-plain-objects">Working With Plain Objects使用普通的对象</h4>
<p>目前只支持包裹在jQuery中的普通的JavaScript对象是<code>.data()</code>,<code>.prop()</code>,<code>.bind()</code>, <code>.unbind()</code>, <code>.trigger()</code><code>.triggerHandler()</code>。使用<code>.data()</code>(或者任何返回<code>.data()</code>的方法在一个普通的对象会产生一个新的属性的名为jQuery{randomNumber}如jQuery123456789</p>
<div class="syntaxhighlighter javascript nogutter">
<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>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// define a plain object</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> foo = {foo: <span class="string">"bar"</span>, hello: <span class="string">"world"</span>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Pass it to the jQuery function</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> $foo = $( foo );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// test accessing property values</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> test1 = $foo.prop( <span class="string">"foo"</span> ); <span class="comment">// bar</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// test setting property values</span></code></div></div><div class="container"><div class="line"><code>$foo.prop( <span class="string">"foo"</span>, <span class="string">"foobar"</span> );</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> test2 = $foo.prop( <span class="string">"foo"</span> ); <span class="comment">// foobar</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// test using .data() as summarized above</span></code></div></div><div class="container"><div class="line"><code>$foo.data( <span class="string">"keyName"</span>, <span class="string">"someValue"</span>);</code></div></div><div class="container"><div class="line"><code>console.log( $foo ); <span class="comment">// will now contain a jQuery{randomNumber} property</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// test binding an event name and triggering</span></code></div></div><div class="container"><div class="line"><code>$foo.bind( <span class="string">"eventName"</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> console.log(<span class="string">"eventName was called"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$foo.trigger( <span class="string">"eventName"</span> ); <span class="comment">// logs "eventName was called"</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
如果<code>.trigger( "eventName" )</code>被使用它会在这个对象上搜寻一个“eventName的”属性并且尝试任何附加在jQuery上的处理器执行完成后执行。它不检查该属性是否是一个函数。为了避免这种情况<code>.triggerHandler( "eventName" )</code>应代替使用。</p>
<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>$foo.triggerHandler( <span class="string">"eventName"</span> ); <span class="comment">// also logs "eventName was called"</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</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">查找所有 div 下的 p 元素,并为它们加上边框。</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>
</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">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>one<span class="tag">&lt;/<span class="title">p</span>&gt;</span> <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;<span class="title">p</span>&gt;</span>two<span class="tag">&lt;/<span class="title">p</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span> <span class="tag">&lt;<span class="title">p</span>&gt;</span>three<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">"div &gt; p"</span>).css(<span class="string">"border"</span>, <span class="string">"1px solid gray"</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">查找文档中第一个表单中的所有单选按钮。</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>$(<span class="string">"input:radio"</span>, document.forms[<span class="number">0</span>]);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">查找 Ajax 返回的 XML 文档中的所有 div 元素。</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>$(<span class="string">"div"</span>, xml.responseXML);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">将页面的背景色设置成黑色。</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>$(document.body).css( <span class="string">"background"</span>, <span class="string">"black"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">隐藏 myForm 表单中的所有 input 元素。</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>$(myForm.elements).hide()</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article><article class="entry method" id="jQuery2"><h2 class="section-title">
<span class="name">jQuery( html [, ownerDocument ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。</p>
<ul class="signatures">
<li class="signature" id="jQuery-html-ownerDocument">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( html [, ownerDocument ] )</h4>
<ul>
<li>
<div><strong>html</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>用于动态创建DOM元素的HTML标记字符串<strong>不是</strong>XML。</div>
</li>
<li>
<div><strong>ownerDocument</strong></div>
<div>类型: <a href="/Types/#document">document</a>
</div>
<div>一个文档的新元素将被创建。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-html-attributes">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>jQuery( html, attributes )</h4>
<ul>
<li>
<div><strong>html</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个单标记的HTML 元素字符串(例如 &lt;div/&gt; or &lt;div&gt;&lt;/div&gt;).</div>
</li>
<li>
<div><strong>attributes</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>访问新创建元素的属性,事件和方法。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<h4 id="creating-new-elements">Creating New Elements创建新元素</h4>
<p>如果一个字符串做为一个参数传递个<code>$()</code>, jQuery 检查这个属性是否看上去像HTML (也就是, <code>&lt;tag ... &gt;</code> 之类的元素在这个字符串中)。如果没有, 这个字符串将被解释为选择器, 作为解析上下文。 但是如果该字符串是一个 HTML 代码片断那么jQuery 就会根据它尝试创建一个新的 DOM 元素。然后jQuery对象创建并返回引用的这些元素。我们可以在这个对象上执行一些常用的jQuery方法</p>
<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="string">"&lt;p id='test'&gt;My &lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;"</span> ).appendTo( <span class="string">"body"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>一个字符串显式解析成HTML请使用<a href="/jQuery.parseHTML">$.parseHTML()</a> 方法.</p>
<p>在上面的例子中当一个HTML比一个没有属性的简单标签复杂的时候实际上创建元素的处理是利用了浏览器的 <code>innerHTML</code> 机制。特别说明jQuery创建一个新的&lt;div&gt;元素并且设置innerHTML属性为传入的HTML代码片段。当参数是一个单标签就像 <code>$('&lt;img /&gt;')</code> or <code>$('&lt;a&gt;&lt;/a&gt;')</code>jQuery将使用javasrcipt原生的 <code>createElement()</code>函数创建这个元素。</p>
<p>当传入一个复杂的html一些浏览器可能不会产生一个完全复制HTML源代码所提供的DOM。正如前面提到的jQuery使用的浏览器<code>.innerHTML</code>属性来解析传递的HTML并将其插入到当前文档中。在此过程中一些浏览器过滤掉某些元素<code>&lt;html&gt;</code>, <code>&lt;title&gt;</code>, 或 <code>&lt;head&gt;</code>的元素。其结果是,被插入元素可能不是传入的原始的字符串。</p>
<p>不过这些被过滤掉的标签有限的。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如Internet Explorer的版本8之前转换所有链接的<code>href</code>属性为绝对URL路径和Internet Explorer第9版之前不增加一个单独的<a href="http://code.google.com/p/html5shiv/">兼容层</a>的情况下将无法正确处理HTML5元素。</p>
<p>为了确保跨平台的兼容性,代码片段必须是良好的。标签可以包含其他元素,但需要搭配的结束标记:</p>
<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="string">"&lt;a href='http://jquery.com'&gt;&lt;/a&gt;"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>标签不能包含元素可能很快封闭,当然也可以不这样做:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"&lt;img /&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"&lt;input&gt;"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>当传递HTML给<code>jQuery()</code>时,文本节点并不必当作 DOM 元素来看待。除了一些方法(如内容<code>.content()</code>),它们一般都被忽略或删除。例如:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> el = $( <span class="string">"1&lt;br/&gt;2&lt;br/&gt;3"</span> ); <span class="comment">// returns [&lt;br&gt;, "2", &lt;br&gt;]</span></code></div></div><div class="container"><div class="line"><code>el = $( <span class="string">"1&lt;br/&gt;2&lt;br/&gt;3 &gt;"</span> ); <span class="comment">// returns [&lt;br&gt;, "2", &lt;br&gt;, "3 &amp;gt;"]</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这是预期的结果。
</p>
<p>从jQuery 1.4开始,给<code>jQuery()</code> 的第二个参数可以接受一个简单的对象组成的一个属性集合,可以传递<a href="/attr">.attr()</a>方法。</p>
<p><strong>重要提示:</strong> 如果第二个参数被传递第一个参数中的HTML字符串
必须代表一个没有任何属性简单的元素。 <strong>从 jQuery 1.4开始</strong>,我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合,这些可以传递给<a href="/attr">.attr()</a> 方法。此外,一些<a href="/category/events/">event type事件类型</a>能通过, 而且后面的jQuery方法能够调用 <a href="/val">val</a>, <a href="/css">css</a>, <a href="/html">html</a>, <a href="/text">text</a>, <a href="/data">data</a>, <a href="/width">width</a>, <a href="/height">height</a>, or <a href="/offset">offset</a></p>
<p><strong>从 jQuery 1.8开始</strong>, 任何jQuery实例方法一个<code>jQuery.fn</code>的方法),可以被用来作为一个该对象的属性传递给第二个参数:</p>
<div class="syntaxhighlighter javascript nogutter">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"&lt;div&gt;&lt;/div&gt;"</span>, {</code></div></div><div class="container"><div class="line"><code> <span class="string">"class"</span>: <span class="string">"my-div"</span>,</code></div></div><div class="container"><div class="line"><code> on: {</code></div></div><div class="container"><div class="line"><code> touchstart: <span class="keyword">function</span>( event ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// do something</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>}).appendTo( <span class="string">"body"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
在这个对象中,<code>"class"</code>的名称必须使用引号括起来因为它是一个JavaScript保留字还有不能使用<code>"className"</code>因为它是指的DOM属性property不是属性attribute</p>
<p>虽然第二个参数是方便,它的灵活性可能会导致意想不到的后果(例如<code>$("&lt;input&gt;", {size: "4"})</code>调用<code>.size()</code>方法代替设置size属性。上面的代码块可以被写入代替为</p>
<div class="syntaxhighlighter javascript nogutter">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"&lt;div&gt;&lt;/div&gt;"</span> )</code></div></div><div class="container"><div class="line"><code>.addClass( <span class="string">"my-div"</span> )</code></div></div><div class="container"><div class="line"><code>.on({</code></div></div><div class="container"><div class="line"><code> touchstart: <span class="keyword">function</span>( event ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// do something</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>}).appendTo( <span class="string">"body"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4>Example: <span class="desc">动态创建一个 div 元素(以及它的内容),并将它追加到 body 元素后。在 jQuery 内部是通过所指定元素的 innerHTML 属性对新生成的元素进行赋值的。</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>$( <span class="string">"&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;"</span> ).appendTo( <span class="string">"body"</span> )</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1-1">
<h4>Example: <span class="desc">创建一些 DOM 元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"&lt;div/&gt;"</span>, {</code></div></div><div class="container"><div class="line"><code> <span class="string">"class"</span>: <span class="string">"test"</span>,</code></div></div><div class="container"><div class="line"><code> text: <span class="string">"Click me!"</span>,</code></div></div><div class="container"><div class="line"><code> click: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="keyword">this</span> ).toggleClass( <span class="string">"test"</span> );</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>}).appendTo( <span class="string">"body"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article><article class="entry method" id="jQuery3"><h2 class="section-title">
<span class="name">jQuery( callback )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>当DOM完成加载的时候绑定一个要执行的函数。</p>
<ul class="signatures"><li class="signature" id="jQuery-callback">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery( callback )</h4>
<ul><li>
<div><strong>callback</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>当DOM ready的时候执行的函数。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc-2">
<p>这个函数的作用如同<code>$(document).ready()</code>一样,只不过用这个函数时,需要把页面中所有需要在 DOM ready时执行的 <code>$()</code>操作符都包装到其中来。从技术上来说,这个函数是可链式调用的--但真正以这种方式链接的情况并不多。</p>
</div>
<section class="entry-examples" id="entry-examples-2"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-2-0">
<h4>Example: <span class="desc">当 DOM 加载完成时执行函数。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Document is ready</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2-1">
<h4>Example: <span class="desc">为了更加安全的使用 jQuery 的 $ 别名,而不依赖全局的 $ 别名,我们可以同时使用 $(document).ready() 的快捷方式和参数来达到此目的。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>jQuery(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Your code using failsafe $ alias here...</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>