JavaScriptプログラムに関する各種メモ書き

jQueryによるAjax操作の基礎

jQueryで動的に外部HTMLファイル読み込みをした後に変数に代入する

$.get("test.php", function(data, status){
  alert(status);
  alert("Data Loaded: " + data);
});

要素の内容を書き換える( .html() )

$("#hoge").html('<p>書き換える要素</p>');

要素に追加する( .append() )

$("#hoge").append('今ある要素のいちばん後ろに追加します');

要素を動的に( test.phpを読み込んで) に追加する( .load() )

$("#hoge").load("test.php,null,function(){
    alert('読み込み完了');
});

要素を削除する( .remove() )

$("#hoge").remove();

(class="hoge"な要素の)CSSプロパティを書き換える

$('.hoge').css({
    'width'  : '100px' , 
    'height' : '200px'
});

親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速
$(this).parent().find('.myclass'); // 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass'); // 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
    alert('jQueryオブジェクトが正しく取得できています。');
}

関連エントリー

No.754
06/08 16:29

edit

jQuery
Ajax