10-08-01
jQuery学習（「jQueryによるJavaScript入門」編）（3）
demoとmemo
前回のjQuery学習（「jQueryによるJavaScript入門」編）（2）の続きになります。第11～最終15回を試していきます。
jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）
--- 属性値の取得 ---
$("CSSセレクタ").attr("属性")
--- 属性値の変更 ---
$("CSSセレクタ").attr("属性","属性値")--- jQuery ---
$(function(){
$(".vol11 li a").click(function(){
$(".vol11 img").attr("src",$(this).attr("href")); //属性値の取得と変更を実行
return false;
})
});
--- html ---
<ul class="vol11">
<li><a href="img/100801/img_01.jpg">はとマーケット</a></li>
<li><a href="img/100801/img_02.jpg">ムツゴロウみたいなの</a></li>
<li><a href="img/100801/img_03.jpg">リス</a></li>
</ul>
<p class="vol11"><img alt="はとマーケット" src="img/100801/img_01.jpg" /></p>--- CSSの取得 ---
$("CSSセレクタ").css("プロパティ")$(function(){
$(".vol12 li a").toggle(function(){
$("body").css("background",$(this).css("color")); //colorを取得し、bodyの背景色に設定
return false;
},function(){
$("body").css("background","white");
})
});
はとマーケット
--- textの取得 ---
$("セレクタ").text()
--- textの置換 ---
$("セレクタ").text("変更後のテキスト")$(function(){
$(".vol13 li a").click(function(){
$(".vol13 img").attr("src",$(this).attr("href"));
$(".vol13 span").text($(this).text()); //thisのテキストを.vol13 spanに置換
return false;
})
});--- htmlの取得 ---
$("セレクタ").html()
--- htmlの置換 ---
$("セレクタ").html("変更後のhtml")--- jQuery ---
$(function(){
$("#vol14 .click li").click(function(){
$("#vol14 .target li").html($(this).html()); //htmlを取得し、#vol14 .target liにて置換
return false;
})
});
--- html ---
<div id="vol14">
<ul class="click">
<li><a href="img/100801/img_01.jpg">はとマーケット</a></li>
<li><a href="img/100801/img_02.jpg">ムツゴロウみたいなの</a></li>
<li><a href="img/100801/img_03.jpg">リス</a></li>
</ul>
<ul class="target">
<li><a href="img/100801/img_01.jpg">はとマーケット</a></li>
</ul>
</div>--- append：指定した要素内の最後にhtmlを追加 ---
$("指定した要素").append("追加するhtml")
--- prepend：指定した要素内の最初にhtmlを追加 ---
$("指定した要素").prepend("追加するhtml")
--- after：指定した要素の後にhtmlを追加 ---
$("指定した要素").after("追加するhtml")
--- before：指定した要素の前にhtmlを追加 ---
$("指定した要素").before("追加するhtml")--- jQuery ---
$(function(){
$(".vol15 li").click(function(){
$(".vol15").append("<li>append</li>");
$(".vol15").prepend("<li>prepend</li>");
$(".vol15").after("<p>after</p>");
$(".vol15").before("<p>before</p>");
return false;
})
});
--- html ---
<ul class="vol15">
<li><a href="#">はとマーケット</a></li>
</ul>