Home >Web Front-end >JS Tutorial >Solution to $ conflict after loading jQuery_jquery

Solution to $ conflict after loading jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 18:23:281152browse

In the javasript part of website development, developers nowadays rarely write document.getElementById() by hand. It is very tiring. Don’t tell me, getElementById is really difficult to write because there are quite a lot of letters. It's also case-sensitive, so you can make mistakes if you don't pay attention. Therefore, it is common to use $ to implement document.getElemetnById().

Copy code The code is as follows:

function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i ) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

Microsoft’s asp.net ajax client framework also has code similar to $get.
Copy code The code is as follows:

var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) {
/// 4.5.
/// < param name="element" domElement="true" optional="true" mayBeNull="true"> 6.7.
/// 8.9.
var e = Function._validateParams(arguments, [
{name: "id", type: String},
{name: "element", mayBeNull: true, domElement: true, optional: true}
]);
if (e) throw e;
if (!element) return document.getElementById(id);
. if (element.getElementById) return element.getElementById(id);
// Implementation for browsers that don't have getElementById on elements: 28.29.
var nodeQueue = [];
var childNodes = element.childNodes;
for (var i = 0; i < childNodes.length; i ) {
var node = childNodes[i];
if (node.nodeType == 1) {
nodeQueue[nodeQueue.length] = node;
}
}
while (nodeQueue.length) {
node = nodeQueue.shift();
if (node.id == id) {
return node;
}
childNodes = node.childNodes;
for (i = 0; i < childNodes.length; i ) {
node = childNodes[i];
if (node.nodeType == 1) {
nodeQueue[nodeQueue.length] = node;
}
}
}
return null;
}

Because jQuery is simple and beautiful, and more importantly, it is vigorously promoted by Microsoft, it is natural and inevitable to introduce jQuery into the project. jQuery uses the $ function to return a jQuery object, that is, $=jQuery, introducing jQuery Finally, conflicts will inevitably arise regarding the $ symbol problem, so there are two main ideas to solve it.
1. Use jQuery.noConfict() to make $$ equal to jQuery. The code is $$=jQuery.noConflict(). In this way, you need to do a few things
1. Add $$=jQuery.noConflict() at the end of the javasript code file containing jQuery and jQuery-based, jQuery’s VS smart prompt file (jQueryXXX –vsdoc.js) is also the last The window.jQuery = window.$ = jQuery; is also changed to window.jQuery = window.$$ = jQuery; OK.
2. Add $=jQuery.noConflict(); to the end of jQuery-based plug-ins and extension files. Add $$=jQuery.noConflict(); to the end.
3. In the original $ implementation file, adding jQuery.noConflict() at the top means handing over the "power" of $ to other our own js files, and then adding $$=jQuery at the end of the file. noConflict().
4. When introducing js into the page, pay attention to the order. jQuery-related files are placed at the front, and files not related to jQuery are placed at the back.
After doing this, $ still represents the previous meaning, and when using jQuery, just use jQuery or $$.
Advantages: Only a few files need to be changed to achieve the goal.
Disadvantages: $$ is not easy to use. You need to follow step 2 when introducing the jQuery plug-in in the future.

2. Replace the original $. After consideration, I adopted the second method because jQuery will be widely used in future projects. It is awkward to use $$ or jQuery to write code after all. Considering the compatibility of asp.net ajax, the original $ is replaced with $get. It is not difficult to replace it with Visual Studio


, but it still requires a few steps.
1. First replace $(" with $get(", then replace $(' with $get(', and finally replace $get with $.
2. Use VSS when replacing Check out the prompt function and confirm each file (if something goes wrong, it is not a trivial matter). In the end, there were some minor problems, which were basically solved with the help of colleagues
3. Visual Studio replacement. There are really many functions in the sleeves. There are quite a few things like Replace in Files. Check the
Solution to $ conflict after loading jQuery_jquery
Use one, but don’t select Regular expressions, because $ is clearly displayed on the right. It means End of Line. Of course, the Look In one selects Current Project. Of course, after pressing the button on the right, you can select multiple directories to frame the question. This has never been used before. Look at these file types to select special files. type to narrow the scope.
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