先日、jQuery初心者向け勉強会に参加してきました。
業務でもよく使うjQueryですが、コピペは出来てもプログラムの内容をきちんと理解できていなかったので、基礎から学べてとても勉強になりました！
学んだことを記事にして、新米コーダーさんの参考にちょっとでもなったらいいな、と思います＾＾

jQueryを学ぶステップ

jQueryを使うにはプログラムを書きます。
プログラムは言語なので、英語を学ぶのと同じように段階を踏んで勉強していきます。

(1) 触れること
まずはソースを確認して、見てみることです。

(2) 読むこと
どんな命令を出して、どんな動きをつけているのか、使うプログラムについて理解します。

(3) 書くこと
ただコピペするだけじゃなくて、理解したプログラムを自分で書いてみます。

(4) 教えること
覚えたことをアウトプットすることですね。
私はなかなかこの段階が出来ていませんので、この記事を通じてやってみようと思いました(｀･ω･´)ゞ

jQueryで何が出来るの？

jQueryを使うと、アニメーションなどの動きをつけることが出来ます。
アニメーションは以前ご紹介したCSS3でも出来ますが、CSS3とはまた違った動きをつけられるのです。

例えばこんなのがあります。

スライダー

メイン画像の動き

姫路観光：http://www.himeji-kanko.jp/

ライトボックス

画像拡大の動き

ブリッジコーポレーション2016年卒新卒採用サイト：http://recruit.bridge-net.co.jp/student16/

よく見かける動きですよね。
こういったものは実はjQueryで出来ているんです。

JavaScriptとjQueryの違い

jQueryはJavascriptベースで作られたライブラリであり、JavaScriptの機能を補ってくれるもので、JavaScriptで作られています。
javascriptで100行書かないといけない内容でも、jQueryだと30行くらいでできるというという特徴があります。

変数と値

変数とは、値を入れておくための入れ物です。

var abc =”おはよう”;

「var」は、変数を宣言するキーワードです。「abc」に”おはよう”という文字列を入れると、「これからabcを変数として使うぞ！」と宣言してくれるのです。

値には、以下のようなものがあります。
・文字列：”おはよう”
・数　値：3.14159
・論理値：trueまたはfalse
・その他：null　(空っぽという意味)

JQueryの書き方

読み込み方
まずはjQueryを読み込みます。
<script src="js/jquery-1.10.2.min.js"> </script>

現在ではバージョン1.○○系、と2.○○系の2つのタイプで開発されているそうです。
私も今回初めて知ったのですが、2.○○系はIE8非対応のバージョンという違いがあるようです。
なのでIE8対応の時はバージョン1.○○系を使いましょう！

基本的な書き方

基本的な書き方は、以下のようになります。

$(function(){
//ここに処理を書く
$('選択する要素（セレクター）').jQueryの命令
});

例えば、CSSの情報を操作するプログラムだと

$(function() {
//$('セレクター').jQueryの命令
//$('bodyという要素に').CSSの背景色を#000、文字色を#FFFにしてほしいという命令。
$('body').css({backgroundColor:'#000' ,color:'#FFF'});
});

こうなります！

セレクタ

セレクタとは、任意の範囲、要素を指定するためのものです。セレクタで対象を指定し、命令を指示します。

・要素セレクタ
$("div").css("color", "red");
要素（タグ）を指定する時に使います。

・クラスセレクタ
$(".box").css("color", "red");
クラスを指定する時に使います。

・IDセレクタ
$("#button").css("color", "red");
IDを指定する時に使います。

エフェクトのいろいろ

$("セレクター").メソッド("オプション指定");

エフェクトには、例えば以下のようなものがあります。

.show()
要素が非表示の場合、表示します。
show(speed, [callback])
表示時のスピードを設定できます。また、表示が完了した際に呼び出す関数を設定することもできます。

.hide()
要素を非表示にします。
hide(speed, [callback])
非表示時のスピードを設定できます。また、非表示なった際に呼び出す関数を設定することもできます。

.toggle()
要素の表示・非表示を、関数が呼び出される度に切り替えます。
toggle(switch)
要素の表示・非表示を、引数にあわせて切り替えます。

最後に

先輩の書いたものを真似しながらちょこっとずつ使い始めたjQueryですが、
勉強会に参加して、知らなかった基礎知識を身につけることが出来ました。
最初に書いたとおり、コピペして再現することは出来ても、自分で意味を理解しながら書いたり人に説明したりすることがまだまだ出来ないので、これからは作って終わりではなく、理解して説明が出来るよう、しっかりアウトプットしていきたいと思いました！

お問い合わせ