在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码。当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错。
同一个页面多个版本冲突解决办法
你可能会问,为什么在一个页面上会引用多个版本的jQuery,只引用一个不就好了吗?
答案是:不行。一般要用到两个(或以上)版本的jQuery库的原因是:现有的网站已经用了旧版本的jQuery以及相关插件,直接将jQuery升级到新版本会导致这些基于旧版本jQuery的插件不能工作,除非你能把这些插件全部升级,或者等各个插件的作者发布支持新版本jQuery的插件版本。
解决办法:使用jQuery.noConflict([extreme])方法。
比如我引用的是jquery-1.11.0.js和jquery-1.5.0.js。
<script src="jquery-1.5.0.js"></script> <script src="jquery-1.11.0.js"></script> <script> console.log($.fn.jquery); //'1.11.0' var $jq = jQuery.noConflict(true); console.log($.fn.jquery); //'1.5.0' </script>
可以看到jQuery.noConflict将变量 $ 的控制权让渡给了1.5.0版本的jQuery库。而要使用1.11.0的版本则要用 $jq() 代替。
但是引入了两个版本的jQuery后,代码很乱,导致别人难以理解甚至误删了一些重要代码怎么办?
改进的方法是:
先直接引用新版的jQuery库。
<script src="jquery-1.11.0.js"></script> <script src="myJS.js"></script>
把我们写的脚本myJS.js中的主体内容写在立即调用函数里头,引用的是新的版本的jQuery。
//myJS.js (function() { //myJS.js的代码,引用的是v1.11.0 })();
再写一个立即调用函数,把旧版本的jQuery代码嵌进去(压缩代码只有几行)。然后在里面写代码,此时变量$所引用的前面嵌进去的jQuery
//myJS.js (function () { //...此处省略/jquery1.5.0 //jquery1.5.0的压缩代码 var $ = jQuery.noConflict(true); //此处开始写的$()所引用的是jquery1.5.0 })();
Ps:需要检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码
2. 同一页面jQuery和其他js库冲突解决方法
①依然可以使用jQuery.noConflict将变量$的控制权让渡给其他js库。
如果jQuery在其他js库前,不需要使用noConflict。
<!-- 引入 jquery库 --> <script src="jquery-1.11.0.js"></script> <script type="text/javascript"> var $jq = $; console.log($.fn.jquery); //'1.11.0' </script> <!-- 引入 其他库--> <script type="text/javascript"> $ = { fn:{ jquery:"otherJS" } }; </script> <script type="text/javascript"> console.log($.fn.jquery); //otherJS console.log($jq.fn.jquery); //'1.11.0' </script>
如果在其他js库之后,用noConflict让渡。
<!-- 引入 其他库--> <script type="text/javascript"> $ = { fn:{ jquery:"otherJS" } }; </script> <!-- 引入 jquery库 --> <script src="jquery-1.11.0.js"></script> <script type="text/javascript"> console.log($.fn.jquery); //'1.11.0' var $180 = $.noConflict(); //解除冲突 console.log($.fn.jquery); //otherJS console.log($jq.fn.jquery); //'1.11.0' </script>
它的缺点是:在接下来的js代码中只要引用到jQuery就必须把$换成$jq。
②ready函数是jquery的入口函数
可以将
$(document).ready(function() {...})
替换成:
jQuery(document).ready(function($) {...})
它的缺点是:只对ready嵌套内的代码有效,如果ready函数外还有一些子函数,对嵌套外的代码是无效的。
③把$作为参数传进去
(function($) { //你的js代码 })(jQuery);
或者
jQuery(function($){ //你的js代码 }
你的js代码可以包括上面说到的ready函数和子函数。在用jQuery写公共组件的时候,使用这种方式既能避免$冲突,又无需要求使用公共组件的人修改自己的代码。
以上就是jQuery中 $ 符号的冲突问题及解决方案的内容,更多相关内容请关注PHP中文网(www.php.cn)!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version
SublimeText3 Linux latest version

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
