例一:jQuery.noConflict();
<!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>
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<script src="../../scripts/jquery-1.3.1.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
</script>
</body>
</html>
例二:var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
<!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>冲突解决2</title>
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例三:jQuery(function($){ ...}); //使用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" />
<title>冲突解决3</title>
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<script src="../../scripts/jquery-1.3.1.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
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例四:(function($){..}); //定义匿名函数并设置形参为$
<!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>冲突解决4</title>
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<script src="../../scripts/jquery-1.3.1.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
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例五:Query(function(){..}); //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
<!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>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="prototype-1.6.0.3.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学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
**jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...
3. 解决jQuery与其他库的冲突 - jQuery 使用 `$` 作为其主要的函数和快捷方式,但这可能导致与其他使用 `$` 的库(如 Prototype)发生冲突。为避免冲突,可以使用 `jQuery.noConflict()` 方法释放 `$` 的使用权,将...
以上就是关于《锋利的jQuery》学习笔记中涉及的一些核心知识点,包括jQuery对象与DOM对象的转换、解决库冲突的方法以及jQuery对CSS选择器和选择器的扩展应用。理解并掌握这些内容,将有助于你更加高效地使用jQuery...
### JQUERY学习笔记 #### 一、选择符与获取元素 **选择符**是jQuery中最基本的概念之一,它使得开发者能够轻松地选取DOM中的元素。通过`$()`符号,我们可以非常方便地操作网页中的HTML元素。 - **基本使用**: -...
解决jQuery与其他库(如Prototype)的冲突问题,可以使用`jQuery.noConflict()`方法,这将释放`$`变量的控制权,使其恢复到之前的库使用。例如,`jQuery(function(){ ... })`包裹内部的代码,确保在这个范围内使用`...
jQuery可以与其他JavaScript库共存,如使用`noConflict()`模式来防止命名冲突。 **学习资源** 网上有许多优秀的jQuery教程和资源,如官方文档、教程网站、Stack Overflow等,持续学习和实践是掌握jQuery的关键。 ...
- **情况**:当jQuery与其他JavaScript库共同使用时可能出现命名冲突。 - **解决方案**: - 如果jQuery在其他库之后导入,可以使用以下方法之一解决冲突: - 使用`jQuery.noConflict();`,之后的代码中用`jQuery`...
**解决 jQuery 与其他库的冲突**: - 使用 `jQuery.noConflict()` 方法可以释放 `$` 符号的控制权给其他 JavaScript 库。例如: ```javascript var $ = jQuery.noConflict(); // 或者自定义快捷方式 var $j = ...
JQuery学习基础学习笔记为我们提供了一个全面认识和了解JQuery的机会,JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和事件处理、DOM操作、动画以及Ajax交互,从而加速了web开发过程。 ...
为了防止与其他JavaScript库中的`$`符号冲突,JQuery提供了`noConflict()`方法,允许我们使用自定义变量名(如`jq`)来替代`$`,如`var jq = jQuery.noConflict()`。 在编写JQuery代码时,最佳实践是将所有代码置于...
jQuery通过`.noConflict()`方法可以解决与其他JavaScript库(如Prototype)的命名冲突问题,保持良好的共存性。 **总结** jQuery的出现极大地简化了JavaScript的开发,它的选择器、事件处理、动画和Ajax等功能让...
- `jQuery.noConflict()`方法可以解决与其他使用`$`符号的库之间的命名空间冲突。 - 示例代码: ```javascript var j = jQuery.noConflict(); ``` #### 二、元素的选择与操作 1. **检查元素是否存在**: - ...
《轻松玩转jQuery》作为一本关于jQuery使用和技巧的书籍,它的个人笔记部分记录了jQuery的核心知识点以及在实际开发中可能会遇到的问题及其解决方法。笔记内容涉及了jQuery库的导入、$符号的控制权释放、元素选择、...
以上就是根据提供的文档内容分析的Jquery学习笔记知识点。通过这篇笔记,我们可以了解到Jquery的入门知识,如何利用Jquery选择器和其链式操作进行DOM操作和事件处理,以及Jquery在实际开发中的强大功能和灵活性。
在学习jQuery动画效果时,首先要知道的是,jQuery为开发者提供了一系列预定义的动画效果函数,这些函数可以用于实现元素的显示、隐藏以及淡入淡出等动态效果。动画效果使得页面元素能够以更流畅和吸引人的方式与用户...