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("キー")