JavaScript jQuery 「イベント」マウスの移動
mousemove()は、マウスカーソルの移動をトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素にでもmousemove()イベントハンドラを結び付けられます。引数無しの.mousemove()メソッドは、「trigger('mousemove')」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にmousemoveイベントを発生させます。ただし、実際に...
すなりん
JavaScript 
JavaScript jQuery 「イベント」ダブルクリック
「on('dbclick', インベストハンドラ)」は、マウスのダブルクリックをトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素でもdblclickイベントハンドラを結び付けられます。引数無しの.dblclick()メソッドは、「trigger('dblclick')」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にダブルクリックイベントを発生させます...
JavaScript jQuery 「イベント」マウスクリック
jQuery1.7で.on()メソッドが追加され、イベントとイベントハンドラを結び付ける処理はこの「.on()」を使うことが推奨されるようになりました。.on()の第1引数に「click」を指定することで、マウスのクリックをトリガーとしてイベントが起動します。クリックイベントは、厳密に言うと「マウスカーソルが対象要素の上にあり、ボタンが押され、離されたとき」に発生します。対象となるHTML要素には...
JavaScript jQuery 「イベント」イベントオブジェクトのメソッド群
イベントハンドラ内でe.preventDefault()メソッドがコールされた場合、イベントのデフォルトの動作はキャンセルされます。例えば、<a href=…>によるアンカータグをクリックしたとき、通常ならば指定されたURLにブラウザの画面は遷移します。e.preventDefault()は、この画面の遷移をキャンセルし、イベントハンドラの処理だけを実行したいときに便利です。isDefaultPr...
JavaScript jQuery 「走査系のメソッド」要素が条件にマッチするかチェックする
対象となる要素集合のうち、１つでもis()で与えた引数の条件にマッチした場合、trueを返します。マッチしなければfalseを返します。他の走査系メソッドとは異なり、is()はjQueryオブジェクトを返さず、trueまたはfalseを返します。対象となるjQueryオブジェクトに対しては一切の変更を加えませんので、jQueryオブジェクトはそのままで要素を調べたいときに有効なメソッドです。3番目...
JavaScript jQuery 「走査系のメソッド」前。次の要素を抽出する
選択された要素の、prev()は１つ前の要素を、next()は１つ後の要素を返します。書式.prev().next()$('p').prev()$('p').next()サンプル前後の要素を抽出して幅を変更する<html> <head> <meta charset="UTF-8"> <title>テストページ</title> <script src=" integrity="sha256-/JqT...
JavaScript jQuery 「走査系のメソッド」最初・最後の要素を抽出する
選択された要素集合から、first()は最初の要素を、last()は最後の要素を返します。書式.first().last()$('p').first()$('p').last()サンプル最初・最後の要素を抽出する<body> <div class="main"> <div class="header"> <h1> サンプル </h1> </div> <div class="content"> <p...
JavaScript jQuery 「走査系のメソッド」１つ前の状態のjQueryオブジェクトを結合する
以前は、.andSelf()メソッドが使われていましたが、jQuery1.8で非推奨化、3.0で廃止されました。代わりに、jQuery1.8で、.addBack()が追加されています。.addBack()は、.end()と同様に、メソッドチェーンで活用できるメソッドです。.addBack()が実行される直前の状態のjQueryオブジェクトと、さらに1つ前の状態のjQueryオブジェクトを、１つの要...
JavaScript jQuery 「走査系のメソッド」 1つ前の状態のjQueryオブジェクトを返す
走査系のメソッドの多くは、jQueryオブジェクトをもとに、別の要素集合として新たなjQueryオブジェクトを生成します。jQueryでは、これを利用してメソッドを延々とつなげていく「メソッドチェーン手法」が使えます。しかし、場合によってはチェーンの途中でそれより前に実行されたメソッドの効果を取り消して、処理以前の状態のjQueryオブジェクトを利用したいケースがあります。.end()メソッドは、...
JavaScript jQuery 「走査系のメソッド」 テキストノードも含めて、要素の子ノードを抽出する
条件にマッチした要素から、テキストノードを含むすべての子ノードを抽出して返します。.children()メソッドに似ていますが、.children()は、結果にテキストノードを含みません。iframeを使ったサイトでは、.contents()メソッドは特に便利です。iframeとメインページが同一のドメインに属していれば、.contents()メソッドは、メインページからiframeに表示している...
JavaScript jQuery 「走査系のメソッド」要素集合に要素を追加する
渡されたjQueryオブジェクトの要素集合に、引数から導かれる要素を追加し、新たなjQueryオブジェクトとして返します。引数はセレクタ、DOM要素、HTMLのいずれでも可能です。セレクタ、DOM要素を指定した場合、その条件がマッチする要素が、既存のjQueryオブジェクトに追加されます。このメソッドでは、要素はあくまでもjQueryオブジェクトに追加されるのであって、ドキュメントに追加されるわけ...
JavaScript jQuery 「走査系のメソッド」 最も近い「配置済み」の親要素を得る
マッチした要素の先祖から、「配置済み」つまりCSSのpositionプロパティがstatic以外（relative、absolute、fixed）の要素で最も近い位置にあるものを返します。アニメーションや要素の動的な配置を行うようなページで、便利なメソッドです。書式.offsetParent()$('p.myClass').offsetParent()サンプル特定の要素の先祖から配置済みの要素を探...
JavaScript jQuery 「走査系のメソッド」 条件にマッチする要素を子孫の階層から探索する
.find()は.children()と似たメソッドですが、.children()が直下の子要素だけを返すのに対し、.find()は子孫の階層すべてを対象として探索を行います。書式.find( セレクタ )$('li').find('li')サンプル要素の子孫から、特定のクラス指定を持つ要素だけ見つける<body> <div class="main"> <div class="header"> <...
JavaScript jQuery 「走査系のメソッド」 最も近くの条件にマッチする親要素を得る
1つ目の書式では、探索条件にマッチした起点となる要素から、最も近くにあり、かつセレクタの条件にマッチする要素をjQueryオブジェクトとして返します。.parents()と似ていますが、.parents()が探索を1つ上の親要素から開始するのに対し、.closest()はマッチした要素自身から開始します。よって、セレクタの条件によっては、.closest()はマッチした要素自身を返す場合があります...
JavaScript jQuery 「走査系のメソッド」 要素の前・後の兄弟要素を範囲を限定して抽出する
.prevall()や.nextAll()と同様に、与えられたjQueryオブジェクトの要素に対し、.prevUntil()は前、.nextUntil()は後ろの兄弟要素を取得します。ただし、異なるのは探索の停止条件をセレクタと指定できることです。結果に含まれるのは、探索停止条件のセレクタにマッチした要素の直前までです。停止条件にマッチした要素そのものは、結果に含まれません。停止条件のセレクタが省...
JavaScript jQuery 「走査系のメソッド」 要素の前・後の兄弟要素をすべて抽出する
与えられたjQueryオブジェクトの要素に対し、.prevAll()は前、.nextAll()は後ろの兄弟要素をすべて取得します。引数としてセレクタを指定すれば、結果をさらに絞り込めます。書式.prevAll().nextAll()$('li.three').prevAll()$('li.three').nextAll()サンプル前・後のすべての兄弟要素の背景色を設定する <body> <div ...
jQuery jQuery 「走査系のメソッド」 条件にマッチした要素の親要素を、範囲を限定して抽出する
.parent()と同様に、要素の親要素を先祖代々さかのぼって抽出しますが、.parentsUntil()では抽出を止める条件をセレクタを使って指定できます。セレクタを指定しない、もしくは指定したセレクタの条件が一切の要素にマッチしない場合、html要素までさかのぼってすべての親要素が返されます。書式.parentsUntil()$('li').parentsUntil()$('p').paren...
JavaScript jQuery 「走査系のメソッド」 条件にマッチした要素の親要素を抽出する
要素の集合から、条件にマッチした要素の親要素を抽出します。引数に何も指定しなければ、すべての親要素を抽出します。引数にセレクタを記述すれば、条件に応じてフィルタされた親要素の集合が取得できます。.parent()と.parents()は非常に似たメソッドですが、.parent()が直接の親要素だけを返すのに対して、.parents()は階層をさかのぼって先祖となる要素をすべて返します。.paren...
jQuery jQuery 「走査系のメソッド」 条件にマッチした要素の兄弟要素を抽出する
要素の集合から、条件にマッチした要素の兄弟要素を抽出します。引数に何も指定しなければ、すべての兄弟要素、引数にセレクタを記述すれば、条件に応じてフィルタされた兄弟要素の集合が取得できます。なお、結果として得られる要素集合には、探索条件にマッチした要素そのものは含まれません。返されるのは兄弟だけで「本人」は除かれます。書式.siblings()$('li.myclass').siblings()$(...
JavaScript jQuery 「走査系のメソッド」 要素集合から子要素を抽出する
要素の集合から、条件にマッチした要素の子要素を抽出します。引数に何も指定しなければすべての子要素、引数にセレクタを記述すれば条件に応じてフィルタされた子要素の集合が取得できます。なお、結果として得られる要素集合には、探索条件にマッチした要素そのものは含まれません。返されるのは子だけで「本人」は除かれます。書式.children()$('ul').children()$('ul').children...
JavaScript jQuery 「走査系のメソッド」 条件にマッチする要素を抽出する
jQueryオブジェクトの持つ要素集合から、条件にマッチする要素だけを抽出し、新たなjQueryオブジェクトとして返します。条件はセレクタで指定することも、クロージャで指定することもできます。クロージャは各要素をテストするので、条件に応じてtrueまたはfalseを返すように記述します。trueを返した場合は抽出後のjQueryオブジェクトに含まれ、falseを返した場合は除かれます。書式.fil...
JavaScript jQuery 「走査系のメソッド」 インデックス値の範囲で要素を抽出する
要素集合から、0で始まるインデックス値の範囲を指定して要素を抽出し、新たなjQueryオブジェクトを生成します。第２引数の終了インデックスは省略可能で、その場合は開始インデックスで指定した要素から最後の要素までが抽出されます。終了インデックスが指定された場合、抽出されるのは終了インデックスで指定した要素の直前の要素までになります。終了インデックスにマッチする要素は含まれません。インデックス値には負...
JavaScript jQuery 「走査系のメソッド」 各要素を関数に通して処理する
要素集合として渡されるjQueryオブジェクトを走査し、各要素が持つ様々な値を抽出して新たなjQueryオブジェクトを生成する。コールバック関数内では、現在の要素をJavaScriptのオブジェクト「this」や、jQueryオブジェクトではなく、配列やJavaScriptのオブジェクトに対して同様の処理を行う場合は$.map()メソッドを使用してください。$.map()メソッドは、jQuery1...
JavaScript jQuery 「走査系のメソッド」 条件にマッチする子ノードを持つ要素の集合を得る
要素集合として渡されたjQueryオブジェクトから、条件にマッチする子ノードを持つ要素を抽出し、新たなjQueryオブジェクトを生成して返します。書式.has( セレクタ )$('ul').has('li')サンプル子に.notdirectクラスの要素を持つli>div要素だけを抽出する<body> <div class="main"> <div class="header"> <h1> サンプル...
JavaScript jQuery 「走査系のメソッド」 要素の集合から条件にマッチした要素を削除する
要素集合として渡されたjQueryオブジェクトから、条件に合致した要素を除外して新しい要素集合を生成します。条件として渡す引数は、セレクタでもDOM要素でも可です。jQuery1.4では、引数にクロージャが使えるようになりました。クロージャはjQueryオブジェクト内の各要素を順に検査し、動的に除外すべき要素を決定できます。なお、クロージャでは、現在検査中の要素を「$(this)」として参照できま...
JavaScript jQuery 「走査系のメソッド」 要素をインデックス値で特定する
要素の集合から、指定したインデックス値に合致するもの以外を除去し、単一の要素を特定します。インデックス値は、要素の集合に対して出現順に0から順に割り振られる整数値です。インデックス値には、「-」を付けた負の値を指定することもできます。この場合、インデックス値は出現順の逆順、つまりドキュメントの下から数えた値で判断されます。インデックス値は0から始まるので、0またはプラスの値を指定した場合は0を起点...
JavaScript jQuery セレクタ 拡張セレクタ
jQueryにはCSSには存在しない独自のセレクタがあります。「:animated」はjQueryの拡張機能であり、アニメーションが実行中の要素を取得するセレクタです。拡張セレクタの使用は簡潔にプログラミングすることにも繋がります。書式$(':animated')$('div:animated')サンプル拡張セレクタの利用。サンプルでは、3つ並んでいる長方形(div要素)のうち、真ん中のひとつが....
JavaScript jQuery セレクタ 属性のセレクタ
さまざまな方法で要素の属性値を調べ、マッチする要素を見つけてくれ るのが、これらのセレクタ群です。 まず、最も単純な属性名だけのセレク タ 「$('')」 は、与えられた属性名の属性を持つ要素すべてが マッチします。 例えば、 aタグであれば hrefや targetが属性となりマッチ します。 値がどうであろうと、 要素にその属性さえ指定されていれば抽出 されます。「$('')」 「$('')」...
JavaScript jQuery セレクタ フォームのセレクタ
jQueryでは、フォーム要素に対しても、様々なセレクタが用意されています。:inputは、フォーム内のすべてのコントロールにマッチします。:inputは、フォーム内のすべてのコントロールにマッチします。「input type="text"」や「input type="checkbox"」といった、タグに「input」を含む要素だけでなく、select、textareaにもマッチします。:text...
JavaScript jQuery セレクタ 可視条件のセレクタ
これらは、要素の表示状態を利用して抽出条件とするセレクタです。:hiddenはページ上で隠された要素にマッチします。隠されたと判断される条件は、次のようにいくつかあります。display:noneが指定されている要素input type="hidden"のフォーム要素widthやheightが0に設定されている要素親要素、より上階層の要素が隠されているため表示されていない要素ただし、スタイル「vi...
JavaScript jQuery セレクタ 階層のセレクタ
これらは、DOMの階層構造を利用して抽出条件とするセレクタです。「＞」を使って表現する「$('親>子')」のセレクタでは、「親」で指定した要素の中にある子要素を選択します。つまり、直接の親子関係が指定した条件に合致する要素だけマッチします。「スペース」を使って表現する「$('先祖 子孫')」のセレクタは、両者が直接親子関係になくても、階層的に先祖と子孫の関係にあればまっちします。つまり、祖父、曾祖...
JavaScript jQuery セレクタ 子ノードのセレクタ
これらの、「子ノード」に着目して抽出条件とするセレクタです。:first-childと:last-childは、それぞれ:firstと:lastに似ていますが、:first及び:lastが選択された要素そのものにマッチするのに対し、選択された要素の子ノードを対象にする点が異なります。また、:firstが必ず１つの要素だけにマッチするのに対し、:first-childは元なるセレクタにマッチする要素...
JavaScript jQuery コンテンツの内容によるセレクタ
contains()、empty、has()、parentは、要素に含まれる内容によって、マッチする要素を抽出します。:contains()は、与えた引数の文字列を含む要素だけがマッチします。:has()は、与えたセレクタにマッチする要素を子ノードとして持つ要素だけがマッチします。:emptyと:parentは正反対の意味になります。:emptyは、子ノードを持たない空の要素だけがマッチします。:...
JavaScript jQuery セレクタ インデックスによるセレクタ
要素には、出現順に0あｋら始まる番号が「インデックス」として割り振られます。:eq、:lt、:gt、:odd、:evenは、インデックスの値に応じて抽出条件を指定するセレクタです。これらのセレクタでは、元になる選択条件に加え、与えたインデックス番号によって結果が抽出されます。:eqは「equel」つまりイコールの意味で、与えたインデックス値に合致する要素を選択します。インデックス値は0から始まりま...
JavaScript jQuery セレクタ 複数のセレクタをまとめて使う
指定したセレクタそれぞれにマッチした要素の集合が、1つのjQueryオブジェクトとして返されます。ただし、要素の順番は特に決まっていませんので、ドキュメント内の出現順や指定したセレクタの順に返されることを期待して処理を書かないようにしなければなりません。書式$(' セレクタ1,セレクタ2,セレクタ3,・・・ ')$('div, p, .myClass, #myId')サンプル複数のセレクタ<hea...
JavaScript jQuery セレクタ 要素
HTMLタグから<>を除いたものが、要素セレクタです。ドキュメントの中で該当するタグで記述されたすべての要素にマッチします。書式$(' 要素名 ')$('div')$('p')$('body')サンプル要素セレクタ。サンプルではセレクタにspanタグを設定し、文字色を変更しています。<head> <meta charset="UTF-8"> <title>テストページ</title> <scrip...
JavaScript jQuery セレクタ クラス
「.」で始まるセレクタは、class属性で要素を抽出します。id属性では1つのid名を複数の要素に付与できませんが、class属性ではそれが可能となり、１つのクラス名を複数の要素にあてられます。書式$(' .クラス名 ')$('.header')サンプルクラスによる選択。サンプルではredクラスが付与された要素のみ、文字色を赤にするように記述しています。<body> <button>クリック</b...
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>)...