uTools-Manuals/docs/jQuery/jQuery.sub.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.sub()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/core/">核心 API</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/deprecated/">弃用</a> &gt; <a href="/category/deprecated/deprecated-1.7/">1.7 版本弃用的 API</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/removed/">已删除的函数</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.sub/" target="_blank">jQuery.sub()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-sub1"><h2 class="section-title">
<span class="name">jQuery.sub()</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span><span class="version-details">version deprecated: <a href="/category/version/1.7/">1.7</a>, removed: <a href="/category/version/1.9/">1.9</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>可创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象。</p>
<ul class="signatures"><li class="signature" id="jQuery-sub">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a></span>jQuery.sub()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>
<strong>这种方法在jQuery1.7已经被过时了，在jQuery 1.8版本将被移动到一个插件中。</strong>
</p>
<p>
			有两个具体使用jQuery.sub（）创建jQuery副本的案例。第一种情况是希望重写 jQuery 的方法，而不想破坏原始的方法。另一种情况是想为 jQuery 插件做进一步的封装或进行基本的命名空间。</p>
<p>
			
			    注意，jQuery.sub() 并不尝试做任何形式的隔离，因为这不是该方法的本意。所有 jQuery 副本中的方法依然指向原始的 jQuery (例如，依然会通过原始的 jQuery 进行事件绑定和触发，data 也会通过原始的 jQuery 绑定到元素上。Ajax 请求和事件也是通过原始的 jQuery 运行的等等。)。
			</p>
<p>请注意，如果你正在寻找使用这个开发插件，应首先<i>认真</i>考虑使用一些类似jQuery UI widget工厂，这两个状态和插件管理子方法。 <a href="http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/">使用jQuery UI widget的一些例子</a>建立一个插件。</p>
<p>上述那些例子非常好的描述了该方法的详细用法。</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">添加一个jQuery的方法，以便它不会受到外部分：</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>
<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="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> sub$ = jQuery.sub();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  sub$.fn.myCustomMethod = <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> <span class="string">'just for me'</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>  sub$(document).ready(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    sub$(<span class="string">'body'</span>).myCustomMethod() <span class="comment">// 'just for me'</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> </code></div></div><div class="container"><div class="line"><code><span class="keyword">typeof</span> jQuery(<span class="string">'body'</span>).myCustomMethod <span class="comment">// undefined</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">重写一些 jQuery 方法，提供新的功能。</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>
<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>
<div class="line n24">24</div>
<div class="line n25">25</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="keyword">var</span> myjQuery = jQuery.sub();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  myjQuery.fn.remove = <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    <span class="comment">// New functionality: Trigger a remove event</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">this</span>.trigger(<span class="string">"remove"</span>);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="comment">// Be sure to call the original jQuery remove method</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> jQuery.fn.remove.apply( <span class="keyword">this</span>, arguments );</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>  myjQuery(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">".menu"</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>      $(<span class="keyword">this</span>).find(<span class="string">".submenu"</span>).remove();</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>    <span class="comment">// A new remove event is now triggered from this copy of jQuery</span></code></div></div><div class="container"><div class="line"><code>    $(document).bind(<span class="string">"remove"</span>, <span class="keyword">function</span>(e) {</code></div></div><div class="container"><div class="line"><code>      $(e.target).parent().hide();</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>})();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Regular jQuery doesn't trigger a remove event when removing an element</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// This functionality is only contained within the modified 'myjQuery'.</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">创建一个插件，返回插件的具体方法。</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>
<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>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</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">// Create a new copy of jQuery using sub()</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> plugin = jQuery.sub();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Extend that copy with the new plugin methods</span></code></div></div><div class="container"><div class="line"><code>  plugin.fn.extend({</code></div></div><div class="container"><div class="line"><code>    open: <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>.show();</code></div></div><div class="container"><div class="line"><code>    },</code></div></div><div class="container"><div class="line"><code>    close: <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>.hide();</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> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Add our plugin to the original jQuery</span></code></div></div><div class="container"><div class="line"><code>  jQuery.fn.myplugin = <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">this</span>.addClass(<span class="string">"plugin"</span>);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="comment">// Make sure our plugin returns our special plugin version of jQuery</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> plugin( <span class="keyword">this</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> </code></div></div><div class="container"><div class="line"><code>$(document).ready(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Call the plugin, open method now exists</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">'#main'</span>).myplugin().open();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Note: Calling just $("#main").open() won't work as open doesn't exist!</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>