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判断单个复选框是否被选中的代码
Sep 03 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
javascript 数组操作详解
Jan 29 Javascript
百度地图自定义控件分享
Mar 04 Javascript
深入理解js promise chain
May 05 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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中trim()函数简单使用指南
2015/04/16 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
django框架cookie和session用法实例详解
2019/12/10 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
法律专业自我鉴定
2013/10/03 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
教师自荐信范文
2013/12/09 职场文书
运动会方阵口号
2014/06/07 职场文书
计划生育标语
2014/06/23 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
详解JS ES6编码规范
2021/05/07 Javascript
python 远程执行命令的详细代码
2022/02/15 Python