|
||||
|
||||
jQueryと他のライブラリを同時に使用する方法
jQuery は、Prototype など $ 関数を使用する他のライブラリと同時に使用することを想定して設計されています。
また、無名関数の引数に jQuery を渡し、仮引数に $ を使用すれば「 他のライブラリとの同時使用例例えば、Prototype と同時に使用する場合は、以下のように noConflict() を実行します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // jQueryの $ 参照を無効にします。 jQuery.noConflict(); // jQuery を使用する場合は $ の代わりに jQuery を使用します。 jQuery(function() { jQuery("div > p").slideUp("slow"); }); // $ は Prototype を使用します。 $("myId").addClassName("myClass"); </script> </head> <body></body> </html> jQuery を別のショートカットに割り当てることもできます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // jQueryの $ 参照を無効にします。 jQuery.noConflict(); // jQuery を $j に割り当てます。 var $j = jQuery; // jQuery を使用する場合は、上で割り当てた $j を使用できます。 $j(function() { $j("div > p").slideUp("slow"); }); // $ は Prototype を使用します。 $("myId").addClassName("myClass"); </script> </head> <body></body> </html>
<html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // jQueryの $ 参照を無効にします。 jQuery.noConflict(); // このコードブロック内の $ は jQueryのショートカットです。 (function($) { $("div > p").slideUp("slow"); })(jQuery); // $ は Prototype を使用します。 $("myId").addClassName("myClass"); </script> </head> <body></body> </html> 上記の記法は、$(document).ready(fn) イベントハンドラでも使用することができます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // jQueryの $ 参照を無効にします。 jQuery.noConflict(); // DOMの準備が完了した時点で呼び出されます。 // このコードブロック内の $ は jQueryのショートカットです。 jQuery(function($) { $("div > p").click(function() { $(this).slideUp("slow"); }); }); // $ は Prototype を使用します。 $("myId").addClassName("myClass"); </script> </head> <body></body> </html> jQuery の複数バージョンの同時使用例
<html> <head> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.2.6を参照します。 alert($.fn.jquery); // => 1.2.6 // jQuery は jQuery ver1.2.6を参照します。 alert(jQuery.fn.jquery); // => 1.2.6 // $j は jQuery ver1.4.2を参照します。 alert($j.fn.jquery); // => 1.4.2 </script> </head> <body></body> </html> |
|
|||
© 2007-2011 by いけまさ. All rights Reserved. |