Tips

jQuery(JavaScript)入門 第1回

jQuery

jQueryとは 2006年にリリースされたJavaScriptライブラリの一つです。
ブラウザ間の違いやクロスブラウザに対するサポートや、CSS操作、Ajax対応などの利点により近年絶大な人気を誇っています。
そのためシェアが高く将来的に有望なJavaScriptと言えます。

jQueryの導入方法

http://jquery.com/ から入手し、HTMLの <sclipt src =””>タグを指定することにより使用できる。

メソッドチェーン

jQueryの特徴の一つとしてメソッドチェーンが挙げられます。
jQueryオブジェクトのメソッドの戻り値の多くがjQueryオブジェクトになっているため、
(.)でつなぐことにより積み木を積み上げるように簡単にプログラムを書き上げることが可能になっています。
簡単に言うなら、メソッド処理を行う最その頭に 『divs.メソッド名1();divs.メソッド名2();』といちいち書く必要がなくなるということです。
これにより処理を簡潔に記述出来るようになりました。

jQueryの特徴

上記のとおりjQueryは他JavaScriptライブラリに比べ短く簡潔なコードで多彩な表現が可能となっています。

例としてDIVのredClassのみを赤文字にするコードで比較してみましょう。

JavaScriptで書いた場合

<div>赤</div> <p>黒</p> <div>赤</div> <div>赤</div> <div>黒</div>

<script type=”text/javascript”>   var divs= document.getElementsByTagName(“DIV”);   for(var i=0;i<divs.length;i++){     if((divs[i].getAttribute(“className”)||         divs[i].getAttribute(“class”))==”redClass”){       divs[i].style.color=”red”;     }   } </script>

jQueryで書いた場合

<div>赤</div> <p>黒</p> <div>赤</div> <div>赤</div> <div>黒</div>

<script type=”text/javascript”>   $(“DIV.redClass”).css(“color”,”red”)  // $(“DIV[class=’redClass’]”).css(“color”,”red”); </script>

jQueryの方が短いコードで書くことが出来ることがわかりますね。

今回はjQueryを使うとソースコードの簡略化が可能になるという話になりましたので 次回はスライドのでもコードを作ってみようと思います。

Recent News

Recent Tips

Tag Search