Conflict problem and solution of $ symbol in jQuery
在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)!

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

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
