jQueryのコードの書き方、ajax、非同期通信

今回は、

1) jQueryのコードの書き方

2) ajaxでURI取得するときの動き

をアウトプットします。

1) jQueryのコードの書き方

$ (  '#(id=)'  ) . on (  'イベント',  function( ) {   処理  ( 操作 )  } ); 

→　$( '#(id=)' )＝< id=~ >...</>

<主なイベント一覧>

イベント名	該当するタイミング
click	クリックされた時
dblclick	ダブルクリックされた時
mouseover	マウスが要素の上に乗った時
mouseout	マウスが要素から離れた時
keydown	キーが押された時
keyup	キーが離されたとき
change	入力内容が変更された時

＜主な処理一覧＞

処理（操作）名	説明
~.hide()　⇔　~.show()	~を非表示、表示にする
~.fadeIn(tミリ秒) ⇔　Out	tミリ秒でフェードイン、アウト
~.attr(属性)	~要素の属性値を取得
~.val()	~(フォーム)で入力された値を取得
~.text(-)	~の記述を-に変更
~.css()	~にcss()を適用
~.addClass(-)	< ~ class="-">...</>

2) ajaxでURI取得するときの動き 、非同期通信

var requestUrl  =  http://... (Host)  +  /.../ (Path)  +  q=~  +  &APPID  +  API_KEY ;　

Host先のアプリが発行しているAPI_KEYを以上のように使えば、

Host先のWEBアプリの一部を使えるようになる。

このURLをリクエストすると、HTML, JSON等の形式(Rubyのハッシュのような)で

データが返ってくる。

JavaScript上では

 $.ajax(requestUrl)

として簡単にHTTPリクエストを送れる。

.done (function(data) { 処理 }) ;

通信が上手く行ったとき、上記の処理に

if (data.cod == 200(ステータスコード、通信成功))としてその後の処理を書く。

この処理の中に、上記の.textなどをして

URLはrequestUrlのままでテキスト(html要素)の中身を返ったデータに則して変えたり

動き(css)をつけたり出来る。

⇒非同期通信

Twitterなんかが代表例

まず思ったことは、大分削ぎ落としたけども(1)については大枠は大体これ

あとは細かいイベントや処理は必要に応じてググれるようになれば、

ひとまずアプリは作れそう

最低限のは上のでいいはず

問題は、今解決したいことを完全に明確にすることにあると思われる。

× htmlテキストの中身を取得したい

○ htmlのdivタグ内の２番目のpタグのテキストを取得したい

（実際につまづいた問題）

ここまで「今自分が何をすべきか」を明確にすれば後はググるだけ

でもこれがなかなか難しい・・・

鍛錬が必要ですね

ちゃんけん