jQuery prototype冲突的2种解决方法(附demo示例下载)

本文实例分析了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery.fn和jQuery.prototype区别介绍

    近期在读jQuery的源码. 发现这里有个东西很难理解. 这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: 复制代码 代码如下: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { retur

  • 解析jQuery与其它js(Prototype)库兼容共存

    一.在运行这个函数后,可以恢复使用别名 $ ,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用.jQuery Code: 复制代码 代码如下: jQuery.noConflict();(function($) {  $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);// 基于其他库用 $ 作为别名的代码 二.在运行这个函数后,可以创建一个新的 jQuery 别名来替换原来的 jQuery 别名 $ 来使用.jQuer

  • 解析prototype,JQuery中跳出each循环的方法

    复制代码 代码如下: function chk(){        var flag=true;        var msg='';        var tips={'username':'姓名','tel':'电话','company':'公司名称','loupan_name':'楼盘名','sdate':'团购时间','content_1':'团购内容'};        $$('.required').each(function(el){            if($F(el).bl

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • prototype与jquery下Ajax实现的差别

    先列举一下Ajax在Jquery和prototype中的实现. Jquery: 复制代码 代码如下: <script language="javascript"> $(function(){ var box = {}; var remoteUrl = 'index.php'; box.interval = 5*60*1000;//5分钟 box.showBoxInfo = function() { jQuery.get(remoteUrl, function(data){

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

  • jquery与prototype框架的详细对比

    以前做界面是用jquery的,现在因为要用许多ajax效果,改用了rails自带的prototype 因为jquery用多了,换个框架也大同小异,不过细节上有很多不同... 1.dom加载方面: jquery有dom ready方法,推迟js函数的绑定知道dom树完成(如果没有这个功能,一些element的事件函数之类的绑定可能会出错): $(document).ready(function(){}); 但是prototype是没有的...得自己找非官方的扩展,不方便,这个基本的功能,这么重要的

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法

    以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意.今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与prototype的冲突问题,这才发现公司原来的系统很多页面都调用了prototype框架.知道了原因就想办法解决吧,总不至于让我脱离jquery重新写一遍吧,去网上狂搜了一番终于找到了一些解决办法,这就是: 1.将jquery.js放到prototype.js后面(这个是

  • Jquery与Prototype混合用法对比

    但问题来了,由于jQuery以及prototype都使用了美元符函数"$"作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用. 不过很快,有很多人给出了解决方案,如比较流行的方案是这样的: 复制代码 代码如下: <script src="http://jquery.com/src/latest/"></script> <script type="text/javascript">

  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

  • jquery与js函数冲突的两种解决方法

    如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法 其一: 复制代码 代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$

  • jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

    下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

  • 基于jquery trigger函数无法触发a标签的两种解决方法

    起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ 的 $('#a').trigger('click') 居然不起作用,遂百度之,总结两种方法如下: (原因:JQ 的 trigger() 方法确实无法触发 a 标签的转跳动作.) 1:JQ 方法: 对目标 a 标签内部新增一个 span 标签 ,然后给 span 标签绑定 trigger('click') 事件. $('#a').html('<span></span>').children().trigger('cli

  • Json日期格式问题的四种解决方法(超详细)

    Json日期格式问题的四种解决方法(超详细)

    开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据,如下所示: //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom&q

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • onclick和onblur冲突问题的快速解决方法

    onclick和onblur冲突问题的快速解决方法

    新浪首页的搜索框里面有一个使用ajax的下拉框.我们需要实现一个点击下拉框里面的一项,让搜索框里面的值变成这一项,同时下拉框消失的效果,但同时在点击其他地方的时候,这个下拉框也要消失.大致如图: 我们同时使用onblur和onclick来使下拉框隐藏,但是更大的问题出现了,这两个功能相冲突,onblur过于强悍,根本没有onclick方法实现的机会,搜索框无法获取点击项的内容.这个就是我们想要解决的onclick和onblur冲突问题. 对应这个问题,这里我们介绍两种解决办法: 1. 使用set

  • jquery hover 不停闪动问题的解决方法(亦为stop()的使用)

    在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细. 解决闪动 可以使用Stop() stop([clearQueue],[jumpToEnd]) 概述 停止所有在指定元素上正在运行的动画. 如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行 参数 [cl

  • git pull时冲突的几种解决方式(小结)

    仅结合本人使用场景,方法可能不是最优的 1. 忽略本地修改,强制拉取远程到本地 主要是项目中的文档目录,看的时候可能多了些标注,现在远程文档更新,本地的版本已无用,可以强拉 git fetch --all git reset --hard origin/dev git pull 关于commit和pull的先后顺序,commit-->pull-->push 和 pull-->commit-->push的顺序,两种情况都遇到过代码冲突.解决方法如下: 2. 未commit先pull,

  • tomcat正常启动但网页却无法访问的几种解决方法

    tomcat正常启动但网页却无法访问的几种解决方法

    目录 问题1: jdk的版本冲突 一.先检查本机的jdk版本 二.修改jdk版本 三.重新启动tomcat 问题2: 端口冲突 tomcat版本和jdk版本对应关系 最近使用tomcat遇到一点小问题,项目使用tomcat,启动后显示无法访问页面.根据自身使用情况和一些网上搜索到的结果,汇总整理一下. 可能遇到的问题有以下几种: 问题1: jdk的版本冲突 使用的tomcat1.6版本,电脑安装的jdk版本是 1.8,jdk版本冲突导致无法正常使用.解决方案:修改jdk的版本,由jdk1.8修改

随机推荐