项目同时使用Prototypet和jQuery冲突解决方法

项目同时使用Prototypet和jQuery冲突解决方法

• Overview

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

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>