A summary of the solution to the $ conflict between function functions $ (ID) and jquery in JS

Source: Internet
Author: User

The $ (ID) is a shorthand for the JS document.getElementById (ID), which is defined as a way to directly use $ ("Img-icon") similar to jquery in a later call. onclick simple encapsulation. So many people like to write this:

var $ = function (ID) {
return document.getElementById (ID);
};

But this kind of JS code and the JQuery object gain function conflict will conflict with jquery, resulting in jquery can not get objects, appear similar to: uncaught typeerror:cannot set Property ' onclick ' of NULL Such a bad hint.

The safe way to do this


var $id = function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
};

Or:


var $id = function (ID) {
return typeof id = = "string"? document.getElementById (ID): ID;
};

Or:


function $ (ID) {
if (typeof jQuery = = ' undefined ' | | (typeof id = = ' string ' && document.getElementById (ID)) {
return document.getElementById (ID);
} else if (typeof id = = ' object ' | |!/^\w*$/.exec (ID) | |
/^ (BODY|DIV|SPAN|A|INPUT|TEXTAREA|BUTTON|IMG|UL|LI|OL|TABLE|TR|TH|TD) $/.exec (ID)) {
return jQuery (ID);
}
return null;
}

<scripttypescripttype= "Text/javascript" src= "Js/ssxl.js" ></script>
<scripttypescripttype= "Text/javascript" src= "Js/jquery-1.2.6.min.js" ></script>< Scripttypescripttype= "Text/javascript" src= "Js/gd.js" ></script>
<script>function $ (ID) {
if (typeof jQuery = = ' undefined ' | | (typeof id = = ' string ' && document.getElementById (ID)) {
return document.getElementById (ID);
else if (typeof id = = ' object ' | |!/^\w*$/.exec (ID) | |
/^ (BODY|DIV|SPAN|A|INPUT|TEXTAREA|BUTTON|IMG|UL|LI|OL|TABLE|TR|TH|TD) $/.exec (ID)) {
return jQuery (ID);
}
return null;
}
</script>


jquery and Discuz JS conflict resolution


$ (ID) function violation
Discuz uses S () as the object selection function, coinciding with the jquery default $ () function, which is still in the Include/common.js, as follows:

Code:
function $ (ID) {
return document.getElementById (ID);
}

Workaround 1:

Load the jquery.js before common.js, otherwise the jquery $ () function overwrites the $ () function of the Common.js, and then uses jquery () in place of the $ () function of jquery.

Workaround 2:

Load the jquery.js after Common.js, and use the code before calling the jquery function:

var JQ = jquery.noconflict ();
The above is to map the $ () function back to the original $ () function, and then you can use JQ () or jquery () instead of jquery's original $ () function, where JQ is the same as jquery, and the $ () function is the $ () function of the original discuz.

Workaround 2 can also be replaced with other uses of Jquery.noconflict (), as described in the following instructions.

Jquery.noconflict () Use instructions

Run this function to transfer the control of the variable $ to the first library that implements it. This helps ensure that jquery does not conflict with the $ objects of other libraries.

After you run this function, you can only access the jquery object using the jquery variable. For example, where you want to use the $ ("Div p"), you must change to jquery ("Div p").

Note: This function must be used after you import the jquery file and before importing another library that is causing the conflict. Of course, it should be before other conflicting libraries are used unless jquery is the last to import.

Jquery.noconflict ();
Using JQuery
JQuery ("div p"). Hide ();
Use a different library's $ ()
$ ("content"). Style.display = ' None ';
Revert to use alias $, and then create and execute a function that still uses $ as the alias for jquery in the scope of this function. In this function, the original $ object is not valid. This function is very effective for most plug-ins that do not depend on other libraries.

Jquery.noconflict ();
(function ($) {
$ (function () {
Use $ as a jQuery alias code
});
}) (JQuery);
Code for other libraries that use $ as an alias
You can simplify the writing by jquery.noconflict () cascading functions.

Jquery.noconflict () (function () {
Use $ as a jQuery alias code
});
Code for other libraries that use $ as an alias
Create a new alias to use the JQuery object in the next library.

var j = jquery.noconflict ();
Code that uses JQuery
J ("Div p"). Hide ();
Code that uses the $ () of another library
$ ("content"). Style.display = ' None ';
To completely move jquery to an object in another namespace, the following

var dom = {};
Dom.query =jquery.noconflict (TRUE);
Code to use new JQuery
Dom.query ("div p"). Hide ();
Code that uses the $ () of another library
$ ("content"). Style.display = ' None ';
Code that uses JQuery
JQuery ("div > P"). Hide ();

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.