jquery gets a lot of its inspiration from the power behind the Prototype library. This is immediately noticeable with jquery's use of the $() function, inspired by the Prototype function of the same name. However, there are some things that should be known about the Prototype and jquery interact, and how the $() behaves differently.
Using Prototype and jquery Together
只要先引入prototype再引入
jquery,个人感觉就是作者自己说的,因为是Prototype给他灵感,所以重成了Prototype的部分内容,因此先
jquery必将出现我们所不知道的错误.
To include both Javascript libraries, and have them work in unison, you will need to first include Prototype, then jquery. For example:
<script src="prototype.js"></script>
<script src="http://jquery.com/src/latest/"></script>
Loading jquery first, then Prototype, will cause your code to break - as a reminder, jquery throws an exception saying: "You are overwriting jquery, please include jquery last." (If you see this error, that's what it means)
Differences in $()
A side-by-side comparison of how the $() function works *ONLY WHEN PROTOTYPE IS USED* would be best to explain the differences. If you're not using Prototype, please refer to the documentation, instead.
$("pre")
Prototype: Looks for the element with an ID of pre, if found, returns it, otherwise returns null.
jquery: Looks for all elements with the Tag name of pre.
- If none are found: It then looks for an element with an ID of pre, if one is found - it returns that element, if not, it returns a jquery object, with an empty set of matched elements.
- If elements are found: jquery returns a jquery object, containing the all matched pre elements.
$(DOMElement)
Prototype: Returns the DOMElement.
jquery: Attaches all of the jquery object methods to the DOMElement, then returns it. The result should still be usable by Prototype and jquery. Note: See the bottom of the page for more information on this.
What to do about $()?
Because the behavior of Prototype and jquery is different, when it comes to the $() function, it is recommended that you do one of two things:
Un-ambiguous Selectors
Always be explicit when you search by a single ID. For example, use this:
$("#pre")
and not this, which is ambiguous:
$("pre")
Doing that will solve any problems straight away.
Prototype Short-hand
If you want to continuing using the Prototype short-hand, you must keep one rule in mind: Never name any of your IDs the same as a DOM Element type, otherwise you will have strange results. For example:
$("pre")
would work, if there were no pre elements in the page, but once one was added, your code would break. A better example is:
$("body")
which will always break (since the body element is required).
In a nutshell: Either use smart un-ambiguous !IDs, or don't name your !IDs the same as element names.
Wrapping of DOM Elements
In order to support both Prototype and jquery users at the same time, returned DOM elements have additional jquery functions attached to them. It should be noted, however, that just because the original DOM Element is being returned, its original functions and properties should not be accessed directly, for example:
When using both Prototype and jquery $("wrap") will return a modified DOM Element, so if you were inclined to do:
$("wrap").style.display = 'none';
That would work, but only when using Prototype. If you then, later, stopped using Prototype, that code would break. To be safe, you should only use jquery-sanctioned functions and terminology, for example:
$("#wrap").hide();
would be the proper way of doing the above - it will always work, even if you are (or aren't) using Prototype.
Using Prototype and jquery Together (other solution)
If you need use jquery and also Prototype + Scriptaculous + ... , you need rename jquery $ function. For example:
<script src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src="prototype.js"></script>
Then you can access to jquery function with JQ and for access to Prototype $ function use the normal name. For example:
<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jquery");
$("test_prototype").innerHTML="this is Prototype";
});
</script>
NOTE: Be carefull with jquery plugins, you will need rename all $ references to JQ or other name.
相关推荐
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年,作为Ajax领域最全面、实用的图书,一直深受读者的好评。全书主要分为三个...
Prototype与jQuery美化Checkbox复选框实例.zip
Prototype、JQuery和Mootools的概要图,JAVA Script开发者手头必备!
jQuery、Mootools、Prototype三大JavaScript框架中文手册
DW下的Prototype、Jquery智能提示插件,是用于8.0及以上版本
《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是《基于J2EE的Ajax宝典》的第二版。《基于J2EE的Ajax宝典》面市近2年,作为Ajax领域最全面、实用的图书,一直深受读者的好评。全书主要分为三个...
前一段找了有关prototype和jquery一些相关资料, 包括prototype.chm文档,及prototype与jquery详解,如果用的着,请下载.
最新Javascript开源框架,包含API帮助文档的学习网址。资源共享!
json,jQuery,prototype
Ajax(Ajax,jquery,prototype综合).rar
javascript 框架源码和API(PROTOTYPE,JQUERY)
资源列表: 1、CSS2.0中文帮助文档 2、prototype1.6及其1.4版中文帮助文档 3、jQuery1.2及其1.2版中文帮助文档 4、3个javascript帮助文档,但仅有一个为全中文 以上资源均由互联网收集整理,现发出来...
先列举一下Ajax在Jquery和prototype中的实现。 Jquery: 代码如下: [removed] $(function(){ var box = {}; var remoteUrl = ‘index.php’; box.interval = 5*60*1000;//5分钟 box.showBoxInfo = function() { ...
里面有现在web开发主流框架,jquery bootstrap prototype
CSS2.0样式表中文手册.chm CSS3.0(飘零雾雨版).chm HTML4.01&XHTML; 1.0参考手册.chm ...jquery-1.7.2.js jquery-1.7.2.min.js jQuery1.7.1_API中文手册.pdf jQueryAPI_1.7.1_CN.chm prototype1.7.js
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 ...
web开发文档大全 js HTML5 dom prototype jquery
李刚的疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(完整源代码)绝对完整版,一共分9个部分
李刚的疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(完整源代码)绝对完整版,一共分9个部分
李刚的疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(完整源代码)绝对完整版,一共分9个部分