mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-29 13:04:32 +08:00
607 lines
34 KiB
HTML
607 lines
34 KiB
HTML
<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"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>one<span class="tag"></<span class="title">p</span>></span> <span class="tag"><<span class="title">div</span>></span><span class="tag"><<span class="title">p</span>></span>two<span class="tag"></<span class="title">p</span>></span><span class="tag"></<span class="title">div</span>></span> <span class="tag"><<span class="title">p</span>></span>three<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"div > 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"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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 元素字符串(例如 <div/> or <div></div>).</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><tag ... ></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">"<p id='test'>My <em>new</em> text</p>"</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创建一个新的<div>元素，并且设置innerHTML属性为传入的HTML代码片段。当参数是一个单标签，就像 <code>$('<img />')</code> or <code>$('<a></a>')</code>，jQuery将使用javasrcipt原生的 <code>createElement()</code>函数创建这个元素。</p>
|
||
<p>当传入一个复杂的html，一些浏览器可能不会产生一个完全复制HTML源代码所提供的DOM。正如前面提到的，jQuery使用的浏览器<code>.innerHTML</code>属性来解析传递的HTML并将其插入到当前文档中。在此过程中，一些浏览器过滤掉某些元素，如<code><html></code>, <code><title></code>, 或 <code><head></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">"<a href='http://jquery.com'></a>"</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">"<img />"</span> );</code></div></div><div class="container"><div class="line"><code>$( <span class="string">"<input>"</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<br/>2<br/>3"</span> ); <span class="comment">// returns [<br>, "2", <br>]</span></code></div></div><div class="container"><div class="line"><code>el = $( <span class="string">"1<br/>2<br/>3 >"</span> ); <span class="comment">// returns [<br>, "2", <br>, "3 &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">"<div></div>"</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>$("<input>", {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">"<div></div>"</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">"<div><p>Hello</p></div>"</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">"<div/>"</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> |