DOM操作 jQuery「unwrap」要素の親要素を削除する
.unwarp()は、.wap()の対になるメソッドで、条件にマッチした要素の親要素を削除します。例えば、「<div><p>xxxxxx</p></div>」に対して、「$('p').unwrap();」が実行された場合、p要素のdiv要素が取り除かれます。書式$( 対象要素 ).unwrap();$('p').wrap();サンプル「wrap」「unwarp」ボタンで、親要素(<figure>)...
すなりん
DOM操作 
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からは、引...
JavaScript JavaScript ドラッグ要素からドロップ要素にデータを渡す
ドラッグ先の要素からドロップ先の要素にデータを渡すには、「setData()」メソッドを使います。setData()メソッドの最初のパラメータにMIMEタイプ、２番目に渡したいデータを指定します。2番目のデータは、最初のパラメータに指定したMIMEタイプに対応したものになります。ドロップ先では、「getData()」メソッドのパラメータには、受け取りたいデータのMIMEタイプを指定します。標準テキ...
JavaScript JavaScript 要素をドラッグ＆ドロップできるようにする
doraggableプロパティにtrueを指定すれば要素をドラッグすることはできますが、ドロップ側の処理は、次のイベントに対して処理を行う必要があります。dragleaveイベントは省略しても動作します。イベント説明dragover要素がドロップ領域に重なった（必須）dragleave要素がドロップ領域から離れたdrop要素がドロップされた（必須）<head> <title>テストページ</tit...
JavaScript JavaScript 要素をドラッグできるようにする
div要素など、通常ドラッグできない要素をドラッグできるようにするには、要素のdoraggableプロパティにtrueを指定します。スクリプトではなく、HTML要素にdraggable属性を指定してもドラッグ可能になります。ただし、Firefoxに関しては、dragstartイベントが発生したら、setData()メソッドを使ってデータを設定する必要があります。draggableプロパティにfal...
JavaScript JavaScript WebSocketを使ってサーバーとデータをやり取りする
WebSocketを使ってサーバーとやり取りするには、メッセージ送信を使って行います。サーバーから接続された場合やデータが送信されると、クライアント側には「message」イベントが発生します。クライアント側では、WebSocketオブジェクトのonmessageプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使ってイベントリスナーを使って設定します。イベン...
JavaScript JavaScript WebSocketでサーバーに接続する
WebSocketでサーバーに接続するには、「new WebSocket()」として、パラメータに接続先のサーバーを指定します。このときには、「http://」ではなく、「ws://」を使います。データを暗号してセキュアな通信を行う場合は、「wss://」を指定します。また、「192.168.11.1:4649」のようにポート番号を指定することもできます。他にも「WebSocket()」の２番目の...
JavaScript JavaScript WebSocketが使用可能か調べる
JavaScriptでは、サーバーと通信する手段がいくつか用意されています。多く利用されているのが、非同期通信を使ったものです。これは、「XMLHttpRequest」オブジェクトを利用して通信を行います。ただし、チャットやゲームなどでリアルタイムにデータをやり取りする用途には向いていません。リアルタイムにサーバーとやり取りする方法として、WebSocketがあります。WebSocketは、その名...
JavaScript JavaScript 要素内の文字を編集可能にする
要素内の文字や画像を編集するには、要素の「contentEditable」プロパティに「true」を指定します。「true」を指定すると、その要素内にある文字や画像は編集可能になり、文字の追加や削除が可能になります。また、子要素や子孫要素も、親要素と同様に編集可能になります。また、スクリプトでcontentEditableプロパティを操作する方法以外に、要素にcontenteditable属性を指...
JavaScript JavaScript 異なるオリジンのインラインフレームにメッセージを送信する
インラインフレームにメッセージを送信するには、「postMessage()」メソッドを使います。postMessage()メソッドを使うと、異なるオリジン（プロトコル+ドメイン+ポート番号）に対してデータを送信することができます。postMessage()メソッドの最初のパラメータには、送信するデータを指定します。特に指定する必要がない場合は「"*"」とします。postMessage()メソッドで...
JavaScript JavaScript ブラウザのページ読み込みタイミングを取得する
読み込みタイミングを取得するには、「performance.navigation」オブジェクトの各種プロパティを参照します。プロパティには、その処理が行われた時点での時間を示すミリ秒が入ります。このミリ秒は、実行した時点での日時を示します。状況によっては、タイミングを正しく取得できない場合があります。この場合、ページ読み込み開始時間よりも以前の時間（ミリ秒）になります。プロパティ説明navigat...
JavaScript JavaScript 定期的に位置情報を取得・停止する
定期的に位置情報を取得するには、「watchPosition()」メソッドを使います。位置情報を取得するメソッドとしてはgetCurrentPosition()メソッドがありますが、状況によっては位置情報が取得できない場合があります（地下やトンネルなど）。このような場合は、watchPosition()メソッドの方が向いてます。ただし、watchPosition()メソッドは定期的に位置情報を取得...
JavaScript JavaScript 一度だけ位置情報を取得する
位置情報を一度だけ取得するには、Geolocation APIの「getCurrentPosition()」メソッドを使います。getCurrentPosition()メソッドの最初のパラメータには、位置情報の取得に成功した場合に呼び出される関数を指定します。２番目のパラメータには、位置情報が取得できなった場合、エラー時の処理を行う関数を指定します。2番目のパラメータは必須ではないため省略可能です...
JavaScript JavaScript 画像や映像ファイルを読み込む
画像ファイルや映像ファイルを読み込むには、「FileReader」オブジェクトの「readAsDataURL()」メソッドを使います。readAsDataURL()のパラメータに、選択されたファイルオブジェクトを指定します。画像ファイルや映像ファイルの読込が完了するとloadイベントが発生するので、FileReaderオブジェクトのonloadにイベントハンドラを設定し、読み込み完了時の処理を行い...
JavaScript JavaScript バイナリデータを読み込む
バイナリファイルを読み込むにはFileReaderオブジェクトの「readAsBinaryString()」メソッドを使う。readAsBinaryString()のパラメータに、選択されたファイルオブジェクトを指定します。バイナリファイルの読込が完了すると「load」イベントが発生するので、FileReaderオブジェクトのonloadにイベントハンドラを設定し、読み込み完了時の処理を行います。...
JavaScript JavaScript テキストファイルを読み込み
テキストファイルを読み込むには「readAsText()」メソッドを使う。テキストファイルを読み込むには、FileReaderオブジェクトのreadAsText()メソッドを使います。readAsText()のパラメータに選択されたファイルオブジェクトを指定します。「readAsText()」の２番目のパラメータは、テキストファイルの文字コードを指定します。自動的に文字コードを認識させる場合には、...
JavaScript JavaScript ファイル名や種類を取得する
ファイル情報を取得するには「name」プロパティや「size」プロパティ、「type」プロパティを使う。プロパティ説明nameファイル名（拡張子を含む）sizeファイルサイズ（バイト数）typeファイル形式（MIMEタイプ）<body><script> window.addEventListener("load" , function(){ var ele = document.getElemen...
JavaScript JavaScript リセット時・送信時に処理する
リセット時に処理するには「reset」イベント、送信時に処理するには「submit」イベントを捕捉する。リセットボタンがクリックされると、form要素でresetイベントが発生します。form要素のonresetプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使ってイベントハンドラを設定します。送信ボタンがクリックされると、form要素でsubmitイベント...
JavaScript JavaScript ページの読み込みやDOMの構築が完了した際に処理を行う
DOMの構築が完了した際に処理を行うには「DOMContentLoaded」イベントを検知します。DOMContentLoadedイベントは、ページの読みこみが完了したことを示す「load」イベントよりも先に発生します。「DOMContentLoaded」はページ上のDOMの使用が可能になったことを示すので、このイベントが発生した後であれば、スクリプトでDOM操作を行うことができます。<body>...
JavaScript JavaScript ドラッグ時に処理を行う
ドラッグ時に処理を行うには「dragstart」「drag」「sragend」イベントを捕捉します。要素では、「ondragstart」のように「on」を付けたプロパティにイベントハンドラを設定できます。また、addEventListener()メソッドを使ってイベントリスナーを使って設定することもできます。また、「addEventListener()」メソッドを使ってイベントリスナーを使って設定...
JavaScript JavaScript カット／コピー／ペーストされた際に処理を行う
カット・コピー・ペーストされた際に処理を行うには、copyイベントやpasteイベントを捕捉します。要素では、oncopyのように、「on」を付けたプロパティにイベントハンドラを設定できます。また、addEventListener()メソッドを使ってイベントリスナーで設定することもできます。イベント説明copyコピーしたときbeforecopyコピーする前cutカットしたときbeforecutカッ...
JavaScript JavaScript マウスの右ボタンが押された時に処理する
マウスの右ボタンが押されたときに処理するには、「contextmenu」イベントを捕捉します。イベントを割り当てる要素に対して、「oncontextmenu」プロパティにイベントハンドラを設定するか、addEventListener()メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため...
JavaScript JavaScript マウスダウン時／マウスアップ時の処理を行う
マウスのボタンが押されたときの処理を行うには、mousedownイベントを捕捉します。イベントを割り当てる要素に対して、onomousedownプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため、サンプルのよ...
JavaScript JavaScript マウスオーバー時／マウスアウト時の処理を行う
マウスオーバー時に処理を行うには、「mouseover」イベントを捕捉します。イベントを割り当てる要素に対して、「onmouseover」プロパティにイベントハンドラを設定するか「addEventListener()」メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため、サンプルのように...
JavaScript JavaScript フォーカスした際に処理を行う
ブラウザにはフォーカスを扱うメソッドがいくつか用意されています。特定のテキストフィールドにフォーカスを移す場合は、「focus()」メソッドを使います。テキストフィールドの場合、入力済みの文字を選択状態にしたいのであれば、「focus()」メソッドを続けて「select()」メソッドを呼び出します。テキストフィールドなどにフォーカスされると、「focus」イベントが発生します。逆にフォーカスが外れ...
JavaScript JavaScript マウスホイールの値を取得する
Firefox以外でマウスホイールの値を取得するには、「mousewheel」イベントを検知します。ホイールがどの程度、開店したのかは、イベントハンドラに渡されるイベントオブジェクトの「delta」プロパティに入ります。Firefoxでは、マウスホイールが回転すると、「DOMMouseScroll」イベントが発生します。ホィールの回転量は、イベントオブジェクトの「detail」プロパティに入ります...
JavaScript JavaScript 発生したイベントの種類を求める
発生したイベントの種類を求めるには、イベントオブジェクトの「type」プロパティを参照します。また、「target」プロパティにはイベントが発生した要素への参照が入っているため、要素名や要素そのおのを操作することもできます。なお、発生したイベントに応じて処理を振り分けることもできます。主なイベントイベント説明clickクリックdblclickダブルクリックmouseoverマウスオーバーmouse...
JavaScript JavaScript クリックした場所の座標を求める
イベントが発生すると、イベントオブジェクトの各プロパティに座標値が格納されます。求める座標の種類に応じてプロパティが用意されています。座標値はすべてピクセル値で返されます。プロパティ説明clientX要素のX座標clientY要素のY座標pageXページ上のX座標（スクロール量が加算される）pageYページ上のY座標（スクロール量が加算される）screenXモニタ画面上でのX座標screenYモニ...
JavaScript JavaScript 属性を新規作成・削除する
新規に属性を作成するには、「document.createAttribute()」メソッドを使います。パラメータには作成する属性名を文字列で指定します。「document.createAttribute()」は作成した属性をオブジェクトとして返します。属性に値を設定するにはnodevValueプロパティにアクセスします。属性を削除するには、対象となる要素の「removeAttribute()」メソ...
JavaScript JavaScript 属性値を取得・設定する
要素の属性値を取得する（読み出す）には、「getAttribute()」メソッドを使います。パラメータには取得したい属性名を指定します。属性に値を設定する場合は、「setAttribute()」メソッドを使います。最初のパラメータに属性名を文字列で指定し、2番目のパラメータに設定値を指定します。<body><script> window.addEventListener("load" , func...