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 学习笔记(七)字符串的连接
Dec 31 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
详解JavaScript 的变量
Mar 08 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
JavaScript中var的重要性实例分析
Jul 09 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php异常处理捕获错误整理
2019/09/23 PHP
actionscript与javascript的区别
2011/05/25 Javascript
JsDom 编程小结
2011/08/09 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
js实现简单选项卡制作
2020/08/05 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
田径运动会通讯稿
2014/09/13 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年复活节活动总结
2015/02/27 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
Vue如何清空对象
2022/03/03 Vue.js