すなりんのシステム開発道具箱

条件にマッチしたすべての要素に、引数として与えたHTML文字列を設定します。このメソッドはHTMLドキュメントでだけ有効です。XMLドキュメント上では使えません。jQuery1.4以降では、引数にクロージャを記述できますので、動的なHTML文字列の設定が可能になりました。書式$( 対象要素 ).html( HTML文字列 );$( 対象要素 ).html( function(){処理…} );$(...

条件にマッチした最初の要素に含まれるHTML文字列を取得します。このメソッドはHTMLドキュメントでだけ有効です。XMLドキュメント上では使えません。書式$( 対象要素 ).html();var htmlStr = $('div').html();サンプル指定した要素のHTML文字列を取得する<body><style> .sticky { background: #aaa; } ....

.wrapInner()は、.wrap()と同様に、条件にマッチした要素を引数で指定した親要素でくるみます。ただし、.wrap()がマッチした要素自体に親要素を追加するのに対し、.wrapInner()はマッチした要素の中のコンテンツに対して親要素を追加します。書式$( 対象要素 ).wrapInner( 親要素 );$('p').wrapInner('<div></div...

.wrapAll()は、.wrap()と同様に、条件にマッチした要素を引数で指定した親要素でくるみます。ただし、.wrap()がマッチした要素それぞれに親要素を追加するのに対し、.wrapAll()はマッチした要素すべてを1つの親要素でくるみます。書式$( 対象要素 ).wrapAll( 親要素 );$('p').wrapAll('<div></div>');サンプ...

.unwarp()は、.wap()の対になるメソッドで、条件にマッチした要素の親要素を削除します。例えば、「<div><p>xxxxxx</p></div>」に対して、「$('p').unwrap();」が実行された場合、p要素のdiv要素が取り除かれます。書式$( 対象要素 ).unwrap();$('p').wrap();サンプル「wrap」「unwarp」ボタンで、親要素(<...

.wrap()は、.unwrap()の対になるメソッドです。条件にマッチした要素を、引数で指定した親要素でくるみます。例えば、「<p>xxxxxx</p>」に対して「$('p').wrap('<div></div>');」が実行された場合、p要素の親要素としてdivが挿入されます。jQuery1.4以降、引数にクロージャが定義できるようになり、親要素の動的な定義が可能になりました。書式$( 対象要...

.replaceAll()メソッドは、条件にマッチした対象要素を置換内容で置き換えます。同様のメソッドに.replaceWith()があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式の内容の指定が真逆になります。書式$( 置換内容 ).replaceAll( 対象要素 );$('<span>置き換えました</span>').replaceAll('.lis...

.replaceWith()メソッドは、条件にマッチした対象要素を置換内容で置き換えます。同様のメソッドに.replaceAll()があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4以降、引数にクロージャを定義して、置換内容を動的に生成できるようになりました。書式$( 対象要素 ).replaceWith( 置換内容 );$( 対象...

.removeAttr()メソッドは、条件にマッチした要素から、指定したアトリビュートを削除します。書式$( 対象要素 ).removeAttr( アトリビュート名 );$('form input:text').removeAttr('disabled');サンプルボタンクリックで編集不可のテキストフィールドを編集可能にする<body> <style> .stick...

DOM要素の指定したアトリビュートに対して、値をセットします。複数のアトリビュート値を一括して設定したい場合は、引数として「{要素名：値,要素名：値…}」の形式の配列を渡せます。jQuery1.1以降、クロージャからの戻り値によって、値を動的に設定することも可能です。書式.attr(アトリビュート名,値);.attr(配列);.attr(function(){処理…});$('#photo...

条件にマッチしたDOM要素について、指定したアトリビュートの値を返します。ただし、複数の要素がマッチした場合は、そのうちの「最初の」要素だけが対象になります。マッチするすべての要素を対象にしたい場合は、.each()メソッドによるループを使います。書式.attr( アトリビュート名 );var imgsrc = $('img').attr('src');サンプル１、...

条件にマッチした要素の階層下にある、すべての子ノードを削除します。要素の下にテキストやイベントハンドラが含まれる場合、これらも削除されます。.remove()に似ていますが、.empty()はマッチした要素そのものは削除せず、子ノードだけを削除します。一時的に要素内をクリアして、別のコンテンツで置き換えたい場合などに便利なメソッドです。書式$( 対象要素 ).empty();$('.con...

.detach()メソッドは.remove()メソッドと同様に条件にマッチした要素をDOMから削除しますが、remove()が要素に関連するイベントハンドラやデータも一緒に削除するだけなのに対して、.detach()は削除した要素を保存しておいて、後でまたDOMに追加できます。書式$( 対象要素 ).detach( セレクタ );var tmpElem = $('h1').deta...

.remvoe()メソッドは、条件にマッチした要素を、関連するイベントハンドラなども含めて削除します。省略可能な引数には、セレクタを指定して削除対象を絞り込めます。書式$( 対象要素 ).remove();$('h3').remvoe();$('div').remvoe('.footer');サンプルボタンがクリックされたら先頭の付箋のdivを削除す...

.removeClass()メソッドは、条件にマッチした要素から、クラス指定を削除します。jQuery1.4以降、引数にクロージャを定義して、削除するクラス名を動的に生成できるようになりました。書式$( 対象要素 ).removeClass( クラス名 );$( 対象要素 ).removeClass( function() { 処理… } );$('p').removeClass(...

.hasClass()メソッドは、引数として与えられたCSSクラスが、条件にマッチした要素に指定されているかどうかを、trueまたはfalseで返します。書式$( 対象要素 ).hasClass( クラス名 );$('p').hasClass('myClass');サンプルクラスが指定されているか判定し、メッセージを切り替える<body> <style> .stic...

条件にマッチしたDOM要素に対して、クラス指定を追加します。複数のクラス指定を追加する場合は、各クラス名をスペースで区切ります。jQuery1.4としてクロージャを指定できるようになりました。これにより、要素に指定するクラス名を動的に変化させられるようになります。書式$( 対象要素 ).addClass( クラス名 );$( 対象要素 ).addClass( クロージャ );$('p&#3...

条件にマッチした対象要素の直前にコンテンツを挿入します。引数としては、DOM要素、HTML文字列、jQueryオブジェクト、セレクタのいずれでも指定可能です。類似のメソッドに「.before()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容が真逆になります。書式$( 内容 ).insertBefore( 対象要素 );$('<p>ここから本文</p>'...

条件にマッチした対象要素の直後にコンテンツを挿入します。引数としては、DOM要素、HTML文字列、jQueryオブジェクト、セレクタのいずれでも指定可能です。類似のメソッドに「.after()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。書式$( 内容 ).insertAfter( 対象要素 );$('<p>ここから本文</p>&#39...

.clone()メソッドは、対象となる要素を複製します。「$('.header').append($('h3'));」とした場合、h3要素は.header要素の末尾に移動されます。h3要素をコピーして挿入したい場合は、「$('h3').clone().appendTo($('.header'));」のように、clone()メソッドで複製します。.clone()の引数には、複製にその要素に割り当てら...

条件にマッチした対象要素の直前にコンテンツを挿入します。コンテンツは、DOM要素、HTML文字列、jQueryオブジェクトのいずれでも指定可能です。類似のメソッドに「.insertBefore()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4から、引数としてクロージャを指定できるようになりました。これにより、追加するコンテンツ...

条件にマッチした対象要素の直後にコンテンツを挿入します。コンテンツは、DOM要素、HTML文字列、jQueryオブジェクトのいずれでも指定可能です。類似のメソッドに「.insertAfter()」があります。両者は基本的に同じメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4から、引数としてクロージャを指定できるようになりました。これにより、追加するコンテンツを動的に...

内容と対象要素の検索式が入れ替わることを除けば、動作は、.prepend()メソッドと同様です。挿入する要素としてページ内に既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動されます。書式$( 内容 ).prependTo( 対象要素 );$('<p>ここから本文</p>').prependTo('.contents');$('h3...

.before()は要素の「前」にコンテンツを追加しますが、.prependは要素内の先頭にコンテンツを追加します例えば$('.header').before('<p>Hello</p>');では、結果が<p>Hello</p><div class="header">ヘッダ</div>$('.header').prepend('<p>Hell...

内容と対象要素の検索式が入れ替わることを除けば、動作は.append()メソッドと同様です。挿入する要素としてページ内の既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動します。書式$( 内容 ).appendTo( 対象要素 );例$('<p>ここから本文</p>').appendTo('.header');$($('3'...

.after()は要素の「後」にコンテンツを追加しますが、.appendは要素内の最後にコンテンツを追加します。また、挿入する要素としてページ内に既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動されます。類似のメソッドに「.appendTo()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4からは、引...