jQueryで要素を指定して操作する(セレクタ)

セレクタの検索結果を変数に保存して、メソッド実行

var m = $('#msg');
m.text('Hello World');
m.css('color','red');

新規にdiv要素を作成して、メソッド実行

$('<div />').text('Hello World').css('color','red').appendTo('body');

※appendTo('body') でbody要素に追加

要素内容の読み出し

$(~).text();


$(function(){
  alert($("#main").text());
});

<div id="main">あいうえお</div>

→「あいうえお」がアラートで表示される

要素内容(HTML)の読み出し

$(~).text();


$(function(){
  alert($("#main").html());
});

<div id="main"><b>あ</b>いうえお</div>

→「<b>あ</b>いうえお」がアラートで表示される

要素内容の書き込み

$(~).text("あいうえお");


$(function(){
 $("#main").txt("あいうえお");
});

<div id="main"></div>

→id="main"の領域に「あいうえお」と表示

タグを生成して表示

$(~).append($("タグ名"));

例1
$(function(){
 $(document.body).append($("<img src='img/photo.jpg'>"));
});

→body内の最後にタグが生成されて表示される

例2
$(function(){
 $("#main").append($("<img src='img/photo.jpg' width='80' height='60'>"));
});

→#main内にタグが生成されて表示される。属性も設定可能

attr()で属性を設定

$("<img>").attr("src","img/photo.jpg")

$("<img>").attr("src","img/photo.jpg").attr("width","80").attr("height","60")

タグの置換


$("#main").replaceWith("<span>"+$("#main").val()+"</span>");

タグの削除


$("img").remove();

each()

$('div[id^=result]').each(function(){
    // 処理
});

IEでHTML挿入に失敗する場合

$("#id").html(data);

$("#id").get(0).innerHTML = (data);

要素が表示されているか判定

if (dom.is(':visible')) {
}

要素にキーと値を保存する

$("セレクタ").data("キー","値");

値を取り出す
$("セレクタ").data("キー")