JavaScript jQuery セレクタ クラス
「.」で始まるセレクタは、class属性で要素を抽出します。id属性では1つのid名を複数の要素に付与できませんが、class属性ではそれが可能となり、１つのクラス名を複数の要素にあてられます。書式$(' .クラス名 ')$('.header')サンプルクラスによる選択。サンプルではredクラスが付与された要素のみ、文字色を赤にするように記述しています。<body> <button>クリック</b...
jQuery
JavaScript 
JavaScript jQuery セレクタ id
「#」はid属性を指定するセレクタです。id属性は、ドキュメント内で必ず一意になるように定義されていなければなりません。つまり、このセレクタでは、選択される要素は必ず１つです。複数の要素に同じid名を付けることはできません。書式$('#id名')$('#content')サンプルid属性による選択。サンプルでは、id属性に「select」と設定したp要素だけ、クリックボタンをクリックすると赤い線で...
JavaScript jQuery セレクタ「*」全選択
DOMのすべての要素を選択します。全要素を調べるため、処理に時間がかかる場合があります。書式$('*')サンプルすべての要素を選択。サンプルでは、クリックボタンをクリックすると、セレクタで選択したbodyを含むすべての要素に赤い線が付与されます。<body> <button>クリック</button> <div> div <p>p</p> </div> <p>p</p> <span>span</s...
DOM操作 jQuery 「removeProp」プロパティを削除する
条件にマッチしたDOM要素について、.prop()で設定したプロパティを削除します。checked,disabled,selectedのような、要素がもともと持っているプロパティは.removeProp()で削除すべきではありません。いったん削除してしまうと、後から.prop()メソッドで追加することもできなくなります。これらのプロパティを扱うときは、.prop()メソッドでfalse値を設定しま...
DOM操作 jQuery「prop」プロパティを取得・設定する
条件にマッチしたDOM要素について、指定したプロパティの値を返します。ただし、複数のプロパティがマッチした場合は、そのうちの「最初の」プロパティだけが対象になります。マッチするすべての要素を対象にしたい場合は、.each()メソッドによるループを使います。jQuery1.6以前では、プロパティとアトリビュートの扱いが明確に区別されておらず混乱を招くことがありましたが、1.6以降は明確に区別されるよ...
DOM操作 jQuery 「val」フォーム要素に値を設定する
フォーム要素に値を設定します。複数選択可能なオプションリスト（select multiple）やチェックボックスの場合、値の配列を引数として渡して、特定の選択肢を選択状態に設定できます。jQuery1.4以降では、引数にクロージャを記述できます。クロージャは２つの引数、「インデックス」と「値」を取れます。インデックスは、条件にマッチした要素のうち、現在の要素の出現する順序、値は、現在の要素の値です...
DOM操作 jQuery「val」フォーム要素から値を取得する
.val()メソッドは、フォーム要素から値を取得します。複数選択可能なオプションリスト（select multiple）やチェックボックスの場合、.val()メソッドは選択されたすべての値を配列として返します。複数選択可能なオプションリスト（select multiple）やチェックボックスでなにも選択されていない場合、jQuery3以前ではnullが返されていましたが、jQuery3からは空の配...
DOM操作 jQuery 「text」要素にテキスト文字を設定する
条件にマッチしたすべての要素に、引数として与えた文字列を設定します。このメソッドはHTMLドキュメント、XMLドキュメント共に使用可能です。.html()メソッドと異なり、.text()メソッドでは、引数として与えた文字列がエスケープされます。例えば「<span>」は、「<span>」となります。なお、.text()はフォームのinput要素を設定することはできません。代わりに.val...
DOM操作 jQuery 「text」要素からテキスト文字列を取得する
条件にマッチした要素から、テキスト文字列を取得します。複数の要素にマッチした場合、すべての要素のテキスト文字列が連結した状態で返されます。.html()メソッドに似ていますが、このメソッドはHTMLドキュメントでだけでなく、XMLドキュメントに対しても有効です。なお、.text()はフォームのinput要素から値を取得することはできません。代わりに.val()メソッドを使います。書式$( 対象要素...
DOM操作 jQuery 「html」要素にHTML文字列を設定する
条件にマッチしたすべての要素に、引数として与えたHTML文字列を設定します。このメソッドはHTMLドキュメントでだけ有効です。XMLドキュメント上では使えません。jQuery1.4以降では、引数にクロージャを記述できますので、動的なHTML文字列の設定が可能になりました。書式$( 対象要素 ).html( HTML文字列 );$( 対象要素 ).html( function(){処理…} );$(...
DOM操作 jQuery 「html」要素からHTML文字列を取得する
条件にマッチした最初の要素に含まれるHTML文字列を取得します。このメソッドはHTMLドキュメントでだけ有効です。XMLドキュメント上では使えません。書式$( 対象要素 ).html();var htmlStr = $('div').html();サンプル指定した要素のHTML文字列を取得する<body><style> .sticky { background: #aaa; } .stickies...
DOM操作 jQuery 「wrapInner」要素それぞれの内側に親要素を追加する
.wrapInner()は、.wrap()と同様に、条件にマッチした要素を引数で指定した親要素でくるみます。ただし、.wrap()がマッチした要素自体に親要素を追加するのに対し、.wrapInner()はマッチした要素の中のコンテンツに対して親要素を追加します。書式$( 対象要素 ).wrapInner( 親要素 );$('p').wrapInner('<div></div>');サンプル付箋（....
DOM操作 jQuery 「wrapAll」要素をまとめて親要素を追加する
.wrapAll()は、.wrap()と同様に、条件にマッチした要素を引数で指定した親要素でくるみます。ただし、.wrap()がマッチした要素それぞれに親要素を追加するのに対し、.wrapAll()はマッチした要素すべてを1つの親要素でくるみます。書式$( 対象要素 ).wrapAll( 親要素 );$('p').wrapAll('<div></div>');サンプル付箋のdiv要素すべてをまとめ...
DOM操作 jQuery「unwrap」要素の親要素を削除する
.unwarp()は、.wap()の対になるメソッドで、条件にマッチした要素の親要素を削除します。例えば、「<div><p>xxxxxx</p></div>」に対して、「$('p').unwrap();」が実行された場合、p要素のdiv要素が取り除かれます。書式$( 対象要素 ).unwrap();$('p').wrap();サンプル「wrap」「unwarp」ボタンで、親要素(<figure>)...
DOM操作 jQuery 「wrap」要素それぞれに親要素を追加する
.wrap()は、.unwrap()の対になるメソッドです。条件にマッチした要素を、引数で指定した親要素でくるみます。例えば、「<p>xxxxxx</p>」に対して「$('p').wrap('<div></div>');」が実行された場合、p要素の親要素としてdivが挿入されます。jQuery1.4以降、引数にクロージャが定義できるようになり、親要素の動的な定義が可能になりました。書式$( 対象要...
DOM操作 jQuery 「replaceAll」対象要素をすべて置換する
.replaceAll()メソッドは、条件にマッチした対象要素を置換内容で置き換えます。同様のメソッドに.replaceWith()があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式の内容の指定が真逆になります。書式$( 置換内容 ).replaceAll( 対象要素 );$('<span>置き換えました</span>').replaceAll('.list');サンプルボタンク...
DOM操作 jQuery 「replaceWith」すべての対象要素を置換する
.replaceWith()メソッドは、条件にマッチした対象要素を置換内容で置き換えます。同様のメソッドに.replaceAll()があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4以降、引数にクロージャを定義して、置換内容を動的に生成できるようになりました。書式$( 対象要素 ).replaceWith( 置換内容 );$( 対象...
DOM操作 jQuery 「removeAttr」要素から指定したアトリビュートを削除する
.removeAttr()メソッドは、条件にマッチした要素から、指定したアトリビュートを削除します。書式$( 対象要素 ).removeAttr( アトリビュート名 );$('form input:text').removeAttr('disabled');サンプルボタンクリックで編集不可のテキストフィールドを編集可能にする<body> <style> .sticky { background: ...
DOM操作 jQuery 「attr」要素に対してアトリビュート値を設定する
DOM要素の指定したアトリビュートに対して、値をセットします。複数のアトリビュート値を一括して設定したい場合は、引数として「{要素名：値,要素名：値…}」の形式の配列を渡せます。jQuery1.1以降、クロージャからの戻り値によって、値を動的に設定することも可能です。書式.attr(アトリビュート名,値);.attr(配列);.attr(function(){処理…});$('#photo').a...
DOM操作 jQuery 「attr」要素の最初のアトリビュート値を取得する
条件にマッチしたDOM要素について、指定したアトリビュートの値を返します。ただし、複数の要素がマッチした場合は、そのうちの「最初の」要素だけが対象になります。マッチするすべての要素を対象にしたい場合は、.each()メソッドによるループを使います。書式.attr( アトリビュート名 );var imgsrc = $('img').attr('src');サンプル１、img要素からsrcアトリビュー...
DOM操作 jQuery 「empty」要素のすべての子ノードを削除する
条件にマッチした要素の階層下にある、すべての子ノードを削除します。要素の下にテキストやイベントハンドラが含まれる場合、これらも削除されます。.remove()に似ていますが、.empty()はマッチした要素そのものは削除せず、子ノードだけを削除します。一時的に要素内をクリアして、別のコンテンツで置き換えたい場合などに便利なメソッドです。書式$( 対象要素 ).empty();$('.content...
DOM操作 jQuery 「detach」要素を一時的に削除する
.detach()メソッドは.remove()メソッドと同様に条件にマッチした要素をDOMから削除しますが、remove()が要素に関連するイベントハンドラやデータも一緒に削除するだけなのに対して、.detach()は削除した要素を保存しておいて、後でまたDOMに追加できます。書式$( 対象要素 ).detach( セレクタ );var tmpElem = $('h1').detach();サンプ...
DOM操作 jQuery 「remove」要素を削除する
.remvoe()メソッドは、条件にマッチした要素を、関連するイベントハンドラなども含めて削除します。省略可能な引数には、セレクタを指定して削除対象を絞り込めます。書式$( 対象要素 ).remove();$('h3').remvoe();$('div').remvoe('.footer');サンプルボタンがクリックされたら先頭の付箋のdivを削除する<body> <style> .sticky ...
DOM操作 jQuery 「removeClass」要素からCSSクラス指定を削除する
.removeClass()メソッドは、条件にマッチした要素から、クラス指定を削除します。jQuery1.4以降、引数にクロージャを定義して、削除するクラス名を動的に生成できるようになりました。書式$( 対象要素 ).removeClass( クラス名 );$( 対象要素 ).removeClass( function() { 処理… } );$('p').removeClass('myClass...
DOM操作 jQuery 「hasClass」要素にクラスが指定されているか調べる
.hasClass()メソッドは、引数として与えられたCSSクラスが、条件にマッチした要素に指定されているかどうかを、trueまたはfalseで返します。書式$( 対象要素 ).hasClass( クラス名 );$('p').hasClass('myClass');サンプルクラスが指定されているか判定し、メッセージを切り替える<body> <style> .sticky { background:...
DOM操作 jQuery 「addClass」要素にクラス指定を追加する
条件にマッチしたDOM要素に対して、クラス指定を追加します。複数のクラス指定を追加する場合は、各クラス名をスペースで区切ります。jQuery1.4としてクロージャを指定できるようになりました。これにより、要素に指定するクラス名を動的に変化させられるようになります。書式$( 対象要素 ).addClass( クラス名 );$( 対象要素 ).addClass( クロージャ );$('p').addC...
DOM操作 jQuery 「insertBefore」要素、HTML、jQueryオブジェクトを要素の前に挿入する
条件にマッチした対象要素の直前にコンテンツを挿入します。引数としては、DOM要素、HTML文字列、jQueryオブジェクト、セレクタのいずれでも指定可能です。類似のメソッドに「.before()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容が真逆になります。書式$( 内容 ).insertBefore( 対象要素 );$('<p>ここから本文</p>').insert...
DOM操作 jQuery 「insertAfter」要素、HTML、jQueryオブジェクトを要素の後ろに挿入する
条件にマッチした対象要素の直後にコンテンツを挿入します。引数としては、DOM要素、HTML文字列、jQueryオブジェクト、セレクタのいずれでも指定可能です。類似のメソッドに「.after()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。書式$( 内容 ).insertAfter( 対象要素 );$('<p>ここから本文</p>').inser...
DOM操作 jQuery 「clone」要素を複製する
.clone()メソッドは、対象となる要素を複製します。「$('.header').append($('h3'));」とした場合、h3要素は.header要素の末尾に移動されます。h3要素をコピーして挿入したい場合は、「$('h3').clone().appendTo($('.header'));」のように、clone()メソッドで複製します。.clone()の引数には、複製にその要素に割り当てら...
DOM操作 jQuery 「before」要素の前に、要素、HTML、jQueryオブジェクトを挿入する
条件にマッチした対象要素の直前にコンテンツを挿入します。コンテンツは、DOM要素、HTML文字列、jQueryオブジェクトのいずれでも指定可能です。類似のメソッドに「.insertBefore()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4から、引数としてクロージャを指定できるようになりました。これにより、追加するコンテンツ...
DOM操作 jQuery 「after」要素の後ろに、要素、HTML、jQueryオブジェクトを挿入する
条件にマッチした対象要素の直後にコンテンツを挿入します。コンテンツは、DOM要素、HTML文字列、jQueryオブジェクトのいずれでも指定可能です。類似のメソッドに「.insertAfter()」があります。両者は基本的に同じメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4から、引数としてクロージャを指定できるようになりました。これにより、追加するコンテンツを動的に...
DOM操作 jQuery 「prependTo」要素、HTML、jQueryオブジェクトを要素の先頭に挿入する
内容と対象要素の検索式が入れ替わることを除けば、動作は、.prepend()メソッドと同様です。挿入する要素としてページ内に既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動されます。書式$( 内容 ).prependTo( 対象要素 );$('<p>ここから本文</p>').prependTo('.contents');$('h3').prependTo('.conte...
DOM操作 jQuery「prepend」要素内の先頭に、要素、HTML、jQueryオブジェクトを挿入する
.before()は要素の「前」にコンテンツを追加しますが、.prependは要素内の先頭にコンテンツを追加します例えば$('.header').before('<p>Hello</p>');では、結果が<p>Hello</p><div class="header">ヘッダ</div>$('.header').prepend('<p>Hello</p>');では<div class="header...
DOM操作 jQuery「appendTo() 」要素、HTML、jQueryオブジェクトを要素の末尾に挿入する
内容と対象要素の検索式が入れ替わることを除けば、動作は.append()メソッドと同様です。挿入する要素としてページ内の既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動します。書式$( 内容 ).appendTo( 対象要素 );例$('<p>ここから本文</p>').appendTo('.header');$($('3')).appendTo('.header');サ...
DOM操作 jQuery 「append」 要素内の最後に、要素、HTML、jQueryオブジェクトを挿入する
.after()は要素の「後」にコンテンツを追加しますが、.appendは要素内の最後にコンテンツを追加します。また、挿入する要素としてページ内に既存の要素を指定した場合、その要素は複製されるのではなく、指定した場所に移動されます。類似のメソッドに「.appendTo()」があります。両者は基本的に同じ目的のメソッドですが、対象要素の検索式と内容の指定が真逆になります。jQuery1.4からは、引...