当前位置:  编程技术>WEB前端

JQuery的$和其它JS发生冲突的快速解决方法

    来源: 互联网  发布时间:2014-08-25

    本文导语:  众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。 然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用...

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。

然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:

我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点

举例:

方法一:

代码如下:


jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype


方法二:

我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点

代码如下:


var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype


还有其它的方法,都给大家列举出来,同理都可以看明白了吧,呵呵。

方法三:

代码如下:


jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
}); 
$("pp").style.display = 'none'; //使用prototype


方法四:
代码如下:


jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery-ui引入后Vs2008的无智能提示问题解决方法
  • jquery dialog open后,服务器端控件失效的快速解决方法
  • 点击表单提交时出现jQuery没有权限的解决方法
  • jquery动态添加元素事件失效问题解决方法
  • JQuery插件fancybox无法在弹出层使用左右键的解决办法
  • jquery live()调用不存在的解决方法
  • jQuery在iframe中无法弹出对话框的解决方法
  • jquery fancybox ie6不显示关闭按钮的解决办法
  • 解决jQuery动态获取手机屏幕高和宽的问题
  • jquery库或JS文件在eclipse下报错问题解决方法
  • WEB前端 iis7站长之家
  • 巧用jquery解决下拉菜单被Div遮挡的相关问题
  • Jquery uploadify图片上传插件无法上传的解决方法
  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • Jquery easyui分页栏显示1到0怎么解决?
  • JQuery中使用ajax传输超大数据的解决方法
  • 解决jquery中post方法返回404错误的问题
  • JQuery给元素绑定click事件多次执行的解决方法
  • jquery组件使用中遇到的问题整理及解决
  • jquery ajax提交无响应怎么办?解决方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3