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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
JSONP跨域请求
Mar 02 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 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
一个多文件上传的例子(原创)
2006/10/09 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
为什么是 Python -m
2020/06/19 Python
PyTorch的torch.cat用法
2020/06/28 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
英国袜子店:Sock Shop
2017/01/11 全球购物
大家检讨书5000字
2014/02/03 职场文书
消防应急演练方案
2014/02/12 职场文书
校长师德表现自我评价
2015/03/04 职场文书
检察院起诉意见书
2015/05/20 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers