検索
連載

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

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

Share
Tweet
LINE
Hatena



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る