jQueryのAJAXとその他

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのAJAXとその他について纏めています。

Sponsored Link

AJAX

ajax()とそのショートカット

jQueryのajax()は低レベルのXMLHttpRequestsの抽象化の為、自由度の高いファンクションが組めます。ajax()へのショートカットとして高レベルな抽象化メソッドには以下が存在します。

  • load()
  • get()
  • getJSON()
  • getScript()
  • post()

jQueryはJSONPをサポート

ドメインを越えたデータ取得が可能なJSONPをサポートしています。

その他

DOM要素にデータを格納

jQuery.data([element], [key], [value])[element].data([key], [value])を使用することで、DOM要素にデータを格納できます。

$('a').click(function(){
  $this = $(this);
  $ul = $this.closest('ul');

  $ul.data('selectedColor', $this.text()); //格納

  $ul.find('a').removeClass('selected').end().end().addClass('selected');

  alert($ul.data('selectedColor'));  //利用
})

attr()の第二引数

attr()の第二引数にはラップした要素のvalueが渡されます。

<div>0</div>
<div>1</div>
<div>2</div>

$('div').attr('id',function(i){ return 'div'+i});

CSSプロパティもJavaScriptリファレンスも呼べる

jQueryはCSSプロパティを操作する際に、CSSのプロパティ名(background-color)もJavaScriptのリファレンス(backgroundColor)両方呼び出せます。

//どちらでも可
alert($('p').css('background-color'));
alert($('p').css('backgroundColor'));

Reference from : jQuery Enlightenment