Hello Readers,
Most of the JavaScript libraries use $ sign as a function or other variable name, just as jQuery does. In jQuery's case, $ sign is used just an alias for jQuery, so here all functionality is available without using $ sign.
We use different kinds of other popular JavaScript frameworks in our projects like: Backbone, Angular, Knockout, Ember, and other.
If two different frameworks use the same shortcut, one of them might stop working.
To remove this type of problem jquery team implement the noConflick() method.
We can of course still use jQuery, easily by writing the full name instead of the shortcut:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is working properly!");
});
});
</script>
</head>
<body>
<p>This is a first paragraph.</p>
<button>Click jQuery button</button>
</body>
</html>
Also we can create our own shortcut very simply. The noConflict() method returns a reference to jQuery, that we can save in a variable, for later use.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var jqy = $.noConflict();
jqy(document).ready(function() {
jqy("button").click(function() {
jqy("p").text("jQuery is working properly!");
});
});
</script>
</head>
<body>
<p>This is a first paragraph.</p>
<button>Click jQuery button</button>
</body>
</html>
If we have a block of jQuery code that uses the $ sign shortcut and we do not want to change it entair, we can pass the $ sign in as a parameter to the ready method. This allows you to access jQuery using $ sign, inside this function - outside of it, we will have to use "jQuery":
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is working properly!");
});
});
</script>
</head>
<body>
<p>This is a first paragraph.</p>
<button>Click jQuery button</button>
</body>
</html>
Thanks
0 Comment(s)