『Web 制作の現場で使う jQueryデザイン入門』出版記念のjQueryセミナー参加してきました

jQuery JavaScript

当日時間があったので、勉強を始めるキッカケになればと、急遽参加してきたので、セミナーの内容をまとめました。

jQueryとは

個人的には勘違いしていた。。。
「JavaScriptライブラリであるjQueryでAjaxが実現できる」と認識すべし。

jQueryの注目度

  • Googleトレンドによれば、JavaScriptライブラリで圧倒的に1位
  • 当日のセミナー会場でjQueryを使っている人は約10%

jQueryでできること

  • 指定した要素にイベントが発生したら、
  • 指定した要素のHTML/CSS内容を書き換える

この「指定した要素」とは「CSSのセレクタ」のこと。


◆補足　CSSのセレクタについて
何にCSS命令を適用するか選択（セレクト）するからセレクタ。
例）body { color:#336666; }　の場合、body がセレクタ。

jQueryの実装の構造

jQueryの実装は以下の構造となっている。これ重要！

  1. イベントのキャッチ
  2. 指定された要素の状態判定（JavaScriptコードで判定を行う）
  3. 指定された要素HTML/CSSの操作

つまり

　$(function(){　←お約束の書き出し

　　$(”dl dt”).click(function(){　←イベントキャッチ

　　　if($(”dd”,this).css(”display”)==”none”){　←選択要素の状態判定

　　　　$(”dd”,this).slideDown(”slow”);　←操作（アニメーション設定）

　　　}

　　});

　})


以下、「イベントキャッチ」と「操作」について、記述します。

イベントキャッチ

ある要素にどんな「イベント」が発生したかを検知する仕組み。
つまり「いつ」ある要素に操作（書き換え）を行うかを定義する。

例）
　$(”dl dt”).click(function(){　←クリックされたら
　　//イベント発生時の命令
　})

各種操作の基礎

  • HTML操作：例）$(”li”).html(”リンク”)
  • CSS 操作：例）$(”#nav li”).css(”color”,”red”)
  • 属性操作：例）$(”li a”).attr(”href”,”http://to-r.net”)
  • ｱﾆﾒｰｼｮﾝ ：例）$(”dl dd”).slideDown(”slow”)

jQuery活用ポイント

以下のようなシーンに出会ったら、活用を検討してみる。

  • 省スペースを活用したい
  • テーブルを分かりやすくしたい
  • ユーザの入力データのチェックをしたい（フォームバリデーション）
  • ナビゲーションを分かりやすくしたい
  • 補足情報を表示したい
  • ページ遷移をしないで表示したい

まとめ

jQueryは簡単かつリッチな画面構築が可能。今後のWebアプリケーション開発で必須技術のひとつと言えるかもしれない。

参考URL

40分で覚える！jQuery速習講座