Detailed introduction to the basic knowledge of noConflict() and detailed explanation of its usage in actual development-JS Tutorial-php.cn

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

巴扎黑

Release： 2017-06-20 15:45:15

Original

1715 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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;;

Copy after login

Usage method 2:

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

Copy after login

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!