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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 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
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP XML数据解析代码
2010/05/26 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php intval函数用法总结
2019/04/14 PHP
php适配器模式简单应用示例
2019/10/23 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
爸爸的花儿落了教学反思
2014/02/20 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
股东协议书范本2016
2016/03/21 职场文书