書式

Posted by muchag | jQuery | 2015-02-10 (火) 11:14:07

色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。

jQuery フレームワークの利用

下記、どちらでも同じこと。

  1. jQuery()
  2.  
  3. $()

 
なので

  1. $.isNumeric( arg );
  2.  
  3. jQuery.isNumeric( arg );

これも同じこと。
jQuery 本体のメソッドを使ってるということ。
 

jQuery オブジェクト

下記の3タイプがある。

  1. $( selector [, context ] )
  2.  
  3. $( html [, ownerDocument ] )
  4.  
  5. $( callback )

 

$( selector [, context ] )

いっぱいあるけど、代表は CSS セレクタ(とその属性)。
Category: Selectors

わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。

  1. $( 'body' ) // タグ <body>~</body>
  2.  
  3. $( '#hoge' ) // id <div id="hoge">~</div>
  4.  
  5. $( '.moge' ) // class <a class="moge">~</a>
  6.  
  7. $( '*' ) // ユニバーサルセレクタ(全称セレクタ)

これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
 

属性まで含める場合
  1. // id が hoge で、name 属性が・・・
  2.  
  3. $( '#hoge[name="sun"]' ) // sun のもの
  4.  
  5. $( '#hoge[name!="sun"]' ) // sun でないもの
  6.  
  7. $( '#hoge[name^="sun"]' ) // sun で始まるもの
  8.  
  9. $( '#hoge[name$="sun"]' ) // sun で終わるもの
  10.  
  11. $( '#hoge[name*="sun"]' ) // sun を含むもの
  12.  
  13. $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
  1. // name 属性を持っているもの
  2. $( '#hoge[name]' )
  3.  
  4. // hreflang 属性が en であるもの
  5. $( '#hoge[hreflang|="en"]' )
  6.  
  7. // name 属性を持っていて、value 属性が man で終わるもの
  8. $( '#hoge[name][value$="man"]' )

 

$( html [, ownerDocument ] )

DOM 要素そのもの。
DOM 要素 生成中 に割り込む。

  1. $( '<p>jQuery の可能性はすごいね~</p>' )

 

$( callback )

特別なお方。(要は私にはよくわからない) 🙄
DOM 要素を 読み込み終えたとき に発動。

  1. $( document )

特別なので、クォーテーションで括らない
 

メソッド or イベント

オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。

  1. // id が hoge のオブジェクトの text の
  2.  
  3. $( '#hoge' ).text() // getter
  4.  
  5. $( '#hoge' ).text( arg ) // setter
  6.  
  7. $( '#hoge' ).click() // イベントリスナー

 

イベント
  1. .click( handler )
  2.  
  3. .on( "click", handler )

どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
 

onメソッドはイベントが発生するごとにhtmlの構成をチェックします。

jQuery 入門:イベント(2)

マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
 

.trigger
  1. .trigger( "click" )

これは、イベントを発動させる。
 

事前定義

どれも同意。

  1. $( document ).ready( handler )
  2.  
  3. $().ready( handler ) ←非推奨
  4.  
  5. $( handler )
  6.  
  7. $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定? てか、上の3つの後になるのでダメ?

 
確かによく見るのは下記2種。
DOM 要素の読み込みを完了したら呼ばれる。

  1. $( document ).ready(function() {
  2. // Handler for .ready() called.
  3. });
  4.  
  5. $(function() {
  6. // Handler for .ready() called.
  7. });

 

this
  1. $( this )
  2.  
  3. this

これも何気に困ってた。
 

$( this ):jQuery オブジェクト
this:DOM 要素(jQuery とは関係ない)

と書いてもすぐにはピンとこないよね~。

例えば、id を取得したかったら、下記のような表記の差が出る。

  1. $( this ).attr( 'id' )
  2.  
  3. this.id
jQuery | 2015-02-10 (火) 11:14:07 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment