基本的なjQueryのおさらい(2)

基本的なjQueryのおさらい(2) – メディアデザイン実習J基本的なjQueryのおさらい(1)
http://zokei.koekatamarin.com/archives/647
の続きです。

(1)がわかりにくかったですか?
ここではより具体的かつ根本的な解説を試みます。

 

準備と書き方の流れ
1. jQueryを読み込ませる
2. “おまじない”を書く
3. [主語] 要素を選択して、
4. [動詞] 何かを行う
5. [イベント] いつ・どういう時に

 

1.jQueryを読み込ませる

 

2. “おまじない”を書く

「ページがロード完了したら、以下の処理を実行」という意味

 

※. [主語]と[動詞]

$(セレクタ).メソッド(引数)

 

3. [主語] 要素を選択

$(‘div’).css(‘color’,’red’);
セレクタ

CSSで馴染み深いセレクタ

  • IDセレクタ $(‘#container’)
  • classセレクタ $(‘.selected’)
  • 全称セレクタ $(‘*’)
  • 子孫セレクタ $(‘p span’)
  • グループ化 $(‘p, div’)

IE6のせいで使えなかったセレクタも使える

  • $(‘ul > li’) 子セレクタ
  • $(‘dt + dd’) 隣接セレクタ
  • $(“a[target=’_blank’]”) 属性セレクタ

フィルター系

  • li:first 最初のもの
  • td:even 偶数番目
  • p:contains(‘重要’)

 

4.[動詞] 何かを行う

$(‘div’).fadeIn();
   メソッド
 
取得と設定

2つ目の引数があるかないか
取得  $(‘p’).css(‘color’);
設定  $(‘p’).css(‘color’,’red’);

引数があるかないか
取得  $(‘div’).width();
設定  $(‘div’).width(‘150px’);

 

メソッド例

attr(‘href’)
width()
height()
css()
html()
text()
val()
addClass()
removeClass()
toggleClass()
fadeIn()
fadeOut()
show()
hide()
animate()
ajax()

5. いつ・どういう時に → 「イベント」

クリックされた → 「クリックイベント」

イベント例
dblclick
hover
keydown
scroll
resize




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です