I just inherited some web pages which uses MooTools. I never used MooTools. Now I need to add some functions on the page, I wonder if it's a good idea to use jquery and mooTools on the same page?
Basically, I have 3 options,
Your opinion will be appreciated.
Opinion: Learn MooTools and then move on with it. Sounds like a great opportunity to learn something new. Why introduce an entirely new library with addition js bloat if you don't need to. If it'll solve the problem you're golden.
Since you're more comfortable with jQuery, I would just call jQuery.noConflict(); first thing, and write the functions in jQuery. That is, of course, if time is a factor.
It depends on how big a project it would be to convert to jQuery, how much of your job is maintaing these pages (vs other pages that already use jQuery), what the urgency is for your first set of changes, etc...
It comes down to a cost comparison: how does the cost to your business to convert them to jQuery compare to the cost to the business for you to learn mooTools (and maybe keep both mootools and jquery in your head at the same time).
The only thing I can say for sure is don't do option 3. This isn't necessarily because it you can't make it work (and there will be challenges), but because you'll have to learn mootools to properly maintain the pages anyway. Once you do that, you may as well just keep them mootools rather than re-write everything or try to mix frameworks.
Personally I'm inclined to say convert it jQuery, since I believe jQuery is eventually going to corner the market. The implication then is that it will convert to jQuery at some point, and so the long term costs to business are probably best optimized by doing the conversion earlier while there's less to convert and mootools is still relevant so you can easily get help with the conversion. But that's certainly arguable.
Personally, I'd recommend not using both, as there are strange conflicts, even with jQuery.noConflict(). Go with one or the other.
If you do end up using both, be sure to use jQuery.noConflict() to ensure that using the $ doesn't conflict.
i'd say, depends on how the code is structured and what you need to do. mootools does render itself to easy refactoring and extending (this is, after all, partly the reason it exists) but it takes a while to figure best practices and so forth.
however, your learning curve from vanilla javascript or jquery won't be too steep, especially so if all you care about is DOM mantipulation, event handling and effects. things get more interesting when you decide to write / extend mootools classes and venture into prototyping - but you may not have to do that...
there are some pretty good tutorials around for most things as well as some demos on doing things through jquery and mootools (equivalent ones). http://jqueryvsmootools.com/ is a good example on how the same task can be done through either one, i'd recommend reading it before deciding.
whatever you decide, it is a bad practice to use two frameworks (when you can do without).
MooTools is a perfectly solid and acceptable Javascript library and I'd recommend you add it to your list of known technologies rather than tear it out and replace with JQuery. Mixing the two is not a good idea as you're likely to encounter obscure difficult to debug conflicts.
JQuery has had all the press of late, but it's by no means cut and dried that it beats every other library hands-down. Far from it. You might even find you prefer MooTools :-)
ADDED: For what it's worth my personal experience is that MooTools seems to play alongside other javascript code more nicely than jQuery. I've been handling several sites of late which have mixed in MooTools with various other pieces of Javascript for different effects/functionality and it's all seemed to play along together with minimal issues. OTOH pages that use jQuery tend to use jQuery versions of everything. YMMV of course.
jQuery and Mootools basics are close enough that moving from one to the other isn't much of a headache.
Whenever I'm given the choice between the two, I lean towards Mootools - especially if I'm intending to do any sort of effects or animations. Mootools's base FX libraries are far more robust and generate better results cross-browser in my experience.
Like others have suggested, you could take this opportunity as a learning experience. If you're satisfied with jQuery and don't feel the need to learn another framework, port the code over. You can't really go wrong with either in the end.
I wrote a blog post about running the 2 side by side. http://chrisbarba.wordpress.com/2009/12/30/need-to-run-jq…s-side-by-side/
I had no trouble getting it work in a SharePoint site. Chris