JQuery_JQuery冲突解决

最新推荐文章于 2022-12-26 11:15:26 发布

高达一号

最新推荐文章于 2022-12-26 11:15:26 发布

阅读量1.5k

点赞数

分类专栏： JQuery基础知识文章标签： jquery jquery兼容 JQ库兼容兼容

本文链接：https://blog.csdn.net/u010003835/article/details/51365808

版权

JQuery基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近在看《锋利的JQuery》感觉这本书讲的还不错。

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

方法一自定义快捷方式

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

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

            //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('#test').html());
        });
    </script>

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

(1)

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

(2)

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

整体测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery冲突解决</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        jQuery.noConflict();
        jQuery(function(){
            var $test = jQuery('#test');

            //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>
</head>
<body>
    <div id="test">这是一个测试的节点</div>

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

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

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

高达一号

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery_JQuery冲突解决

最近在看《锋利的JQuery》感觉这本书讲的还不错。我们在项目中除了JQuery 有可能要用到其他的JavaScript 库（Ext.js, prototype）时，有可能会与原来的JQuery 库冲突，下面记录了几个解决方法，供大家参考，mark一下方法一自定义快捷方式(1) 使用JQuery作为调用 JQuery的快捷方式 jQuer
复制链接

扫一扫