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应该怎样学
Apr 16 Javascript
一个网马的tips实现分析
Nov 28 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
javascript中常用编程知识
Apr 08 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
一个很不错的PHP翻页类
2009/06/01 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
同居协议书范本
2014/04/23 职场文书
南京南京观后感
2015/06/02 职场文书
给校长的建议书范文
2015/09/14 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
个人售房合同协议书
2016/03/21 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android