频道栏目
首页 > 资讯 > JavaScript > 正文

JQuery_冲突解决

16-05-11        来源:[db:作者]  
收藏   我要投稿

我们在项目中除了JQuery 有可能要用到其他的JavaScript 库(Ext.js, prototype)时,有可能会与原来的JQuery 库冲突,下面记录了几个解决方法,供大家参考,mark一下

方法一 自定义快捷方式

(1) 使用JQuery作为调用 JQuery的快捷方式

<script>
        jQuery.noConflict();
        jQuery(function(){
            var $test = jQuery(&#39;#test&#39;);

            //jQuery获取元素内容
            console.log("第一种冲突解决方法 "+$test.html());

            //javaScript获取元素内容
            var dom = $test.get(0);
            for(var i = 0; i<dom.childNodes.length; i++){
                if(dom.childNodes[i].nodeType == 3){
                    console.log(dom.childNodes[i].nodeValue);
                }
            }
        });
    </script>

(2)使用自定义的符号作为快捷方式

 <script>
        var $j = jQuery.noConflict();
        $j(function(){
            //jQuery获取元素内容
            console.log("第二种冲突解决方法 "+$j(&#39;#test&#39;).html());
        });
    </script>

方法二 在函数内部使用JQuery方法

 

(1)

<script>
        jQuery.noConflict();
        jQuery(function($){
            //jQuery获取元素内容
            console.log("第三种冲突解决方法 "+$(&#39;#test&#39;).html());
        });
    </script>

(2)

<script>
        jQuery.noConflict();
        (function($){
            $(function(){
                //jQuery获取元素内容
                console.log("第四种冲突解决方法 "+$(&#39;#test&#39;).html());
            });
        })(jQuery);
    </script>

整体测试代码:

<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.11.3.js"></script><script>
        jQuery.noConflict();
        jQuery(function(){
            var $test = jQuery(&#39;#test&#39;);

            //jQuery获取元素内容
            console.log("第一种冲突解决方法 "+$test.html());

            //javaScript获取元素内容
            var dom = $test.get(0);
            for(var i = 0; i<dom.childNodes.length; i++){
                if(dom.childNodes[i].nodeType == 3){
                    console.log(dom.childNodes[i].nodeValue);
                }
            }
        });
    </script>

这是一个测试的节点
<script>
        var $j = jQuery.noConflict();
        $j(function(){
            //jQuery获取元素内容
            console.log("第二种冲突解决方法 "+$j(&#39;#test&#39;).html());
        });
    </script><script>
        jQuery.noConflict();
        jQuery(function($){
            //jQuery获取元素内容
            console.log("第三种冲突解决方法 "+$(&#39;#test&#39;).html());
        });
    </script><script>
        jQuery.noConflict();
        (function($){
            $(function(){
                //jQuery获取元素内容
                console.log("第四种冲突解决方法 "+$(&#39;#test&#39;).html());
            });
        })(jQuery);
    </script>

 

相关TAG标签
上一篇:$.ajax()方法详解
下一篇:HTTP-URL中查询字符串格式化
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站