初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery 記述方法

前回はjQueryの導入方法について記述しました。
今回は具体的にjQueryで何が出来るのか?記述していきたいと思います。
最初のうちはこんなのCSSで出来るじゃないかと思うかもしれませんが 後々複雑な記述にも対応できる為、シンプルなものから取り組んでいきたいと思います。

jQueryを記述方法

jQueryはHTMLが全て読み込んだ後、処理の実行をします。 基礎となる記述は下記になります。

<script>
$(document).ready(function(){
//この中に実行したい処理を記述する
});
</script>

更に【(document).ready】を除いて記述する短縮系もあります。 動作は何も変わらないので、jQueryに少し慣れてきたら短縮系で記述してみましょう。

<script>
$(function(){
//この中に実行したい処理を記述する
});
</script>

$()関数は、戻り値としてjQueryオブジェクトを返します。 jQueryオブジェクトとは、セレクターによって取得した要素を保存するとともに、これらを操作する為の機能をもったオブジェクトです。 jQueryでコードを書くことは、jQueryオブジェクトのメソッドを呼び出すということです。

jQueryを使うための流れ

jQueryを使うにあたり、シンプルな流れがあります。

  1. どの箇所に対して
  2. 何をさせる
  3. どのタイミングで

この流れは下記に訳すことできます。

  1. どの箇所に対して:セレクタ
  2. 何をさせる:メソッド
  3. どのタイミングで:イベント

次回以降セレクタメソッド・イベントについて細かく触れていきたいと思います。

topへ戻る