锋利的 jQuery（一）--配置jQuery、解决jQuery和其他库的冲突

最新推荐文章于 2023-02-04 12:52:45 发布

Scarlett·S

最新推荐文章于 2023-02-04 12:52:45 发布

阅读量194

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_37503890/article/details/89432473

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 配置jQuery环境
（1）．获取jQuery最新版本
进入jQuery的官方网站http://jquery.com/。如图所示的右边的GRAB THE LATEST VERSION区域，下载最新的jQuery库文件。

（2）．jQuery库类型说明
jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版）

（3）．jQuery环境配置
jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。
（4）在页面中引入jQuery
在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了，程序如下：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html； charset=utf-8" />
    <!-- 在head标签内 引入jQuery  -->
    <script src="jquery-3.4.0.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
    </html>

2. jQuery开发工具和插件
（1）．Dreamweaver
Dreamweaver是建立Web站点和应用程序的专业工具。Dreamweaver将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建基于标准的网站和应用程序。从对基于 CSS的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的开发环境中所需的工具。
目前新版的Adobe Dreamweaver CS 5.5已经加入了jQuery语法自动提示功能。

3. 解决jQuery和其他库的冲突
在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。
注意：默认情况下，jQuery用$作为自身的快捷方式。
（1）．jQuery库在其他库之后导入
在其他库和jQuery 库都被加载完毕后，可以在任何时候调用 jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下：

//⋯省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="jquery-3.4.0.js" type="text/javascript"></script>
<script language="javascript">
    jQuery.noConflict()；//将变量$的控制权移交给prototype.js
    jQuery(function(){//使用jQuery
      jQuery("p").click(function(){
          alert( jQuery(this).text() )；
      })
    })
    $("pp").style.display = 'none'； //使用prototype.js隐藏元素
</script>
</body>
//⋯省略其他代码

然后，就可以在程序里将jQuery ()函数作为jQuery对象的制造工厂。
此外，还有另一种选择。如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

//⋯省略其他代码
var $j = jQuery.noConflict()；            //自定义一个快捷方式
$j(function(){                            //使用jQuery，利用自定义快捷方式—$j
      $j("p").click(function(){
            alert( $j(this).text() )；
      })
})
$("pp").style.display = 'none'；          //使用prototype.js隐藏元素
//⋯省略其他代码

可以自定义备用名称，例如jq、$J、awesomequery等。
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。

其一：
//⋯省略其他代码
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
//⋯省略其他代码

这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。
（2）．jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下：

//⋯省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<!--先导入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="lib/prototype.js" type="text/javascript"></script>
<script language="javascript">
      jQuery(function(){  //直接使用jQuery，无需调用"jQuery.noConflict()"函数
        jQuery("p").click(function(){
            alert( jQuery(this).text() )；
        })
      })
      $("pp").style.display = 'none'； //使用prototype
</script>

有了这些方法来解决冲突，就可以在项目中放心地引用jQuery了。

Scarlett·S

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
锋利的 jQuery（一）--配置jQuery、解决jQuery和其他库的冲突

1 配置jQuery环境（1）．获取jQuery最新版本进入jQuery的官方网站http://jquery.com/。如图所示的右边的GRAB THE LATEST VERSION区域，下载最新的jQuery库文件。（2）．jQuery库类型说明jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版）（3）．jQuery环境配置jQuery不需要安装，把下载...
复制链接

扫一扫