mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 23:14:06 +08:00
614 lines
35 KiB
HTML
614 lines
35 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">.wrapInner()</h1>
|
||
<div class="entry-meta">
|
||
所属分类：<span class="category"><a href="/category/manipulation/">DOM 操作</a> > <a href="/category/manipulation/dom-insertion-around/">DOM 插入并包裹现有内容</a></span>
|
||
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/wrapInner/" target="_blank">.wrapInner()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<!-- .entry-header -->
|
||
<div class="entry-content">
|
||
<article class="entry method" id="wrapInner1"><h2 class="section-title">
|
||
<span class="name">.wrapInner( wrappingElement )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
|
||
</h2>
|
||
<div class="entry-wrapper">
|
||
<p class="desc"><strong>描述: </strong>在匹配元素里的内容外包一层结构。</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="wrapInner-wrappingElement">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.wrapInner( wrappingElement )</h4>
|
||
<ul><li>
|
||
<div><strong>wrappingElement</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。</div>
|
||
</li></ul>
|
||
</li>
|
||
<li class="signature" id="wrapInner-functionindex">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.wrapInner( function(index) )</h4>
|
||
<ul><li>
|
||
<div><strong>function(index)</strong></div>
|
||
<div>类型: <a href="/Types/#Function">Function</a>()</div>
|
||
<div>一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中 ，<code>this</code>指向集合中当前的元素。/div>
|
||
|
||
|
||
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p><code>.wrapInner()</code>函数可以接受任何字符串或对象，可以传递给<code>$()</code>工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。</p>
|
||
<p>考虑下面的HTML：</p>
|
||
<div class="syntaxhighlighter xml 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>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span>Goodbye<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>用<code>.wrapInner()</code>, 我们可以再inner元素的内容外加一个新的<code><div></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>$(<span class="string">'.inner'</span>).wrapInner(<span class="string">'<div class="new" />'</span>);</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>结果如下：</p>
|
||
<div class="syntaxhighlighter xml 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="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"new"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"new"</span>></span>Goodbye<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>该方法的第二种用法允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。例如：</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">'.inner'</span>).wrapInner(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="string">'<div class="'</span> + <span class="keyword">this</span>.nodeValue + <span class="string">'" />'</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>这将使得每个<code><div></code>有和他文本内容一样名字的class:</p>
|
||
<div class="syntaxhighlighter xml 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="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"Hello"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"Goodbye"</span>></span>Goodbye<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p><strong>注意:</strong> 当通过一个选择器字符串传递给<code>.wrapInner()</code> 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子：</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>$(elem).wrapInner(<span class="string">"<div class='test' />"</span>);</code></div></div><div class="container"><div class="line"><code>$(elem).wrapInner(<span class="string">"<div class='test'></div>"</span>);</code></div></div><div class="container"><div class="line"><code>$(elem).wrapInner(<span class="string">"<div class=\"test\"></div>"</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">选中所有段落，然后在段落内容外加粗体：</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>
|
||
</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">style</span>></span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#bbf</span>;</span></span> <span class="rule">}</span></span></span><span class="tag"></<span class="title">style</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>Hello<span class="tag"></<span class="title">p</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">p</span>></span>cruel<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">p</span>></span>World<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 class="string">"p"</span>).wrapInner(<span class="string">"<b></b>"</span>);</span><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">为 body 元素的内容包裹一个对象树</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>
|
||
</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">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">2</span>px green solid;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule">}</span></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">background</span>:<span class="value">yellow;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</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> Plain old text, or is it?</code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript">$(<span class="string">"body"</span>).wrapInner(<span class="string">"<div><div><p><em><b></b></em></p></div></div>"</span>);</span><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-2">
|
||
<h4>Example: <span class="desc">选择所有的段落，并用 b 标签包裹每个匹配元素的内容。</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>
|
||
</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">style</span>></span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#9f9</span>;</span></span> <span class="rule">}</span></span></span><span class="tag"></<span class="title">style</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>Hello<span class="tag"></<span class="title">p</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">p</span>></span>cruel<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">p</span>></span>World<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 class="string">"p"</span>).wrapInner(document.createElement(<span class="string">"b"</span>));</span><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-3">
|
||
<h4>Example: <span class="desc">选择所有的段落，并用 jQuery object 包裹每个匹配元素的内容。</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>
|
||
</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">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#9f9</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="class">.red</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"></<span class="title">style</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>Hello<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">p</span>></span>cruel<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">p</span>></span>World<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 class="string">"p"</span>).wrapInner($(<span class="string">"<span class='red'></span>"</span>));</span><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></section>
|
||
</div> </li></ul></li></ul></div>
|
||
</article><!-- #post-<?php the_ID(); ?> -->
|
||
</div>
|
||
<div class="widget-area" id="sidebar" role="complementary">
|
||
<aside class="widget" id="categories">
|
||
<ul>
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/ajax/">Ajax</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/ajax/global-ajax-event-handlers/">全局 Ajax 事件处理器</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/ajax/helper-functions/">辅助函数</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/ajax/low-level-interface/">底层接口</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/ajax/shorthand-methods/">快捷方法</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/attributes/">DOM 属性</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/callbacks-object/">回调对象</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/core/">核心 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/css/">CSS</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/data/">数据操作</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/deferred-object/">延迟对象</a>
|
||
</li>
|
||
<li class="cat-item cat-item-7">
|
||
<a href="/category/deprecated/">弃用</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/deprecated/deprecated-1.3/">1.3 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/deprecated/deprecated-1.4/">1.4 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/deprecated/deprecated-1.7/">1.7 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/deprecated/deprecated-1.8/">1.8 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/deprecated/deprecated-1.9/">1.9 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/deprecated/deprecated-1.10/">1.10 版本弃用的 API</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/deprecated/deprecated-3.0/">3.0 版本弃用的 API</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-8">
|
||
<a href="/category/dimensions/">尺寸</a>
|
||
</li>
|
||
<li class="cat-item cat-item-9">
|
||
<a href="/category/effects/">特效</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/effects/basics/">基本特效</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/effects/custom-effects/">自定义</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/effects/fading/">渐变</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/effects/sliding/">滑动</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-10">
|
||
<a href="/category/events/">事件</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/events/browser-events/">浏览器事件</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/events/document-loading/">文档加载</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/events/event-handler-attachment/">绑定事件处理器</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/events/event-object/">事件对象</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/events/form-events/">表单事件</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/events/keyboard-events/">键盘事件</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/events/mouse-events/">鼠标事件</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-11">
|
||
<a href="/category/forms/">表单</a>
|
||
</li>
|
||
<li class="cat-item cat-item-12">
|
||
<a href="/category/internals/">内部函数</a>
|
||
</li>
|
||
<li class="cat-item cat-item-13">
|
||
<a href="/category/manipulation/">DOM 操作</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/manipulation/class-attribute/">class 属性</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/manipulation/copying/">复制元素</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/manipulation/dom-insertion/">DOM 插入</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/manipulation/dom-insertion-around/">DOM 插入并包裹现有内容</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/manipulation/dom-insertion-inside/">DOM 插入现有元素内</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/manipulation/dom-insertion-outside/">DOM 插入现有元素外</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/manipulation/dom-removal/">DOM 移除</a>
|
||
</li>
|
||
<li class="cat-item cat-item-7">
|
||
<a href="/category/manipulation/dom-replacement/">DOM 替换</a>
|
||
</li>
|
||
<li class="cat-item cat-item-8">
|
||
<a href="/category/manipulation/general-attributes/">通用属性操作</a>
|
||
</li>
|
||
<li class="cat-item cat-item-9">
|
||
<a href="/category/manipulation/style-properties/">CSS 属性</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-14">
|
||
<a href="/category/miscellaneous/">杂项</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/miscellaneous/collection-manipulation/">集合操作</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/miscellaneous/data-storage/">数据存储</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/miscellaneous/dom-element-methods/">DOM 元素方法</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/miscellaneous/setup-methods/">设置</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-15">
|
||
<a href="/category/offset/">偏移</a>
|
||
</li>
|
||
<li class="cat-item cat-item-16">
|
||
<a href="/category/properties/">内部属性</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/properties/jquery-object-instance-properties/">jQuery 对象实例的属性</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/properties/global-jquery-object-properties/">全局 jQuery 对象的属性</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-17">
|
||
<a href="/category/removed/">已删除的函数</a>
|
||
</li>
|
||
<li class="cat-item cat-item-18">
|
||
<a href="/category/selectors/">选择器</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/selectors/attribute-selectors/">属性选择器</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/selectors/basic-css-selectors/">基础选择器</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/selectors/basic-filter-selectors/">基础过滤</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/selectors/child-filter-selectors/">子元素过滤</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/selectors/content-filter-selector/">内容过滤</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/selectors/form-selectors/">表单</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/selectors/hierarchy-selectors/">层级</a>
|
||
</li>
|
||
<li class="cat-item cat-item-7">
|
||
<a href="/category/selectors/jquery-selector-extensions/">jQuery 扩展</a>
|
||
</li>
|
||
<li class="cat-item cat-item-8">
|
||
<a href="/category/selectors/visibility-filter-selectors/">可见性过滤</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-19">
|
||
<a href="/category/traversing/">遍历</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/traversing/filtering/">过滤</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/traversing/miscellaneous-traversal/">其它遍历</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/traversing/tree-traversal/">树遍历</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="cat-item cat-item-20">
|
||
<a href="/category/uncategorized/">未归类</a>
|
||
</li>
|
||
<li class="cat-item cat-item-21">
|
||
<a href="/category/utilities/">工具类</a>
|
||
</li>
|
||
<li class="cat-item cat-item-22">
|
||
<a href="/category/version/">版本</a>
|
||
<ul class="children">
|
||
<li class="cat-item cat-item-0">
|
||
<a href="/category/version/1.0/">1.0 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-1">
|
||
<a href="/category/version/1.0.4/">1.0.4 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-2">
|
||
<a href="/category/version/1.1/">1.1 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-3">
|
||
<a href="/category/version/1.1.2/">1.1.2 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-4">
|
||
<a href="/category/version/1.1.3/">1.1.3 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-5">
|
||
<a href="/category/version/1.1.4/">1.1.4 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-6">
|
||
<a href="/category/version/1.2/">1.2 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-7">
|
||
<a href="/category/version/1.2.3/">1.2.3 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-8">
|
||
<a href="/category/version/1.2.6/">1.2.6 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-9">
|
||
<a href="/category/version/1.3/">1.3 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-10">
|
||
<a href="/category/version/1.4/">1.4 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-11">
|
||
<a href="/category/version/1.4.1/">1.4.1 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-12">
|
||
<a href="/category/version/1.4.2/">1.4.2 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-13">
|
||
<a href="/category/version/1.4.3/">1.4.3 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-14">
|
||
<a href="/category/version/1.4.4/">1.4.4 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-15">
|
||
<a href="/category/version/1.5/">1.5 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-16">
|
||
<a href="/category/version/1.5.1/">1.5.1 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-17">
|
||
<a href="/category/version/1.6/">1.6 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-18">
|
||
<a href="/category/version/1.7/">1.7 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-19">
|
||
<a href="/category/version/1.8/">1.8 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-20">
|
||
<a href="/category/version/1.9/">1.9 版本</a>
|
||
</li>
|
||
<li class="cat-item cat-item-21">
|
||
<a href="/category/version/1.12-2.2/">Version 1.12 & 2.2</a>
|
||
</li>
|
||
<li class="cat-item cat-item-22">
|
||
<a href="/category/version/3.0/">Version 3.0</a>
|
||
</li>
|
||
<li class="cat-item cat-item-23">
|
||
<a href="/category/version/3.1/">Version 3.1</a>
|
||
</li>
|
||
<li class="cat-item cat-item-24">
|
||
<a href="/category/version/all/">All</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
</article> |