<p><code></p> <h2 id="articleHeader0">选择器</h2> <ul> <li>:visible 和 :hidden 匹配显示和隐藏的元素(css-display),需要指明元素或类,因为head、script等元素也是不可见的。</li> <li>:animate 处于动画的元素</li> <li>tr:nth-child(even) tr:nth-child(2n) 偶数行,odd 奇数行 3n 隔两行。(tr:even tr:odd)</li> <li>tr:nth-child(1)、tr:first、tr:first-child、$("tr").first() 、$("tr").eq(0) 拿到一样的</li> <li>tr:only-child 只有一个子元素的</li> <li>tr:gt(i) 拿到i之后的</li> <li>tr:lt(i) 拿到i之前的</li> <li>tr:not(".className") 获取不含指定类的</li> <li>input:not(:checkbox) 非复选框的input元素</li> <li>tr:contains(text) 获取包含给定文本的</li> <li>tr:empty 获取无子元素或文本的空元素</li> <li>tr:has(selector) 获取有匹配子选择器的元素</li> <li>tr:parent 获取含有子元素或者文本的元素</li> <li>tr:hidden 获取所有不可见元素 (通过.show()展示)</li> <li>tr:visible 获取所有的可见元素 (通过.hide()隐藏)</li> <li>tr[attribute=value] 属性选择器 *= ^= $= !=</li> <li>li:has(a) 包含a的li</li> <li>针对表单元素的一些特殊选择器</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=":input 匹配的是 <input>,<textarea>,<select>,<button><br /> :button 匹配 input[type=button|reset|submit]和button<br /> :file 即 input[type=file],同理还有 :checkbox,:radio<br /> :checked 勾上的单复选框<br /> :disabled 和 :enabled 能和不能点击或输入的表单元素<br /> :focus 匹配当前焦点元素<br /> :checkbox:checked:disabled 匹配的是不能点击的已选中的复选框" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-pseudo">:input</span> 匹配的是 &lt;<span class="hljs-selector-tag">input</span>&gt;,&lt;<span class="hljs-selector-tag">textarea</span>&gt;,&lt;<span class="hljs-selector-tag">select</span>&gt;,&lt;<span class="hljs-selector-tag">button</span>&gt; <span class="hljs-selector-pseudo">:button</span> 匹配 <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=button|reset|submit]</span>和<span class="hljs-selector-tag">button</span> <span class="hljs-selector-pseudo">:file</span> 即 <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=file]</span>,同理还有 <span class="hljs-selector-pseudo">:checkbox</span>,<span class="hljs-selector-pseudo">:radio</span> <span class="hljs-selector-pseudo">:checked</span> 勾上的单复选框 <span class="hljs-selector-pseudo">:disabled</span> 和 <span class="hljs-selector-pseudo">:enabled</span> 能和不能点击或输入的表单元素 <span class="hljs-selector-pseudo">:focus</span> 匹配当前焦点元素 <span class="hljs-selector-pseudo">:checkbox</span><span class="hljs-selector-pseudo">:checked</span><span class="hljs-selector-pseudo">:disabled</span> 匹配的是不能点击的已选中的复选框</code></pre> <h2 id="articleHeader1"><a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a></h2> <h4>prop() 和 attr()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="prop() 方法用来改变影响DOM元素的动态状态,而不是改变HTML属性。比如: disabled、checked" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code style="word-break: break-word; white-space: initial;">prop() 方法用来改变影响<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>元素的动态状态,而不是改变<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>属性。比如: disabled、<span class="hljs-keyword">checked</span></code></pre> <h4>clone()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="参数是布尔值,代表是否复制事件,默认false。 $('.item').on('click', function(){}); $('.item').clone(true).appendTo('.list'); // 克隆 .item(包括事件)并添加到 .list" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>参数是布尔值,代表是否复制事件,默认<span class="hljs-literal">false</span>。 $(<span class="hljs-string">'.item'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}); $(<span class="hljs-string">'.item'</span>).clone(<span class="hljs-literal">true</span>).appendTo(<span class="hljs-string">'.list'</span>); <span class="hljs-comment">// 克隆 .item(包括事件)并添加到 .list</span></code></pre> <h4>val()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="设置或者返回表单元素(input、select、textarea)的值" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code style="word-break: break-word; white-space: initial;">设置或者返回表单元素(<span class="hljs-built_in">input</span>、<span class="hljs-built_in">select</span>、textarea)的值</code></pre> <h4>replaceWith() 和 replaceAll()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;>hello jquery world.</div> <p>var $e = $(&quot;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&quot;).replaceWith(&quot;</p> <p>你好,jquery</p> <p>&quot;);<br /> 返回的是 <a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>#app 的 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 对象,但已从 dom 树中移除,页面呈现的是p。</p> <p>而 $(&quot;</p> <p>你好,jquery</p> <p>&quot;).replaceAll(&quot;#app&quot;) 返回的是 p 的jQuery对象。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"app"</span>&gt;hello jquery world.&lt;/div&gt; <span class="hljs-keyword">var</span> $e = $(<span class="hljs-string">"div"</span>).replaceWith(<span class="hljs-string">"&lt;p&gt;你好,jquery&lt;/p&gt;"</span>); 返回的是 div<span class="hljs-comment">#app 的 <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a> 对象,但已从 dom 树中移除,页面呈现的是p。</span> 而 $(<span class="hljs-string">"&lt;p&gt;你好,jquery&lt;/p&gt;"</span>).replaceAll(<span class="hljs-string">"#app"</span>) 返回的是 p 的jQuery对象。</code></pre> <h4>width() 和 height()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="设置或者获取匹配元素的宽度和高度值,返回的是number(不带单位),而$(selector).css('width')返回的是string(带有单位)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;">设置或者获取匹配元素的宽度和高度值,返回的是<span class="hljs-built_in">number</span>(不带单位),而$(selector).css(<span class="hljs-string">'width'</span>)返回的是<span class="hljs-built_in">string</span>(带有单位)</code></pre> <h4>offset()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="获取匹配的第一个元素相对于 document 的位置 返回:{left: Number, top: Number} 设置:如果元素没有定位(即 position: static),将会修改为 relative 注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。 若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标。但是若设置的属性是 display:none,由于在绘制 DOM 树时根本就不绘制该元素,所以它的位置属性值是 undefined。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>获取匹配的第一个元素相对于 document 的位置 返回:{<span class="hljs-string">left:</span> Number, <span class="hljs-string">top:</span> Number} 设置:如果元素没有定位(即 <span class="hljs-string">position:</span> <span class="hljs-keyword">static</span>),将会修改为 relative 注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。 若元素的属性设置的是 <span class="hljs-string">visibility:</span>hidden,那么我们依然可以取得它的坐标。但是若设置的属性是 <span class="hljs-string">display:</span>none,由于在绘制 DOM 树时根本就不绘制该元素,所以它的位置属性值是 undefined。</code></pre> <h4>position()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="获取匹配的第一个元素相对于其最近的具有定位(即position不是static)的父元素的位置 返回 {left: Number, top: Number} 不能设置。 注意:jQuery不支持获取隐藏元素的偏移坐标及所占用的边框,边距和填充的大小" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>获取匹配的第一个元素相对于其最近的具有定位(即<span class="hljs-selector-tag">position</span>不是<span class="hljs-selector-tag">static</span>)的父元素的位置 返回 {<span class="hljs-attribute">left</span>: Number, top: Number} 不能设置。 注意:<span class="hljs-selector-tag">jQuery</span>不支持获取隐藏元素的偏移坐标及所占用的边框,边距和填充的大小</code></pre> <h4>scrollLeft() 和 scrollTop()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="获取或者设置匹配的第一个元素水平和垂直方向的位置,数值类型 垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。 如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0 回顶部代码 $('html,body').scrollTop(0);兼容IE 和 Chrome,瞬间回到顶部。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>获取或者设置匹配的第一个元素水平和垂直方向的位置,数值类型 垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。 如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为<span class="hljs-number">0</span> 回顶部代码 $(<span class="hljs-string">'html,body'</span>).scrollTop(<span class="hljs-number">0</span>);兼容IE 和 Chrome,瞬间回到顶部。</code></pre> <h2 id="articleHeader2">事件</h2> <h4>标准事件类型</h4> <ul> <li>click mouseup mousedown ...</li> <li>keypress ...</li> <li>dblclick mousewheel</li> <li>change 用在 input select 元素上</li> <li>$(window).resize 调整浏览器窗口大小时触发的事件</li> </ul> <h4>事件绑定 bind()、delegate() 和 on()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="bind()在1.7以后被on()取代,绑定多个事件:$(selector).on('dblclick contextment', function(){}); on()也兼容zepto。但是这两种方法的缺点是要绑定的元素必须存在文档中。语法: $(selector).on('events'[, 'selector'][, data], handler); 其中第一个参数可以是标准事件名,也可以是自定义事件(通过trigger触发),第二和第三个参数可以省略,第二个参数为匹配元素的后代元素,第三个参数为传递给处理函数的数据,即在函数中通过 event.data 来接收。 delegate() 支持对动态创建的元素有效。语法:$('div').delegate('p', 'mousemove', function(){}); 为div下面的p(包括未来产生的)绑定mousemove事件。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>bind()在<span class="hljs-number">1.7</span>以后被on()取代,绑定多个事件:$(selector).on(<span class="hljs-string">'dblclick contextment'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}); on()也兼容zepto。但是这两种方法的缺点是要绑定的元素必须存在文档中。语法: $(selector).on(<span class="hljs-string">'events'</span>[, <span class="hljs-string">'selector'</span>][, data], handler); 其中第一个参数可以是标准事件名,也可以是自定义事件(通过trigger触发),第二和第三个参数可以省略,第二个参数为匹配元素的后代元素,第三个参数为传递给处理函数的数据,即在函数中通过 event.data 来接收。 delegate() 支持对动态创建的元素有效。语法:$(<span class="hljs-string">'div'</span>).delegate(<span class="hljs-string">'p'</span>, <span class="hljs-string">'mousemove'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}); 为div下面的p(包括未来产生的)绑定mousemove事件。</code></pre> <h4>事件解绑 unbind()、undelegate() 和 off()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="不传参数就解绑匹配元素的所有事件,否则就解绑指定参数的事件。 $(selector).off('click', '**'); 解绑所有代理的click事件,而元素本身的事件不会被解绑。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>不传参数就解绑匹配元素的所有事件,否则就解绑指定参数的事件。 $(selector).off(<span class="hljs-string">'click'</span>, <span class="hljs-string">'**'</span>); 解绑所有代理的click事件,而元素本身的事件不会被解绑。</code></pre> <h4>事件触发 trigger() 和 triggerHandler()</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="简单触发:$(selector).click(); trigger()触发事件,触发浏览器行为。$(selector).trigger(&quot;click&quot;); triggerHandler()触发事件响应方法,不触发浏览器行为。$(selector).triggerHandler(&quot;focus&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>简单触发:$(selector).click(); trigger()触发事件,触发浏览器行为。$(selector).trigger(<span class="hljs-string">"click"</span>); triggerHandler()触发事件响应方法,不触发浏览器行为。$(selector).triggerHandler(<span class="hljs-string">"focus"</span>);</code></pre> <h4>事件对象event</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="event.data 传递给事件处理程序的额外数据 event.currentTarget 等同于this,指当前DOM对象 event.target&nbsp;触发事件源,不一定是等同this(通常在事件委托中出现) event.type 事件类型 event.which 鼠标的按键类型:左1 中2 右3 或者键盘码 event.keyCode 键盘码 event.pageX&nbsp;鼠标相对于文档左部边缘的位置" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-keyword">event</span>.data 传递给事件处理程序的额外数据 <span class="hljs-keyword">event</span>.currentTarget 等同于<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>,指当前DOM对象 <span class="hljs-keyword">event</span>.target&nbsp;触发事件源,不一定是等同<span class="hljs-keyword">this</span>(通常在事件委托中出现) <span class="hljs-keyword">event</span>.type 事件类型 <span class="hljs-keyword">event</span>.which 鼠标的按键类型:左<span class="hljs-number">1</span> 中<span class="hljs-number">2</span> 右<span class="hljs-number">3</span> 或者键盘码 <span class="hljs-keyword">event</span>.keyCode 键盘码 <span class="hljs-keyword">event</span>.pageX&nbsp;鼠标相对于文档左部边缘的位置</code></pre> <h2 id="articleHeader3">动画</h2> <p>通常第一个参数为速度(fase、normal、slow、ms),第二个参数为一个函数,动画完成后执行。</p> <ul> <li>show() 和 hide() 实现显示和隐藏,可同时改变 width、height、opacity。toggle() 切换状态。</li> <li>fadeIn() 和 fadeOut() 淡入淡出,仅改变 opacity</li> <li>fadeTo() 按指定透明度进行渐进式调整</li> <li>slideUp() 和 slideDown() 卷窗帘效果,仅改变 height。slideToggle() 切换状态。</li> <li>animate() 自定义动画</li> </ul> <p>动画的停止与延时 stop()、delay()</p> <h2 id="articleHeader4"><a href="http://www.js-code.com/tag/ajax" title="AJAX" target="_blank">AJAX</a></h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.ajax({ beforeSend(){} // 发送请求之前调用的匿名函数,如果 return false; 就代表阻止该次请求,可以用于验证用户输入的数据 })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.ajax({ beforeSend(){} <span class="hljs-comment">// 发送请求之前调用的匿名函数,如果 return false; 就代表阻止该次请求,可以用于验证用户输入的数据</span> })</code></pre> <h2 id="articleHeader5">链式编程</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="原理: return this; 通常只有设置操作才可以链式操作,获取操作时返回相应的值,无法返回this。 end() 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>原理: <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; 通常只有设置操作才可以链式操作,获取操作时返回相应的值,无法返回<span class="hljs-keyword">this</span>。 end() 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。</code></pre> <h2 id="articleHeader6">多库共存</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>占用了$ 和jQuery这两个变量,如果同一个页面引用了jQuery库,还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量,为了保证每个库都能正常使用,就需要让jQuery交出变量的控制权。<br /> $.noConflict(); 交出$<br /> $.noConflict(true); 交出$ 和 jQuery</p> <p><script src=&quot;https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;></script><br /> <script> // 查看版本 console.log($.fn.jquery); // 3.2.1 console.log(jQuery.fn.jquery); // 3.2.1 </script></p> <p><script src=&quot;https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;></script><br /> <script> $.noConflict(); console.log($.fn.jquery); // 2.2.4 console.log(jQuery.fn.jquery); // 3.2.1 </script></p> <p><script src=&quot;https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;></script><br /> <script> $.noConflict(true); console.log($.fn.jquery); // 2.2.4 console.log(jQuery.fn.jquery); // 2.2.4 </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>jQuery占用了$ 和jQuery这两个变量,如果同一个页面引用了jQuery库,还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量,为了保证每个库都能正常使用,就需要让jQuery交出变量的控制权。 $.noConflict(); 交出$ $.noConflict(true); 交出$ 和 jQuery <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 查看版本</span> <span class="hljs-built_in">console</span>.log($.fn.jquery); <span class="hljs-comment">// 3.2.1</span> <span class="hljs-built_in">console</span>.log(jQuery.fn.jquery); <span class="hljs-comment">// 3.2.1</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> $.noConflict(); <span class="hljs-built_in">console</span>.log($.fn.jquery); <span class="hljs-comment">// 2.2.4</span> <span class="hljs-built_in">console</span>.log(jQuery.fn.jquery); <span class="hljs-comment">// 3.2.1</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> $.noConflict(<span class="hljs-literal">true</span>); <span class="hljs-built_in">console</span>.log($.fn.jquery); <span class="hljs-comment">// 2.2.4</span> <span class="hljs-built_in">console</span>.log(jQuery.fn.jquery); <span class="hljs-comment">// 2.2.4</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/jquery/jquery_32824.html