jQuery(JavaScript)入門 第1回

この記事は2012年10月17日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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

  • このエントリーをはてなブックマークに追加

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP