javascript - How to be a jQuery no.conflict expert? - Stack Overflow

admin管理员组

文章数量:1237480

How to be a jQuery no.conflict expert?

I mostly face jQuery conflict errors with Prototypes JS. and I'm nota jquery expert.

Can I still solve all conflict problems. how to get expertize to solve conflict issues.

How to know whole code is jquery. what if simple javascript and jquery code mixed in one js file?

What if inside external js code directly begin from

       var opbox="";

this is source order Which i can't change

1

<script type="text/javascript" src="jquery.min.js"></script> 

2
I want to remove conflict error from example.js

<script type="text/javascript" src="example.js"></script>

3

<script type="text/javascript" src="Prototype.js"></script>

4

<script type="text/javascript" src="scriptaculous.js ></script>

How to be a jQuery no.conflict expert?

I mostly face jQuery conflict errors with Prototypes JS. and I'm nota jquery expert.

Can I still solve all conflict problems. how to get expertize to solve conflict issues.

How to know whole code is jquery. what if simple javascript and jquery code mixed in one js file?

What if inside external js code directly begin from

       var opbox="";

this is source order Which i can't change

1

<script type="text/javascript" src="jquery.min.js"></script> 

2
I want to remove conflict error from example.js

<script type="text/javascript" src="example.js"></script>

3

<script type="text/javascript" src="Prototype.js"></script>

4

<script type="text/javascript" src="scriptaculous.js ></script>

• javascript
• jquery

Share Improve this question Follow edited Apr 23, 2011 at 22:59 Mark Ursino 31.4k1212 gold badges5353 silver badges8383 bronze badges asked Apr 27, 2010 at 13:59 Jitendra VyasJitendra Vyas 153k239239 gold badges585585 silver badges866866 bronze badges 3

• 2 What specifically do you need help with? The basics are straight-forward: api.jquery./jQuery.noConflict – T.J. Crowder Commented Apr 27, 2010 at 14:04
• Incidentally noConflict doesn't at all guarantee there will be no conflicts between the frameworks and especially their plugins. For example jQuery adds custom properties to elements it is dealing with; accidentally change, remove or copy those properties by dealing with elements using another framework, and you can terminally confuse it. If you have no other choice but using two frameworks, keep their activities separate from each other as much as you can. But using two frameworks that are as intrusive as jQuery on a single page is to be strenuously avoided. – bobince Commented Apr 27, 2010 at 14:17
• jQuery add nothing to elements, it create wrappers. it's only conflict with most libraries is the "$" function alias that is aliasing the jQuery function/object. Plugins codded according to the guidelines should work. The only conflicts i've seen that are hard to work with are event registration ones... – Julien Roncaglia Commented Apr 27, 2010 at 15:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

The issue is that if you want to use Prototype on the page, $ must be Prototype's $, not jQuery's. Since $ is just an alias for jQuery anyway, jQuery provides the noConflict function as a means of telling jQuery to return control of $ back to whatever had it before jQuery was loaded.

That means whenever you might use $, you'd use jQuery instead, e.g.:

$('.foo').hide(); // Hide all elements with class "foo"

bees

jQuery('.foo').hide(); // Hide all elements with class "foo"

If you're using external scripts, and if they use $, you have to modify them. One way is to do a search-and-replace and just change all the (appropriate) $'s to jQuery.

Another way is to put this just after your script tag including jQuery:

<script type='text/javascript'>jQuery.noConflict();</script>

...and then add this at the top of the external script:

(function($) {

...and this at the bottom of it:

})(jQuery);

(Yes, this means you have to modify the external scripts.)

What that does is put the entire external script inside a function, within which the $ symbol is resolved to jQuery rather than to Prototype's $, because $ is an argument to that function and so it takes precedence. However, that technique will fail with some scripts. If they expect that their function declarations will happen at global scope (e.g., bee properties of the window object), then putting the entire script in a function will break that. In those cases, you have to either manually export those functions by assigning them to window or use the global search-and-replace option above.

There are examples of this on the jQuery noConflict page, although they frequently bine the above with the ready function, which might be a bit confusing.

Note bobince's point about conflicts between frameworks not just being limited to the $ symbol. If you can possibly stick to using just one framework, do that.

Instead of using the $ shortcut, call jQuery.noConflict() and use the full length jQuery() object when using jQuery functionality.

For example:

<script>
    $(document).ready(function(){
        // Do some DOM manipulation here
    });
</scipt>

Would bee:

<script>
   jQuery.noConflict();

   jQuery(document).ready(function(){
       // Do some DOM manipulation here
   });
</script>

Why not just do

<script>
jQuery.noConflict();
(function($){
   $(function(){
      alert('code here');
   });
})(jQuery);
</script>

本文标签： javascriptHow to be a jQuery noconflict expertStack Overflow