第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（3/11 ページ）

ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　loadメソッドの引数urlには、「URL selector」の形式でセレクタ構文を指定できます。セレクタ構文を追加することで、取得したコンテンツの中から一部分だけを抜き出してページに反映させるということが容易にできます。

　具体的な例も見てみましょう。以下は、Animate.htm*を読み込み、その中から最初の<img>要素だけを取り出し、ページに反映させるためのコードです。

* Animate.htmのコードについては、エフェクト編の「独自のアニメーション効果を適用するには？」を参照してください。

<script type="text/javascript">

$(function() {

  // ボタン・クリック時の処理を定義
  $('#btn').click(function() {

    // Animate.htmから最初の<img>要素を取得
    $('#result').load('../Effect/Animate.htm img:first');
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="ロゴ表示" />
  <div id="result"></div>
</form>

リスト108 Animate.htmから最初の<img>要素を取得／反映（LoadSelector.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト108の実行結果