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 Web Slider 焦点图示例源码
Oct 10 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JS倒计时代码汇总
Nov 25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
vue组件是如何解析及渲染的?
Jan 13 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
Zend的Registry机制的使用说明
2013/05/02 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
员工自我鉴定范文
2013/10/06 职场文书
成教自我鉴定
2013/10/27 职场文书
总经理职责范文
2013/11/08 职场文书
会计助理的岗位职责
2013/11/29 职场文书
实习评语
2013/12/16 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
逃课上网检讨书
2014/02/20 职场文书
音乐教育感言
2014/03/05 职场文书
五一手机促销方案
2014/03/08 职场文书
教师求职信怎么写
2015/03/20 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
redis内存空间效率问题的深入探究
2021/05/17 Redis
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL