jQueryのメソッド【引数】

jQueryの基礎を勉強したので、思考の整理のために残しておきます。

jQueryとは

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。

（Wikipediaより）

JavaScriptの機能はいくつかありますが、中でもHTMLで書かれたページに対し動的な動きを与える時によく使われます。

そのJavaScriptを使って、より簡単にHTMLの要素を取得したり、レイアウトに変化を与えたりすることができるライブラリがjQueryということです。

$("HTML要素").jQueryの命令(引数);

HTMLの要素を操作する時には上のように書かれます。

記述する際のポイント

1. 要素の中にはid、クラス、タグなどを指定
2. 引数がある場合は入れるが、無い場合は空の状態で記述
3. 文末はコロン(;)で終わらせる

よく使われるメソッド一覧

• $( HTML要素 ).text("Hello World");

　　要素の中身のテキストを引数の値に変更する

• $( HTML要素 ).html("<p>こんにちは</p>");

　　要素をタグごと引数の要素に変更する

• $( HTML要素 ).hide();

　　要素を隠す

• $( HTML要素 ).show();

　　デフォルトで非表示になっている要素を表示させる

• $( HTML要素 ).fadeOut(1000);

　　要素を１秒かけてフェードアウトさせる

• $( HTML要素 ).fadeIn(500);

　　要素を0.5秒かけてフェードインさせる

• $( HTML親要素 ).append("子要素");

　　親要素の中に引数の子要素を追加する

• $( HTML要素 ).remove();

　　要素自体を丸ごと消す

• $( HTML要素 ).empty();

　　要素の中身を空っぽにする（＝子要素を消す）

• $( HTML要素 ).addClass("new_class");

　　要素に引数のクラスを追加する

• $( HTML要素 ).removeClass("class");

　　要素から引数のクラスを削除する

• $( HTML要素 ).toggleClass("a_class");

　　要素に引数のクラスが無ければ追加、あれば削除する（自動的に判断）

• $( "img" ).attr("src");

　　要素の中の、引数の属性の中身（値）を取得する

• $("img" ).attr("src","http://....jpg");

　　要素の中の、引数の第一属性の中身（値）を取得し、第二引数の値に変更する

• $( HTML要素 )[0].reset();

　　フォームに入力された内容をリセットする（初期値に戻す）

間違いやすい部分は赤字にしておきました。

引数を渡す場合と渡さない場合があってはじめは混乱しましたが、

メソッドの意味を考えると自然とわかってくることが多かったです。