書式
色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。
jQuery フレームワークの利用
下記、どちらでも同じこと。
- jQuery()
- $()
なので
- $.isNumeric( arg );
- jQuery.isNumeric( arg );
これも同じこと。
jQuery 本体のメソッドを使ってるということ。
jQuery オブジェクト
下記の３タイプがある。
- $( selector [, context ] )
- $( html [, ownerDocument ] )
- $( callback )
$( selector [, context ] )
いっぱいあるけど、代表は CSS セレクタ（とその属性）。
Category: Selectors
わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。
- $( 'body' ) // タグ <body>～</body>
- $( '#hoge' ) // id <div id="hoge">～</div>
- $( '.moge' ) // class <a class="moge">～</a>
- $( '*' ) // ユニバーサルセレクタ（全称セレクタ）
これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
属性まで含める場合
- // id が hoge で、name 属性が・・・
- $( '#hoge[name="sun"]' ) // sun のもの
- $( '#hoge[name!="sun"]' ) // sun でないもの
- $( '#hoge[name^="sun"]' ) // sun で始まるもの
- $( '#hoge[name$="sun"]' ) // sun で終わるもの
- $( '#hoge[name*="sun"]' ) // sun を含むもの
- $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
- // name 属性を持っているもの
- $( '#hoge[name]' )
- // hreflang 属性が en であるもの
- $( '#hoge[hreflang|="en"]' )
- // name 属性を持っていて、value 属性が man で終わるもの
- $( '#hoge[name][value$="man"]' )
$( html [, ownerDocument ] )
DOM 要素そのもの。
DOM 要素 生成中 に割り込む。
- $( '<p>jQuery の可能性はすごいね～</p>' )
$( callback )
特別なお方。（要は私にはよくわからない） 🙄
DOM 要素を 読み込み終えたとき に発動。
- $( document )
特別なので、クォーテーションで括らない。
メソッド or イベント
オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。
- // id が hoge のオブジェクトの text の
- $( '#hoge' ).text() // getter
- $( '#hoge' ).text( arg ) // setter
- $( '#hoge' ).click() // イベントリスナー
イベント
- .click( handler )
- .on( "click", handler )
どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
onメソッドはイベントが発生するごとにhtmlの構成をチェックします。
jQuery 入門：イベント(2)
マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
.trigger
- .trigger( "click" )
これは、イベントを発動させる。
事前定義
どれも同意。
- $( document ).ready( handler )
- $().ready( handler ) ←非推奨
- $( handler )
- $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定？ てか、上の３つの後になるのでダメ？
確かによく見るのは下記２種。
DOM 要素の読み込みを完了したら呼ばれる。
- $( document ).ready(function() {
- // Handler for .ready() called.
- });
- $(function() {
- // Handler for .ready() called.
- });
this
- $( this )
- this
これも何気に困ってた。
$( this )：jQuery オブジェクト
this：DOM 要素（jQuery とは関係ない）
と書いてもすぐにはピンとこないよね～。
例えば、id を取得したかったら、下記のような表記の差が出る。
- $( this ).attr( 'id' )
- this.id