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初学者应注意的七个细节小结
Jan 30 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
jquery if条件语句的写法
May 19 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 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的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python3中的json模块使用详解
2018/05/05 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python实现淘宝购物系统
2019/10/25 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python中return函数返回值实例用法
2020/11/19 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
继承权公证书
2014/04/09 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015年入党决心书
2015/02/05 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang