Jquery入門記事一覧
Jquery 入門 その1 要素にアクセスするJquery 入門 その2 要素にアクセスするメソッドJquery 入門 その3 メソッドチェーンJquery 入門 その4 プラグイン（$.fn.extend）の作り方Jquery 入門 その5 プラグイン（$.extend）のサンプルJquery 入門 その6 イベント処理Jquery 入門 その7 繰り返し処理Jquery 入門 その8 DOMツリーへのアクセスを意識するJquery 入門 その9 非同期通信で用いるデータJquery 入門 その10 非同期通信とはJquery 入門 その11 非同期通信のサンプル1Jquery 入門 その12 非同期通信のサンプル2Jquery 入門 その13 非同期通信のサンプル3 $.post,$.getJquery 入門 その14 非同期通信実践例(formをpostしphpで処理)サンプルのソースコードのダウンロード(下のURLをブラウザで入力してください。)
http://html5.web.fc2.com/jquery_new/jquery_new.zip
---------------------------------------------------------------------
記事「
その1 要素にアクセスする」では、以下のように、
指定した要素「$("#id_youso1")」に「.html(文字列)」という記述がされています。
$("#id_youso1").html("ここの記述が、id='youso1'の中に入ります");
この「.html(文字列)」は、
メソッドと呼ばれています。
※メソッドは関数のようなものと考えてください。この、html(文字列)メソッドは、指定した要素内のHTMLを変更するメソッドです。
前回の例では、
<div id='id_youso1'></div>
を、
<div id='id_youso1'>ここの記述が、id='youso1'の中に入ります</div>
に変更していたわけです。
このようなメソッドは、html以外にもいくつか用意されているので、
サンプルを作ってみました。
サンプルで挙げたメソッドは、以下の通りです。
html、text、prepend、append、before、after、wrap、remove、attr、removeAttr、addClass、removeClass、css
JavaScriptとHTMLと画面を見比べればわかると思います。
・htmlメソッド・js $("#id_youso1").html("id_youso1に値をセット");
$(".class_youso1").html($("#id_youso1").html()); //id_youso1のhtmlを取得して、class_youso1にセット
・html<h2>htmlメソッド</h2>
<div id='id_youso1'>htmlメソッドで要素の値をセット</div>
<div class='class_youso1'>htmlメソッドで取得したid_youso1の値を表示しています。</div>
・textメソッド・js $("#id_youso2").text("id_youso2に値をセット");
$(".class_youso2").text($("#id_youso2").text()); //id_youso2のtextを取得して、class_youso2にセット
・html<h2>textメソッド</h2>
<div id='id_youso2'>textメソッド</div>
<div class='class_youso2'>textメソッドで取得したid_youso2の値を表示しています。</div>
・prependメソッド・js //prependメソッド
$("#id_youso3").prepend("<strong>prependメソッド:</strong>"); //id_youso3の先頭にHTMLを追加
・html<h2>prependメソッド</h2>
<div id='id_youso3'>このメソッドは、指定した要素の先頭にHTMLを追加します。</div>
・appendメソッド・js $("#id_youso4").append("このメソッドは、指定した要素の最後にHTMLを追加します。"); //id_youso4の最後にHTMLを追加
・html<h2>appendメソッド</h2>
<div id='id_youso4'><strong>appendメソッド:</strong></div>
・beforeメソッド・js $("#id_youso5").before("<strong>beforeメソッド:</strong>"); //id_youso5の前にHTMLを追加
・html<h2>beforeメソッド</h2>
<div id='id_youso5'>このメソッドは、指定した要素の前にHTMLを追加します。</div>
・afterメソッド・js $("#id_youso6").after("このメソッドは、指定した要素の後ろにHTMLを追加します。"); //id_youso6の後ろにHTMLを追加
・html<h2>afterメソッド</h2>
<div id='id_youso6'><strong>afterメソッド:</strong></div>
・wrapメソッド・js $("span").wrap("<strong></strong>");
・html<h2>wrapメソッド</h2>
<span>wrapメソッドは、指定した要素を別の要素で包みます。
・removeメソッド・js $("#id_youso7 ul .del").remove();
・html<h2>removeメソッド</h2>
<div id='id_youso7'>
<ul>
<li>removeメソッドは、指定した要素を削除します。</li>
<li class='del'>この要素が削除されます</li>
<ul>
</div>
・attrメソッド・js $("#id_youso8").attr("style","color:blue;");
$(".class_youso8").append($("#id_youso8").attr("id")); //attrメソッドで取得したid_youso8のID名を表示しています。
・html<h2>attrメソッド</h2>
<div id='id_youso8' style='color:red;'>attrメソッドは、指定した要素の属性を変更します。</div>
<div class='class_youso8'>attrメソッドで取得したid_youso8のID名を表示しています。ID名:</div>
・removeAttrメソッド・js $("#id_youso9").removeAttr("style");
・html<h2>removeAttrメソッド</h2>
<div id='id_youso9' style='color:red;'>removeAttrメソッドは、指定した要素の属性を削除します。</div>
・addClassメソッド・js $("#id_youso10").addClass("bold");
・html<h2>addClassメソッド</h2>
<div id='id_youso10'>addClassメソッドは、指定した要素にclass属性を追加します。</div>
・removeClassメソッド・js $("#id_youso11").removeClass("bold");
・html<h2>removeClassメソッド</h2>
<div id='id_youso11' class='bold'>removeClassメソッドは、指定した要素からclass属性を削除します。</div>
・cssメソッド・js $("#id_youso12").css("background-color","#FFCCCC");
・html<h2>cssメソッド</h2>
<div id='id_youso12'>cssメソッドは、指定した要素のCSSを変更します。</div>
jQuery関連書籍
