jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式。
- jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。
<!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" />
<title>冲突解决1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
}); $("pp").style.display = 'none'; //使用prototype.js隐藏元素
</script>
</body>
</html>
可以在程序里将jQuery()函数作为jQuery对象的制造工厂。
如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以使用如下的操作:
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
}); $("pp").style.display = 'none'; //使用prototype.js隐藏元素
如果不想给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
- jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作,同时可以使用$()方法作为其他库的快捷方式,这里无须调用jQuery.onConflict()函数。
<!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" />
<title>冲突解决5</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p> <script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
}); $("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
jQuery基础学习3——jQuery库冲突的更多相关文章
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- 【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...
随机推荐
- Proxifier设置代理
1.首先需要开启http代理选项---配置文件->高级->HTTP代理服务器,勾选“启用HTTP代理服务器支持” 2.然后开始添加代理服务器选择“配置文件->代理服务器”,在弹出框点 ...
- Android下 ionic view 无法登录
ionic view一个超棒工具,它是测试 ionic 框架搭建项目的app软件. 在它的官网有iphone 和 android 版本的下载地址.但是,这里只有在 google play 里面才有,而 ...
- 基于XMPP的即时通信系统的建立(四)— 协议详解
Presence 在XMPP协议中,我们使用presence来获取用户是否已经上线以及是否可以通信的状态. 为了能够知道自己联系人的状态以及让联系人知道自己的状态,用户上线后需要订阅联系人的状态,联系 ...
- codeforces 334B - Eight Point Sets
题意难懂,其实就是x1<x2<x3与y1<y2<y3两两组合成九个点,去掉(x2,y2),剩余八个.这样的八个点才是满足要求的. 忘去重了 #include<cstdio ...
- dynamic_cast,const_cast,static_cast,reinterpret_cast 详解
如果直接指针直接强转,将只能访问虚函数的内容,而不能访问特定类中的特定成员或方法!!!! 强制类型转换运算符:C++有四种强制类型转换符,分别是dynamic_cast,const_cast,stat ...
- 【 D3.js 高级系列 — 6.0 】 值域和颜色
在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...
- python - wsgi协议
wsgi - python web server gateway interface 出现的目的是,为了在 python框架开发的时候,更具有通用性.只要符合 wsgi标准,就可以自由选择服务器(ng ...
- Java [Leetcode 122]Best Time to Buy and Sell Stock II
题目描述: Say you have an array for which the ith element is the price of a given stock on day i. Design ...
- DrawDibDraw函数的使用方法
使用windows的的自带的函数来显示图像可能始终还是绕不开两个概念, 视口和窗口. 视口--- 屏幕上的一个显示用的矩形框. 窗口--- 完整图像上的一个用于取数的矩形框. 屏幕的宽度.高度和视口参 ...
- wifi详解(一)
1 WLAN技术 WLAN是英文WirelessLAN的缩写,就是无线局域网的意思.无线以太网技术是一种基于无线传输的局域网技术,与有线网络技术相比,具有灵活.建网迅速.个人化等特点.将 ...