uTools-Manuals/docs/jQuery/contents.html

132 lines
11 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">.contents()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/traversing/">遍历</a> &gt; <a href="/category/traversing/miscellaneous-traversal/">其它遍历</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/contents/" target="_blank">.contents()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="contents1"><h2 class="section-title">
<span class="name">.contents()</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="contents">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.contents()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数</div></li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>给定一个jQuery对象表示一个DOM元素的集合<code>.contents()</code>方法允许我们在 DOM 树中查找集合中的直接子元素,并根据匹配的元素创建一个新的 jQuery 对象。<code>.contents()</code><code>.children()</code>方法类似只不过前者包括文本节点以及jQuery对象中产生的HTML元素。</p>
<p>如果IFRAME是在与主页同域<code>.contents()</code>方法也可用于获取iframe中的文件内容。</p>
<p>考虑一个简单<code>&lt;div&gt;</code>中一些文本节点,其中每个元素是相隔两换行符(<code>&lt;br /&gt;</code> </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>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </code></div></div><div class="container"><div class="line"><code> do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">br</span> /&gt;</span><span class="tag">&lt;<span class="title">br</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> Ut enim ad minim veniam, quis nostrud exercitation ullamco </code></div></div><div class="container"><div class="line"><code> laboris nisi ut aliquip ex ea commodo consequat.</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">br</span> /&gt;</span> <span class="tag">&lt;<span class="title">br</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> Duis aute irure dolor in reprehenderit in voluptate velit </code></div></div><div class="container"><div class="line"><code> esse cillum dolore eu fugiat nulla pariatur.</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>我们可以使用<code>.contents()</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'.container'</span>).contents().filter(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="keyword">this</span>.nodeType == <span class="number">3</span>;</code></div></div><div class="container"><div class="line"><code>})</code></div></div><div class="container"><div class="line"><code> .wrap(<span class="string">'&lt;p&gt;&lt;/p&gt;'</span>)</code></div></div><div class="container"><div class="line"><code>.end()</code></div></div><div class="container"><div class="line"><code>.filter(<span class="string">'br'</span>)</code></div></div><div class="container"><div class="line"><code> .remove();</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>此代码首先检索<code>&lt;div class="container"&gt;</code>的内容,然后过滤它的文本节点,并且将它被包裹在段落标记内。这是通过测试元素的<a href="https://developer.mozilla.org/en/nodeType"><code>.nodeType</code>属性</a>。这个DOM属性保存一个数字代码以显示节点的类型;文本节点使用代码3。再次过滤的内容这次是<code>&lt;br /&gt;</code>元素,这些元素都将被删除。</p>
</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>
</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>Hello <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://ejohn.org/"</span>&gt;</span>John<span class="tag">&lt;/<span class="title">a</span>&gt;</span>, how are you doing?<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 class="string">"p"</span>).contents().filter(<span class="keyword">function</span>(){ <span class="keyword">return</span> <span class="keyword">this</span>.nodeType != <span class="number">1</span>; }).wrap(<span class="string">"&lt;b/&gt;"</span>);</span><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">改变背景颜色的iframe里面的链接。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
</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">iframe</span> <span class="attribute">src</span>=<span class="value">"http://api.jquery.com/"</span> <span class="attribute">width</span>=<span class="value">"80%"</span> <span class="attribute">height</span>=<span class="value">"600"</span> <span class="attribute">id</span>=<span class="value">'frameDemo'</span>&gt;</span><span class="tag">&lt;/<span class="title">iframe</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 class="string">"#frameDemo"</span>).contents().find(<span class="string">"a"</span>).css(<span class="string">"background-color"</span>,<span class="string">"#BADA55"</span>);</span><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></section>
</div></article> </div>
</article>