jquery

jquery（ジェイクエリー）とは、プログラムが苦手なデザイナーさんたちの救世主、もといJavaScriptライブラリの一種である。

概要

jQueryの最大の特長は、短いコードで、しかも直感的にプログラムを書けることである。その方法は言語に近く、〇〇が△△した時、××せよ、という風に書くことができる。

たとえば、idがd1という値を持つ要素divに対し、クリックした時に、背景色を赤色に変えたい場合、このように記述する。

$('#d1').on('click',function(){  

    $(this).css({'background-color':'#f00'})

});

詳しい説明は省略するとして、$('#d1')がclickされたとき、CSSでbackground-colrを#f00(赤)にしなさいという意味である。このように主語、述語、目的語がはっきりしているので、非常に解りやすい。

また、JavaScriptだとループ文などを使わないといけない面倒なケースも、jQueryなら一発で記述できたりする。例として、idがc1tという値を持つチェックボックスで最初から値が選択されている場合である。

$('#c1').prop('checked',true);

これだけで済む。

jQueryが多用されている画面でお馴染みのものとして、以下のような仕掛けがある。これらは知識を付ければ自作もできるが、ライブラリを選択して使うのもオススメする。

• ロールオーバー
• アコーディオン
• Ajaxによる外部サーバ接続
• スライドショー
• タブコンテンツ
• ツールチップ
• ティッカー　…一定時間で、表示される文字列が入れ替わったりする仕掛け。ニュースなどを表示させることが多い。
• カルーセルスライダー　…自作できれば一人前のjQueryマスターである。
• パララックス　…一定位置に来たら、コンテンツが表示されたりするやつ。
• コンテンツスライダー　…画面を手動で、スライドするやつ。レスポンシブ対応だと尚ムズイ。

関連動画

関連商品

関連項目

• JavaScript
• Ajax
• CSS