1日目:ここ
2日目:jqueryの基本的な使い方をまとめる #2 - 超メモ帳(Web式)
3日目:jqueryの基本的な使い方をまとめる #3 - 超メモ帳(Web式)
4日目:jqueryの基本的な使い方をまとめる #4 - 超メモ帳(Web式)
5日目:jqueryの基本的な使い方をまとめる #5 - 超メモ帳(Web式)
ドットインストールで勉強しているので、自分の学習のアウトプットとしてまとめる。
基本
インストールする場合には公式サイトからダウンロード。
ダウンロードして使わなくても、公式サイトにあるURLをインクルードしても使える。head内で下記のように読み込む。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
htmlが読み込まれた時に処理を実行するには下記のように記述。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function() { $("p").css("color", "red"); }); </script>
$('p")の部分はセレクタと呼ばれ、こちらで処理を行う要素を選択する。
後ろの.css("color", "red")の部分はメソッドと呼び、行う処理を記述する。
また、メソッドの部分は繋げて記述することができて、これをメソッドチェーンと呼ぶ。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function() { $("p").css("color", "red").show("slow"); }); </script>
上記のようにすると、pタグを赤く表示してゆっくりと消える。
セレクタの基本的な使用方法としては、タグごとに指定、class,idで指定する。
$("p").css("color", "red"); //pタグに指定 $("#main").css("color", "red"); //idがmainに指定されている要素 $(".item").css("color", "red"); //classがitemに指定されている要素