Home >Web Front-end >JS Tutorial >Detailed introduction to the basic knowledge of noConflict() and detailed explanation of its usage in actual development

Detailed introduction to the basic knowledge of noConflict() and detailed explanation of its usage in actual development

巴扎黑Original: 2017-06-20 15:45:151716browse

As you already know, jQuery uses the $ symbol as shorthand for jQuery.

What if other JavaScript frameworks also use the $ symbol as a shorthand?

Some other JavaScript frameworks include: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman, and Ext JS.

Some of these frameworks also use the $ symbol as a shorthand (just like jQuery). If you are using two different frameworks that are using the same shorthand symbol, it may cause the script to stop running.

The jQuery team took this issue into consideration and implemented the noConflict() method.

jQuery noConflict() method

The noConflict() method releases control of the $ identifier so that other scripts can use it.

Of course, you can still use jQuery by substituting the full name for the abbreviation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

You can also create your own abbreviation. noConflict() returns a reference to jQuery that you can store in a variable for later use. Take a look at this example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

If your jQuery code block uses the $ abbreviation, and you don't want to change this shortcut, you can pass the $ symbol as a variable to the ready method. In this way, you can use the $ symbol inside the function - but outside the function, you still have to use "jQuery":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

In actual development:

Running this function will take control of the variable $ Yield to the first library to implement it.

This helps ensure that jQuery does not conflict with other libraries' $objects.

<script type="text/javascript" src="/javascripts/jquery.js"></script>
  　　<script type="text/javascript">
  　　　　 var j$ = $;
   　　　　jQuery.noConflict();
  　　</script>
<script type="text/javascript" src="/javascripts/prototype.js" ></script>

After running this function, you can only access the jQuery object using jQuery variables. For example, where $("div p") is used, it must be replaced by j$("div p").

Note: This function must be used after you import the jQuery file, and before importing another library that causes conflicts. Of course it should also be done before other conflicting libraries are used, unless jQuery is the last one imported.

Usage method 1:

jQuery.noConflict();
// 使用 jQuery
j$("div p").hide(); 
// 使用其他库的 $() 
$("content").style.display = &#39;none&#39;;

Usage method 2:

//我的一个站点 viqiwu.com
var viqiwu = jQuery.noConflict();
// 基于 jQuery 的代码
viqiwu("div p").hide(); 
// 基于其他库的 $() 代码 
$("content").style.display = &#39;none&#39;;

This way you don’t have to worry about conflicts between JQuery and other JS frameworks .

The above is the detailed content of Detailed introduction to the basic knowledge of noConflict() and detailed explanation of its usage in actual development. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of the anti-conflict mechanism in jQuery-noConflictNext article：A brief analysis of the anti-conflict mechanism in jQuery-noConflict

See more

Detailed introduction to the basic knowledge of noConflict() and detailed explanation of its usage in actual development

Related articles