JQuery的$和其它JS发生冲突的快速解决方法
2018-10-12 14:03
351 查看
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。
然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:
我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点
举例:
方法一:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
方法二:
我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
还有其它的方法,都给大家列举出来,同理都可以看明白了吧,呵呵。
方法三:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
方法四:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
您可能感兴趣的文章:
相关文章推荐
- JQuery的$和其它JS发生冲突的快速解决方法
- JQuery的$和其它JS发生冲突的快速解决方法
- JQuery的$和其它JS发生冲突的快速解决方法
- jquery和其它js库起冲突的解决方法
- JQuery选取器与其它JS框架冲突的解决方法 确保jQuery不会与其他库的$对象发生冲突
- Jquery修改页面标题title其它JS失效的解决方法
- Jquery修改页面标题title其它JS失效的解决方法
- 本人遇到的在ie中出现的jquery.form.js拒绝访问的解决方法
- jquery和其他js库起冲突的解决方法
- js原生态函数中使用jQuery中的 $(this)无效的解决方法
- jQuery在vs2008及js文件中的无智能提示的解决方法
- jquery-1.4.4-vsdoc.js Bug的解决方法
- Velocity与jQuery的$发生冲突时的三种解决方法
- prototype.js 和jquery-1.6.2.js冲突问题解决方法
- jquery和其他js库起冲突的解决方法
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- jQuery在vs2008及js文件中的无智能提示的解决方法
- jQuery在vs2008及js文件中的无智能提示的解决方法
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- jquery find单引号的字符串的其它解决方法测试