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

2023-11-08

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了。
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

锋利的 jQuery(一)--配置jQuery、 解决jQuery和其他库的冲突 的相关文章

随机推荐

  • 中标麒麟系统安装达梦数据库

    前言 近期 参加达梦公司组织的DCA认证培训 在中标麒麟下安装DM8数据库 以下是安装笔记 一 安装DM数据库 1 服务器信息查看 root localhost uname r 3 10 0 957 el7 x86 64 root loca
  • WordBias

    目录 WordBias 安装 界面 案例1 极端主义 案例2 pretty beautifull 论文 词嵌入做为一种词向量模型 可以从文本中计算出隐含的上下文情景信息 态度及偏见 通过词向量距离的测算 就可以间接测得不同群体对某概念 组织
  • 软件工程毕业设计选题c语言,经典软件工程专业论文选题 软件工程专业论文题目选什么比较好...

    100道 关于经典软件工程专业论文选题汇总 作为大学生的毕业生应该明白了软件工程专业论文题目选什么比较好 选一个好的题目后续的软件工程专业论文写作起来会更轻松 一 比较好写的软件工程专业论文题目 1 面向软件工程专业的 算法设计与分析 课程
  • python的exec函数

    exec 是 Python 内置的一个函数 用于在运行时执行动态生成的 Python 代码 它以字符串形式接收一个代码块 并将其编译并执行为可执行的 Python 代码 exec 函数的语法如下 exec object globals No
  • Android控件之AutoCompleteTextView、MultiAutoCompleteTextView探究

    在Android中提供了两种智能输入框 它们是AutoCompleteTextView MultiAutoCompleteTextView 它们的功能大致一样 显示效果像Google搜索一样 当你在搜索框里输入一些字符时 至少两个字符 会自
  • 【商业知识】中国消费者洞察

    文章目录 一 市场 中国消费市场已进入复苏期 二 政策 政策不断优化消费环境 三 社会 消费者逐步步入正确消费时代 四 品牌 科普专业知识 加深消费者对技术力的感知 五 电商直播 提供源头优质产品 提高生活质量 六 信息平台 科学消费和内容
  • C++ 模板特化

    我们不可能写出对所有类型都适合的模板 某些情况下 通用模板定义对于某个类型可能是完全错误的 这个时候我们需要编写比模板函数更有效率的函数 这就是模板特化 思考一个例子 编写比较函数的泛型函数模板 template
  • 使用IDEA打不开setting怎么解决?

    问题 汉化IDEA后 怎么打不开setting 解决办法 在关闭idea的条件下 使用解压软件打开汉化包 打开不是解压哦 将其messages文件夹内的 IdeBundle properties 系统设置 setting 外观选项加载不出来
  • 建立实体类和数据库映射(注解)

    1 建立实体类和数据库映射 Select select from user Results id resultMap value Result id true property userId column id Result propert
  • 服务器中勒索病毒了

    非常重要的一点 备份好数据 异地备份
  • 多版本node的安装与切换详细操作

    多版本node的安装与切换详细操作 安装多版本node的原因 方法一 利用nvm进行管理 NVM 简介 安装前须知 卸载已安装的nodeJS nvm 的安装与使用 node 的不同版本安装及切换 方法二 通过配置环境变量 切换node时只需
  • LeetCode刷题指南(一)

    以下是我个人做题过程中的一些体会 1 LeetCode的题库越来越大 截止到目前 已经有321个问题了 对于大多数人来说 没有时间也没有必要把所有题目都做一遍 时间充裕可以随意 刷个100题左右应该就差不多了 可以考虑序号为前100多的题目
  • js编程题总结

    lazyman 实现一个LazyMan 可以按照以下方式调用 LazyMan Hank 输出 Hi This is Hank LazyMan Hank sleep 10 eat dinner 输出 Hi This is Hank 等待10秒
  • QT常见错误及解决方法

    1 error header was not declared in this scope 在使用此变量之前没有对其进行定义 2 error RtlWerpReportException failed with status code 10
  • 树莓派体验12 - 树莓派I2C接口获取温湿度

    i2c tools工具安装 apt get install i2c tools i2c tools包含如下命令 i2cdetect i2cdump i2cget i2cset 通过raspi config打开树莓派I2C 执行i2cdete
  • 30天自制操作系统学习-第14天

    1 提高分辨率 修改asmhead nas画面模式的设定 只考虑支持QEMU模拟器的显卡 设定画面模式 MOV BX 0x4101 VBE的640x480x8bi彩色 MOV AX 0x4f02 INT 0x10 MOV BYTE VMOD
  • Windows CMD 添加自定义快捷指令

    首先在想要存放快捷指令文件的位置创建一个txt文档 我放在了c盘的user文件夹下 使用vscode打开刚刚创建的txt文件 把后缀改为 bat记住要确认改成了 bat而不是 bat txt 随便写点快捷指令 可以先拿start 浏览器来测
  • 基于SSM的商城管理系统

    1 项目介绍 基于SSM的商城管理系统6拥有管理员账号 具有商品管理 会员管理 添加视频 购物车 搜索商品等功能 2 项目技术 后端框架 SSM Spring SpringMVC Mybatis 前端技术 jsp css JavaScrip
  • ResNet解决了什么问题?

    ResNet解决的根本问题是什么 相同深度的一般前向网络的解集合和resnet的解集合是相等的 所以resnet解决的并不是模型表达能力的问题 而是模型优化问题 ResNet是如何解决优化问题的 1 更平滑的解空间的流形 从文献Visual
  • 锋利的 jQuery(一)--配置jQuery、 解决jQuery和其他库的冲突

    1 配置jQuery环境 1 获取jQuery最新版本 进入jQuery的官方网站http jquery com 如图所示的右边的GRAB THE LATEST VERSION区域 下载最新的jQuery库文件 2 jQuery库类型说明