jQuery

JavaScript

jQuery 「イベント」一度だけ呼び出したいイベントハンドラを割り当てる

.on()で追加されるイベントハンドラはイベントが発生すれば何度でも実行されますが、.one()メソッドでは一度だけ実行して以後は実行されないイベントハンドラを登録できます。書式$(対象要素).one('イベントタイプ',,,)$("table").one("click dblclick","td",{msg: 'message'}, function(e){ ・ ・});サンプル1度だけ発火する...
JavaScript

jQuery 「イベント」イベントを発火する

.trigger()は、イベントを発火して.on()メソッドで割り当てられたイベントハンドラを実行します。.triggerHandler()も同様にイベントを発火してイベントハンドラを実行しますが、trigger()がそのイベントによってブラウザの既定の動作が発生するのに対して、triggerHander()ではイベントハンドラが実行されるだけでブラウザの既定の動作は起きないという点が異なります。...
JavaScript

jQuery 「イベント」イベントハンドラを解除する

イベントとイベントハンドラの割り当てを解除します。引数を指定しなければ、全イベントに対するすべてのイベントハンドラを解除します。イベントタイプだけ指定した場合は、そのイベントに対するすべてのイベントハンドラを解除します。書式$(対象要素).off(イベントタイプ, ,)$(対象要素).off(イベントタイプ, )$(対象要素).off(イベントタイプ)$(対象要素).off()$('table')...
JavaScript

jQuery 「イベント」イベントにイベントハンドラを割り当てる

イベントに対し、イベントハンドラを割り当てます。従来の.live()、.delegate()、.bind()の機能は.on()に統合されましたので、廃止はたは非推奨になっています。これから開発するスクリプトでは.on()を使います。最初の書式では、1つまたは複数のイベントに対して、1つのイベントハンドラを割り当てます。複数のイベントを指定する場合は$('table').on('click dbcl...
JavaScript

jQuery 「イベント」スクロールを検出する

このイベントは、ブラウザ上のスクロールで発生します。window要素だけでなく、フレームやCSSでoverflow:scrollもしくはoverflow:autoが設定された要素も対象になります。書式$(対象要素).on('scroll', イベントハンドラ)$(対象要素).trigger('scroll')$(対象要素).scroll()$('form').scroll(function(e){...
JavaScript

jQuery 「イベント」ブラウザウィンドウのリサイズを検出する

ブラウザウィンドウのサイズを変更すると発生するイベントで、対象はWindow要素だけです。このメソッドは、ブラウザによって動作が異なる場合があります。InternetExplorerやSafari、Google Chrome等では、リサイジョンによって完全にリサイズが完了したときに1度だけイベントが発生する場合があります。trigger('resize')、引数無しのresize()では、リサイズ...
JavaScript

jQuery 「イベント」フォーム送信のイベント

フォームの送信時に発生します。引数なしのsubmit()メソッドとtrigger('submit')は、フォームの送信をスクリプトから実行します。書式$(対象要素).on('submit', イベントハンドラ)$(対象要素).trigger('submit')$(対象要素).submit()$('form').submit(function(e){ alert('submit');});$('fo...
JavaScript

jQuery 「イベント」テキストの選択

input type="text"とtextareaに限定のイベントです。このイベントは、要素中のテキストが選択されたとき、または選択範囲を変更したときに発生します。返されるイベントオブジェクト(e)からは、e.target.selectionStart:選択範囲の開始位置e.target.selectionEnd:選択範囲の終了位置e.target.selectionDirection:選択の方...
JavaScript

jQuery 「イベント」フォーム要素の変更時イベント

input、textarea、selectの各要素に対し、値の変更が起きたときに発生するイベントです。厳密には、イベント発生のタイミングは要素の種類によって異なります。select要素だけ、マウスで選択を行ったと同時にイベントが発生しますが、他の要素ではフォーカスを失った時点でイベントが発生します。引数無しの.change()メソッドは、スクリプトからchange()イベントを強制的に発生させます...
JavaScript

jQuery 「イベント」キーを押す・離す

keydown()とkeypress()は、共にキーの押下で発生するイベントです。両者が異なる点は、keydown()がe.whichの情報として「キーコード」を取得するのに対し、keypress()が入力された文字の「文字コード」を取得することです。たとえば、Aキーを押した場合、keydown()はキーコード「65」を返しますが、keypress()は文字コード「97」を返します。大文字の'A'...
JavaScript

jQuery 「イベント」フォーカスの移動

.focus()及び、.focusin()イベントハンドラは、要素にフォーカスが移ったときにコールされます。同様に、.blur()及び.focusout()イベントハンドラは、要素からフォーカスが外れたときにコールされます。これらのイベントは、キー操作でもマウス操作でも発生します。.focus()と.focusin()の違い、.blur()と.focusout()の違いは、イベントバブリングに関連...
JavaScript

jQuery 「イベント」マウスカーソルの出入りに応じ、それぞれの処理を実行する

.hover()メソッドは、.mouseenter()と.mouseleave()を1つの書式にまとめたものです。.on()メソッドで「.on('hover'…)」と記述することはできませんので、hoverをonで書きたい時はmouseenterとmouseleaveを使います。書式$(対象要素).hover(function(e){入る処理},function(e){出る処理})$(対象要素)....
JavaScript

jQuery 「イベント」マウスカーソルの要素への出入り

mouseover()とmouseenter()イベントは、要素にマウスカーソルが入った時に発生します。同様に、マウスカーソルが要素から出たとき、mouseout()、mouseleave()イベントが発生します。mouseout()とmouseleave()、mouseout()とmouseleave()の違いは、ともに要素の関係とイベントバブリングに関するものです。それぞれの前者は要素同士の親...
JavaScript

jQuery 「イベント」マウスボタンを押す・離す

mousedown()は、マウスボタンを押すとイベントが発生します。押されたボタンに応じて、左なら1、中央は2、右は3が、e.whichプロパティに返されます。反対に、mouseup()を使うと、ドラッグ&ドロップやコンテクストメニューのような、高度な処理も記述できます。対象となるHTML要素には制限はなく、どの要素にも、イベントハンドラを結び付けられます。引数無しの.mousedown()、.m...
JavaScript

jQuery 「イベント」マウスの移動

mousemove()は、マウスカーソルの移動をトリガーとしてイベントが起動します。対象となるHTML要素には制限はなく、どの要素にでもmousemove()イベントハンドラを結び付けられます。引数無しの.mousemove()メソッドは、「trigger('mousemove')」の短縮形です。こちらは、ユーザーの操作にかかわらず、強制的にmousemoveイベントを発生させます。ただし、実際に...
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 「走査系のメソッド」要素が条件にマッチするかチェックする

対象となる要素集合のうち、1つでもis()で与えた引数の条件にマッチした場合、trueを返します。マッチしなければfalseを返します。他の走査系メソッドとは異なり、is()はjQueryオブジェクトを返さず、trueまたはfalseを返します。対象となるjQueryオブジェクトに対しては一切の変更を加えませんので、jQueryオブジェクトはそのままで要素を調べたいときに有効なメソッドです。3番目...
JavaScript

jQuery 「走査系のメソッド」前。次の要素を抽出する

選択された要素の、prev()は1つ前の要素を、next()は1つ後の要素を返します。書式.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 「走査系のメソッド」1つ前の状態のjQueryオブジェクトを結合する

以前は、.andSelf()メソッドが使われていましたが、jQuery1.8で非推奨化、3.0で廃止されました。代わりに、jQuery1.8で、.addBack()が追加されています。.addBack()は、.end()と同様に、メソッドチェーンで活用できるメソッドです。.addBack()が実行される直前の状態のjQueryオブジェクトと、さらに1つ前の状態のjQueryオブジェクトを、1つの要...
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オブジェクトを生成します。第2引数の終了インデックスは省略可能で、その場合は開始インデックスで指定した要素から最後の要素までが抽出されます。終了インデックスが指定された場合、抽出されるのは終了インデックスで指定した要素の直前の要素までになります。終了インデックスにマッチする要素は含まれません。インデックス値には負...
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が必ず1つの要素だけにマッチするのに対し、:first-childは元なるセレクタにマッチする要素...
JavaScript

jQuery コンテンツの内容によるセレクタ

contains()、empty、has()、parentは、要素に含まれる内容によって、マッチする要素を抽出します。:contains()は、与えた引数の文字列を含む要素だけがマッチします。:has()は、与えたセレクタにマッチする要素を子ノードとして持つ要素だけがマッチします。:emptyと:parentは正反対の意味になります。:emptyは、子ノードを持たない空の要素だけがマッチします。:...
JavaScript

jQuery セレクタ インデックスによるセレクタ

要素には、出現順に0あkら始まる番号が「インデックス」として割り振られます。: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...