jQuery sample1
jQueryのsample1です。
ここでは、jQueryを使ったHTML要素へのアクセスを体験してみてください。
ID:result1を書き換え
ID:result2を書き換え
すべてのclass:mainを書き換え
すべてのclass:mainを書き換え
すべてのpタグを書き換え
すべてのpタグを書き換え
ID:content1内のclass:mainを書き換え
ID:content1内のpタグを書き換え
ID:result1内のclass:mainをID:result2内のclass:mainに貼り付け
ID:result1内のpタグをID:result2内のclass:mainに貼り付け
ID:result1
class:main
tag:p
ID:result2
class:もうひとつmain
tag:もうひとつp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>jQuery sample1</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> <!-- input { width: 200px; } textarea{ width: 100%; } div{ border: 1px solid #666666; margin: 1em; padding: 0.5em; } #content1{ background-color: #D0DCE1; } #content2{ background-color: #DED6E4; } --> </style> </head> <body> <h1>jQuery sample1</h1> <div id="header"> <p>jQueryのsample1です。<br> ここでは、jQueryを使ったHTML要素へのアクセスを体験してみてください。</p> </div> <div id="content_btn"> <form action="" method="get"> <input name="btn1" type="button" value="IDをtextで設定" onClick="pushBtn1()">ID:result1を書き換え<br> <input name="btn2" type="button" value="IDをhtmlで設定" onClick="pushBtn2()">ID:result2を書き換え<br> <br> <input name="btn3" type="button" value="classをtextで設定" onClick="pushBtn3()">すべてのclass:mainを書き換え<br> <input name="btn4" type="button" value="classをhtmlで設定" onClick="pushBtn4()">すべてのclass:mainを書き換え<br> <br> <input name="btn5" type="button" value="tagをtextで設定" onClick="pushBtn5()">すべてのpタグを書き換え<br> <input name="btn6" type="button" value="tagをhtmlで設定" onClick="pushBtn6()">すべてのpタグを書き換え<br> <br> <input name="btn7" type="button" value="ID内のclassをtextで設定" onClick="pushBtn7()">ID:content1内のclass:mainを書き換え<br> <input name="btn8" type="button" value="ID内のtagをhtmlで設定" onClick="pushBtn8()">ID:content1内のpタグを書き換え<br> <br> <input name="btn9" type="button" value="ID内のclassをtextでペースト" onClick="pushBtn9()">ID:result1内のclass:mainをID:result2内のclass:mainに貼り付け<br> <input name="btn10" type="button" value="ID内のtagをhtmlでペースト" onClick="pushBtn10()">ID:result1内のpタグをID:result2内のclass:mainに貼り付け<br> </form> </div> <div id="content1"> <div id="result1"> ID:result1 </div> <div class="main"> class:main </div> <p> tag:p </p> </div> <div id="content2"> <div id="result2"> ID:result2 </div> <div class="main"> class:もうひとつmain </div> <p> tag:もうひとつp </p> </div> <textarea rows="20"> </textarea> </body> <script type="text/javascript"><!-- //IDにアクセス(ID名の前に#を付けてアクセス) function pushBtn1(){ $("#result1").text("<strong>ID:result1を書き換え</strong>"); } function pushBtn2(){ $("#result2").html("<strong>ID:result2を書き換え</strong>"); } //classにアクセス(class名の前に.を付けてアクセス) function pushBtn3(){ $(".main").text("<strong>すべてのclass:mainを書き換え</strong>"); } function pushBtn4(){ $(".main").html("<strong>すべてのclass:mainを書き換え</strong>"); } //tagにアクセス(tag名だけでアクセス可能) function pushBtn5(){ $("p").text("<strong>すべてのpタグを書き換え</strong>"); } function pushBtn6(){ $("p").html("<strong>すべてのpタグを書き換え</strong>"); } //id内のclassやtagにアクセス function pushBtn7(){ $("#content1 .main").text("<strong>ID:result1内のclass:mainを書き換え</strong>"); } function pushBtn8(){ $("#content1 p").html("<strong>ID:result1内のpタグを書き換え</strong>"); } //ほかの要素の内容をコピー function pushBtn9(){ $("#content2 .main").text($("#content1 .main").text()); } function pushBtn10(){ $("#content2 .main").html($("#content1 p").html()); } // --></script> </html>
→[Z]ZAPAブロ～グ2.0に戻る