読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「第5回 HTML5ビギナーズ」に行ってきた(その1「jQuery基礎」by 山崎大助さん)

f:id:JHashimoto:20140409044240j:plain

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。

第5回 HTML5ビギナーズ(jQueryをやります!) : ATND
今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します! ...

 

「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。

今回は1回目です。最初のセッションは、山崎大助さんの「jQuery基礎」でした。

セッション内容

jQueryのメリット

  • 主要ブラウザに対応できる
  • CSSセレクタ互換の記述が可能
  • 拡張ライブラリが豊富
    • lightbox、スライドショー、etc
  • 使用が簡単
  • コード記述量を抑えられる
    • Ajax、アニメーション、etc
  • デザイナに優しい(セレクタがCSS互換なので)

デモ

  • jQueryを使ったエフェクト

Skitter - Slideshow for anytime!

jQuery使用方法

  • jQueryライブラリを読み込む
    • ダウンロードしてサイトに含める
      • ネットワークに接続されていなくても使える
    • または、CDNを使う
      • ネットワークに接続されていないと使えない

http://jquery.com/

jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. ...

 
  • jQueryのダウンロード
  • CDNのURLもここにある

jQuery最初のルール

  • $(document).ready(function() { }
    • DOM構築後のタイミングで処理される
    • 上から読み込むので、DOMを読み込む前に処理しようとするとエラーになる
    • $とjQueryというものだけ使えるようになる(短い$を使うことが多い)
    • wordpressでは、jQueryを使用する($は他で使っていることがあるので)
    • window.onloadと同じ

デモ

  • document.readyを使わない場合
    • まだ読み込まれていない要素にアクセスしようとしてエラーになる
  • Chromeのデベロッパーツールの[要素の検証]で確認

セレクタ→メソッド→イベント

  • 何に対して→どのような事を→どのタイミングで
  • まずはこれだけ覚えればOK!

セレクタ

  • id
    • $("#id名")
  • class
    • $(".class名")
  • Element
    • $("タグ名")
  • name
    • $("*[name=名前]")
  • 複数セレクタを指定
  • 要素の親子関係
  • 先祖子孫

メソッド

  • $("セレクタ").メソッド();

showメソッドを使ったデモ

  • showの種類
    • show
      • 普通に表示する
    • show('slow')
      • ゆっくり表示する
    • show(n)
      • nミリ秒かけて表示する

イベント

  • $("セレクタ").on("click", function() { // 処理 });

セッション資料

20140523 jQuery基礎 (HTML5ビギナーズ)

関連エントリー

その2

「第5回 HTML5ビギナーズ」に行ってきた(その2「jQuery応用」by 杉山彰啓さん) - プログラマーな日々

その3

「第5回 HTML5ビギナーズ」に行ってきた(その3 LT) - プログラマーな日々

レポート記事

「第5回 HTML5ビギナーズ ~jQueryビギナーズ」開催報告:レポート|gihyo.jp … 技術評論社