2008-01-23 API/1.2/Manipulation DOM 操作 jQuery いろは DOM 操作 Changing Contents: Name Type html( ) Returns: String var htmlStr = jQuery(this).html(); 該当エレメントの値を子エレメントも含めて文字列で返す。 このプロパティは、xhtmlなら大丈夫だと思うが、xmlなら使えない? html( val ) Returns: jQuery 該当したすべてのエレメントの文字列を、 引数に置換(htmlタグは、エスケープしない) text( ) Returns: String (function($){ jQuery(function() { var title=jQuery("title").text(); jQuery("#title").html(title); }); })(jQuery);<br> … <div id="title"></div>タイトルタグの文字列を取得して、取得した値をid="title"にセットする。 タイトルエレメントが二つあっても、最初の値だけセット pエレメントが複数ある場合は、複数のエレメントの値だけセット 該当したすべてのエレメントの文字列を、全部ひっくるめて返す。 text( val ) Returns: jQuery jQuery("p").text("<b>Some</b> new text."); <b>Some</b> new text. 該当したすべてのエレメントの文字列を、 引数に置換(htmlタグは、エスケープする。たとえば、&-&) これは、うまく動いてくれないんだけど。(1.2.1) r has no properties(fire bug) 問題なく動作した:原因は、プラグインに同梱のjquery.jsを使用したために発生していた様子。 Inserting Inside:内側に挿入する。 Name Type append( content ) Returns: jQuery jQuery("p").append("<b>Hello</b>"); 該当したすべてのエレメント内側の最後に、引数を追加する appendTo( content ) Returns: jQuery 該当エレメントを、appendtoで指定したエレメントの内側の最後に追加する。 prepend( content ) Returns: jQuery jQuery("p").prepend("<b>Hello </b>"); 該当したすべてのエレメント内側の最初に、引数を追加する。 prependTo( content ) Returns: jQuery 該当エレメントを、appendtoで該当エレメントの内側最初に追加する。 Inserting Outside:該当エレメントの外側に、挿入する。 Name Type after( content ) Returns: jQuery 該当エレメントの終了タグ直後にcontentを挿入する。 before( content ) Returns: jQuery 該当エレメントの開始タグ直前にcontentを挿入する。 insertAfter( content ) Returns: jQuery 該当エレメントをainsertafter(content)で該当エレメントの終了タグの直後に挿入する。 insertBefore( content ) Returns: jQuery 該当エレメントをainsertbefore(content)で該当エレメントの開始タグの直前に挿入する。 Inserting Around: Name Type wrap( html ) Returns: jQuery 該当エレメントの外側に、エレメントを追加して包む wrap( elem )エレメントで包む Returns: jQuery jQuery("p").wrap("<div class='wrap'></div>"); wrapの引数に、開始タグと終了タグを指定して、そのタグで、該当したエレメントをそれぞれ包んでしまう。 wrapAll( html ) Returns: jQuery jQuery("p").wrapAll("<div></div>"); wrapの引数に、開始タグと終了タグを指定して、 そのタグで、該当したエレメントを十派一からげに包んでしまう。 wrapAll( elem ) Returns: jQuery jQuery("p").wrapAll(document.createElement("div")); … wrapInner( html ) Returns: jQuery jQuery("p").wrapInner("<b></b>"); 該当したエレメントの内側をwrapInnerの引数で指定し開始タグと終了タグで包む。 <p><b>該当したエレメントの内側をwrapInnerの引数で該当開始タグと終了タグで包む</b></p> jQuery("p").wrapInner is not a function と出て、エラーになる。(1.2.1) wrapInner( elem ) Returns: jQuery jQuery("p").wrapInner(document.createElement("b")); 該当したエレメントの内側をwrapInnerの引数で指定し開始タグと終了タグで包む。 <p><b>該当したエレメントの内側をwrapInnerの引数で該当開始タグと終了タグで包む</b></p> Replacing:置換 Name Type replaceWith( content ) Returns: jQuery jQuery(this).replaceWith("<div>" + $(this).text() + "</div>"); 該当したエレメントをそれぞれhtmlエレメントかDOM要にの置換 replaceAll( selector ) Returns: jQuery jQuery("<b>Paragraph. </b>").replacell("p"); 該当したエレメントをreplaceAllの引数セレクタで置換 Removing: Name Type empty( ) Returns: jQuery Remove all child nodes from the set of matched elemens. remove( expr) Returns: jQuery jQuery("p").empty();Removes all matched elements from the OM. 該当したエレメントを削除する Copying: Name Type clone( ) Returns: jQuery Clone matched DOM Elements and select the clones. clone( true ) Returns: jQuery Clone matched DOM Elements, and all their event handlers, and select the clones.