Two solutions to jQuery prototype conflicts (with demo sample download)

Home

Web Front-end

JS Tutorial

Two solutions to jQuery prototype conflicts (with demo sample download)_jquery

May 16, 2016 pm 03:19 PM

jquery conflict Solution

This article analyzes two solutions to jQuery prototype conflicts with examples. Share it with everyone for your reference, the details are as follows:

How can jquery and prototype conflict? In the final analysis, it is because both of them use $, and they are used at the same time, which is confusing. This problem has been solved no less than 5 times, and I have to check it every time. It doesn't hurt, hehe.

Method 1. Add code to the core library file of jquery.

1. It is usually jquery.js, or jquery.min.js, some with version numbers. Just know which file it is.

})( window );
jQuery.noConflict(); //最后面，加上这一行。

Copy after login

2. Load test jquery and prototype files

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"&gt;&lt;/script&gt;
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;

Copy after login

3. How to write js code

&lt;script type="text/javascript"&gt;
alert('prototype value : '+$('test').value); //prototype写法
jQuery(document).ready(function($){ //注意这里的，jQuery和$
  alert('jquery value : '+$('#test').val()); //jquery写法
});
&lt;/script&gt;

Copy after login

Recommended this method, this method is more effective once and for all

The complete demo code is as follows:

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="./prototype.js"&gt;&lt;/script&gt;
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;input id="test" type='text' name='test' value='test'/&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
 alert('jquery value : '+$('#test').val());
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Method 2: Resolve the conflict where jquery is called

1. Load test jquery and prototype files

//jquery和prototype，没有先后顺序，谁先谁后都一样。
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"&gt;&lt;/script&gt;

Copy after login

2. js code

&lt;script type="text/javascript"&gt;
jQuery.noConflict(); //解决冲突，这个一定要放在js代码的最前面，不然就会报错了。
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
  alert('jquery value : '+$('#test').val());
});
&lt;/script&gt;

Copy after login

This method is more suitable for situations where the core source files of jquery are not on your own server, or the jquery code is relatively small. The sample demoClick here to view.

The complete demo can be clicked hereDownload from this site.

I hope this article will be helpful to everyone in jQuery programming.

Statement of this Website

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