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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php防攻击代码升级版
2010/12/29 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
AngularJS下对数组的对比分析
2016/08/24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
大宝sod蜜广告词
2014/03/21 职场文书
百年校庆节目主持词
2014/03/27 职场文书
就业协议书范本
2014/04/11 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
早恋主题班会
2015/08/14 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS