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 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
iframe实用操作锦集
Apr 22 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
mint-ui在vue中的使用示例
Apr 05 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Jupyter加载文件的实现方法
2020/04/14 Python
Python 实现一个简单的web服务器
2021/01/03 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
司法建议书范文
2014/05/13 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
扬州个园导游词
2015/02/06 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书