Introduction to methods to quickly resolve conflicts between jQuery and other libraries_jquery

Often, when using jQuery and other libraries on the same page, the definition of the global name $ is the biggest point of contention and conflict. It's well known that jQuery uses $ as an alias for jQuery names and uses it for every feature jQuery exposes, but other libraries, most notably Prototype, also use $ names.

1. jQuery provides the $.noConflict() utility function to give up the occupation of the $ identifier so that other libraries can use it.

The syntax of this function is as follows:
$.noConflict(jqueryToo)

Return control of identifier $ to other libraries, allowing mixing jQuery with other libraries on the page. Once the function is executed, jQuery functions must be called using the jQuery identifier instead of the $identifier,

You can also drop the jQuery identifier (optional)

This method should be called after jQuery is included, but before the conflicting library is included.

Although the jQuery identifier is used, because $ is an alias of jQuery, all jQuery functions are still available after applying $.noConflict(). We can define shorter, but non-conflicting jQuery aliases, such as

var $j = jQuery;

2. Another common idiom is to create a scoped environment where the $ identifier points to the jQuery object. This is a common technique when extending jQuery, especially for plugin authors. For example, they cannot make any assumptions about whether the page developer has called $.noConflict(), and of course they cannot call this function themselves to avoid destroying the page developer's wishes,

This idiom is as follows:
(function($) { }) (jQuery);
(function($) { })

This part declares a function and surrounds it with parentheses, thereby generating an expression. The result of this expression is a reference to an anonymous function. This function expects a single parameter and names it $, in In the function body, anything passed to the function can be referenced through the $ identifier. Because parameter declarations take precedence over any similar named identifiers in the global scope, any $value defined outside a function will be replaced by the passed parameter inside the function.

(jQuery)

Execute a function call on an anonymous function, passing the jQuery object as a parameter

No matter whether the $ identifier has been defined in Prototype or other libraries outside the function, it always points to the jQuery object inside the function body.

When using this trick, externally declared $ is not available inside the function body.

3. A variation of the second usage is also often used to declare a ready handler function, thus forming the third syntax,
jQuery( function($){
})

It is best to take this precaution with the definition of $ when writing reusable components that may be used in pages that already use $.noConflict().