5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。
第５回 HTML5ビギナーズ（jQueryをやります！） : ATND
今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸びした「応用編」。そしてLTは様々なバリエーションの内容が登場します！ ...
「jQueryビギナーズ」と題して、jQueryをテーマにしたセッションが開催されました。
今回は１回目です。最初のセッションは、山崎大助さんの「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ビギナーズ)
関連エントリー
その２
「第５回 HTML5ビギナーズ」に行ってきた（その２「jQuery応用」by 杉山彰啓さん） - プログラマーな日々
その３
「第５回 HTML5ビギナーズ」に行ってきた（その３ LT） - プログラマーな日々
レポート記事
「第5回 HTML5ビギナーズ ～jQueryビギナーズ」開催報告：レポート｜gihyo.jp … 技術評論社
