jQuery prototype冲突的2种解决方法(附demo示例下载)


Posted in Javascript onJanuary 21, 2016

本文实例分析了jQuery prototype冲突的2种解决方法。分享给大家供大家参考,具体如下:

jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了。这个问题解决过不下5次,每次解决都要查一下。淡疼,嘿嘿。

方法一、在jquery的核心库文件中加代码。

1、一般是jquery.js,或者jquery.min.js,有的带版本号的。知道是哪个文件就行。

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

2、加载测试jquery和prototype文件

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="jquery.min.js"></script>

3、js代码写法

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

推荐这种方法,这种方法比较一劳永逸

完整demo代码如下:

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

方法二、在调用jquery的地方,解决冲突

1、加载测试jquery和prototype文件

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

2、js代码

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

这种方法比较适合jquery的核心源文件不在自己的服务器上,或者jquery代码比较少的情况。该示例demo点此查看。

完整demo可点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript用户注册提示效果的简单实例
Aug 17 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
jquery mobile开发常见问题分析
Jan 21 #Javascript
json格式数据的添加,删除及排序方法
Jan 21 #Javascript
jquery及js实现动态加载js文件的方法
Jan 21 #Javascript
js console.log打印对像与数组用法详解
Jan 21 #Javascript
JS遍历数组及打印数组实例分析
Jan 21 #Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 #Javascript
如何用angularjs制作一个完整的表格
Jan 21 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
PHP实现简单的计算器
2020/08/28 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Angular路由简单学习
2016/12/26 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书