jQuery超入門
jQueryとは
ダウンロード：jQueryオフィシャルサイト
jQueryの機能、何ができる？
要素（Element：エレメント）とは
この一式のことです。開始タグと終了タグとその間の内容で構成される一式です。上記は p要素 となります。要素はDOMにおいてノード（Node）に含まれ、要素ノード（エレメントノード）として扱われます。
タグ（Tag）とは
</p>
<strong>
</strong>
など、「 < 」記号 と 「 > 」記号で作られるものです。開始タグと終了タグの2種類あります。
属性（attribute）とは
タグに追加指定する情報です。例えば <a> タグには href属性があり、属性値としてurlを指定できます。
クリックして下さい。
</a>
セレクタ（selector）とは
セレクタはcssの仕組みで、スタイルを適用する対象のことです。
1 2 3 | h1 {font-size:200%;} #hoge-id p {color:red;} .hoge-span p {line-height:100%;} |
h1 や #hoge-id p や .hoge-span p などがセレクタになります。css の セレクタ は「font-size:100%;」などのスタイルを適応する対象のことです。要素 や class 、 id も セレクタ の1つです。
オプション(options)
jQueryの関数（メソッド）に渡す引数に多くの値を一度に設定する場合、オブジェクトを使用します。オブジェクトはキー名と値のペアから成る構造をしています。
例えば以下のような形です。var で address を宣言してオブジェクトを作成しています。キー名が address1 や city などで、「：（コロン）」で区切って値を設定しています。次のキー名と値を記述するのに「,（カンマ）」で区切っています。
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> var address = { address1: '1-1-1 NIHONBASHI', address2: '', city: 'CHUO-KU', province: 'TOKYO', country: 'JAPAN', zip: '0000000' } </script> |
jQuery ではこのような引数のことを、options,config,settings,object,map などと言う。
オブジェクト（object）
オブジェクト は、プログラム上では データ と 処理コード の集合体です。固有のデータがあり、データに対して行う処理コードを持っています。
プロパティ（property）
オブジェクトに関連付いたデータを プロパティ と言います。データ、状態、変数ともいわれます。
メソッド（method）
オブジェクトに関連付いた関数を メソッド（操作） と言います。メソッド はオブジェクト自身に対する操作、振る舞い、を行う関数のことです。
DOM（ドム：Document Object Model）
DOMは、Document Object Model の略称であり、Webページ（ブラウザ）上で、htmlドキュメント や xmlドキュメント にアクセス・操作するための仕組みのことです。DOM は、JavaScript や JavaScriptのプラグインである jQuery が Webページを操作する際の標準仕様であり、API（Application Programming Interface）のようなサービスを提供します。
Webページ（ブラウザ） ←→ DOM ←→ JavaScript（jQueryはJavaScriptのプラグイン）
ブラウザに依存しない
コードが短くなる
readyイベント で jQuery を実行
DOMとは
DOMツリー とは htmlドキュメント や xmlドキュメント の各要素をツリー構造で表したものです。DOMツリーの各要素のことをノード(Node)と言います。
HTMLドキュメント
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>DOMとは？</title> </head> <body> <h1>jQueryについて</h1> <h2>DOMとは？</h2> <h3>Document Object Modelの略称</h3> <p><strong>xml や html の要素を直接操作する仕組み</p> </body> </html> |
DOMツリー
HTMLドキュメントをDOMツリーで表した場合。
1 2 3 4 5 6 7 8 9 10 | <Document> └ <html> ┐ ├ <head> │ └ <title> └ <body> ┐ ├ <h1> ├ <h2> ├ <h3> └ <p> └ <strong> |
要素（エレメント）の関係
親：1階層上の要素のことを親要素と言う。
子：1階層下の要素のことを親要素と言う。
祖先：該当要素より上の階層にあるすべての要素のこと。
子孫：該当要素より下の階層にあるすべての要素のこと。
兄弟：該当要素と同階層にあるすべての要素のこと。
jQueryを実装する
1 | <script type="text/javascript" src="jquery-3.2.1.js"></script> |
と記述するだけです。
また、Google にホストされている jQuery ファイルを読み込んでもOKです。
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
このように記述します。
jQueryの記述方法 readyイベントの使用
(1) readyイベント の記述方法
readyイベント は <スクリプト> ～ </スクリプト> タグ内に jQuery(document).ready(/* DOMの要素読み込み後処理開始 */); と記述します。
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready( /* DOMの要素読み込み後処理開始 */ ); </script> |
実際は readyイベント を省略して記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> jQuery( function($){ /* DOMの要素読み込み後処理開始 */ } ); $( function(){ /* DOMの要素読み込み後処理開始 */ } ); </script> |
jQueryは、 $(・・・) や jQuery(・・・)の形で呼び出すことが出来ます。
「$（ドルマーク）」は1文字で変数になっています。JavaScript では、$ という変数名を付けることが可能です。この $ は、 jQuery のエイリアス（別名）となっています。どちらの記述でも問題ありません。
.js ファイルで外部化
.js ファイルで外部化する場合は、<スクリプト> ～ </スクリプト> タグは必要ありません。
外部化で.jsファイルを読み込むように、headタグ内に以下のコードを記述します。
1 | <script src="〇〇〇.js"></script> |
この場合、〇〇〇.jsファイルは以下のように記述します。
1 2 3 | jQuery(document).ready( /* DOMの要素読み込み後処理開始 */ ); |
(2) readyイベント の省略記述
jQuery(document).ready の記述は $ のみでも同じ意味になります。
1 2 3 4 5 | <script type="text/javascript"> $( /* DOMの要素読み込み後処理開始 */ ); </script> |
(3) readyイベント の処理を function で指定
readyイベント を宣言したら、function で処理を記述します。その際、通常は function名 も指定します。
1 2 3 4 5 6 | <script type="text/javascript"> jQuery(document).ready(ファンクション名); function(ファンクション名){ /* DOMの要素読み込み後処理開始 */ }; </script> |
(3)の例
ready-red.png の画像のみ非表示の指定がされています。
- readyイベント：jQuery(document).ready
- ファンクション名：imgHideFunc
- function処理内容：$("img#ready-red").hide();
img要素 の id：ready-red を見えなくする
- ブラウザ
- jQuery
- html
1 2 3 4 5 6 | <script type="text/javascript"> jQuery(document).ready(imgHideFunc); function imgHideFunc(){ $("img#ready-red").hide(); }; </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>readyイベント</title> <script src="../../jquery-3.2.1.js"></script> <!-- =========================== //jQuery =========================== --> <script type="text/javascript"> jQuery(document).ready(imgHideFunc); function imgHideFunc(){ $("img#ready-red").hide(); }; </script> <!-- =========================== jQuery// =========================== --> </head> <body> 画像配置 ready-red.png：<br> <img src="ready-red.png" id="ready-red" alt="" /><br> 画像配置 ready-yellow.png：<br> <img src="ready-yellow.png" id="ready-yellow" alt="" /><br> 画像配置 ready-green.png：<br> <img src="ready-green.png" id="ready-green" alt="" /><br> 画像配置 ready-blue.png：<br> <img src="ready-blue.png" id="ready-blue" alt="" /><br> </body> </html> |
(4) function名 の省略
function名 を指定しないことも可能です。この場合、無名関数となります。function が多い場合に多くの関数名を管理する必要がなくなります。
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function(){ /* DOMの要素読み込み後処理開始 */ }); </script> |
(4)の例
ready-green.png の画像のみ非表示の指定がされています。
- ブラウザ
- jQuery
- html
1 2 3 4 | jQuery(document).ready(function(){ $("img#ready-green").hide(); }); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>readyイベント</title> <script src="../../jquery-3.2.1.js"></script> <!-- =========================== //jQuery =========================== --> <script type="text/javascript"> jQuery(document).ready(function(){ $("img#ready-green").hide(); }); </script> <!-- =========================== jQuery// =========================== --> </head> <body> 画像配置 ready-red.png：<br> <img src="ready-red.png" id="ready-red" alt="" /><br> 画像配置 ready-yellow.png：<br> <img src="ready-yellow.png" id="ready-yellow" alt="" /><br> 画像配置 ready-green.png：<br> <img src="ready-green.png" id="ready-green" alt="" /><br> 画像配置 ready-blue.png：<br> <img src="ready-blue.png" id="ready-blue" alt="" /><br> </body> </html> |
(5) readyイベント 省略 と function名の省略
readyイベント を省略形式で記述し、function名 を省略した場合、かなり簡潔に記述することが出来ます。
1 2 3 4 5 6 7 | <script type="text/javascript"> $( function(){ /* DOMの要素読み込み後処理開始 */ } ); </script> |
(5)の例
ready-blue.png の画像のみ非表示の指定がされています。
- ブラウザ
- jQuery
- html
1 2 3 4 5 6 7 | <script type="text/javascript"> $( function(){ $("img#ready-blue").hide(); } ); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>readyイベント</title> <script src="../../jquery-3.2.1.js"></script> <!-- =========================== //jQuery =========================== --> <script type="text/javascript"> $( function(){ $("img#ready-blue").hide(); } ); </script> <!-- =========================== jQuery// =========================== --> </head> <body> 画像配置 ready-red.png：<br> <img src="ready-red.png" id="ready-red" alt="" /><br> 画像配置 ready-yellow.png：<br> <img src="ready-yellow.png" id="ready-yellow" alt="" /><br> 画像配置 ready-green.png：<br> <img src="ready-green.png" id="ready-green" alt="" /><br> 画像配置 ready-blue.png：<br> <img src="ready-blue.png" id="ready-blue" alt="" /><br> </body> </html> |
jQueryオブジェクト
オブジェクトとは
オブジェクト とは、簡潔に説明すると、データ と コード をまとめたもので データ構造 と 処理(関数など) が合わさったものです。ある機能を実装するのに、何十行、何百行とコードを記述しなければならない場合でも、オブジェクトでまとめられたデータや機能を呼び出すことで、非常に短いコードで表現できます。関数とも似ていますが、オブジェクトは関数よりも大きな枠組であり、オブジェクト指向言語においては根幹となる仕組みにもなります。Python言語では「全てはオブジェクトである」という言葉もあります。
オブジェクトのデータを プロパティ と呼び、処理系コードを メソッド と呼びます。では、jQuerオブジェクトとは、どのようなものでしょうか。
jQueryオブジェクトとは
jQueryオブジェクト は、jQueryを操作する入口の役目を果たします。javaScript を短いコードで簡単に操作するように設計されたライブラリが jQuery ですが、jQueryオブジェクトは、そのjQuery を容易に操作するための仕組みとなるものです。
jQueryオブジェクトは以下の記述で作ることが出来ます。
1 2 3 | jQuery("セレクタ") $("セレクタ")//省略版 |
( ) 内に操作適応対象を記述します。readyイベントでは( ) 内に function を指定しますが、jQueryオブジェクトでは セレクタ を指定しています。
セレクタ 以外に jQueryオブジェクト や DOMの要素 の window や document も指定することが出来ます。
1 2 3 | jQuery(DOMの要素) $(DOMの要素)//省略版 |
セレクタは上述しましたが、cssの仕組みで、スタイルを適用する対象のことです。
1 2 3 | h1 {font-size:200%;} #hoge-id p {color:red;} .hoge-span p {line-height:100%;} |
h1 や #hoge-id p や .hoge-span p などがセレクタになります。css の セレクタ は「font-size:100%;」などのスタイルを適応する対象のことです。要素 や class 、 id も セレクタ の1つです。セレクタの記述書式は多くあります。
一部の例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $("*") //すべての要素に適応されます。 $("要素名") //指定したすべての要素名に適用されます。 $("#id名") //指定したid名の要素に適用されます。 $(".class名") //指定したクラス名の要素に適用されます。 $("要素名,#id名") //指定した要素名かid名の要素に適用されます。 $("#id名 要素名") //指定したid名内のすべての要素に適用されます。 $("#id名 > 要素名") //指定したid名直下の要素に適用されます。 |
プロパティ
プロパティ はある特定のデータで、例えば、 navigator.userAgent は、navigatorオブジェクトのuserAgentプロパティを呼び出す意で、ブラウザが保持しているユーザーエージェント情報が格納されています。例えば、「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36」のようなデータが格納されています。
メソッド
メソッド で オブジェクトの処理系コードを呼び出し、必要な機能を実行させます。オブジェクト と メソッド を 「. （ドット）」を挟んで記述し、メソッド名の後には「 () 」が続きます。jQueryオブジェクトには非常に沢山のメソッドが用意されています。
オブジェクト.メソッド(引数)
オブジェクト.メソッド().メソッド().メソッド()
メソッド は、特定の処理が纏められたもので、オブジェクトの関数のようなものです。document.write() は、 documentオブジェクトのwrite()メソッドを呼び出す意で、文字列を出力します。
javaScriptでのdocumentオブジェクトのwrite()メソッドを呼び出しています。write()メソッドには引数として テストという文字列が指定されています。
1 2 3 | <script> document.write("テスト"); </script> |
結果は
となります。
以下の場合、jQueryオブジェクトのセレクタに img要素 を指定して、hide()メソッドを呼び出しています。hide()メソッドは指定した要素を隠す機能があります。
1 2 3 4 5 6 7 | <script type="text/javascript"> $( function(){ $("img").hide(); } ); </script> |
以下の場合、jQueryオブジェクトのセレクタに body要素 を指定して、text()メソッドを呼び出しています。text()メソッドは引数のテキストを表示する機能があります。
1 2 3 4 5 6 7 | <script> $( function(){ $("body").text("Hello,world!"); } ); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>返り値</title> <script src="../../jquery-3.2.1.js"></script> </head> <body> <script> document.write(navigator.userAgent); </script> </body> </html> |
結果の例
返り値
変数 = オブジェクト.メソッド()
返り値とは、オブジェクトにプロパティやメソッドを指定した結果、返っている結果の値です。変数はデータを格納する箱です。返り値は変数に格納することが出来ます。返り値があるかないかは、オブジェクトに指定するプロパティやメソッドによって異なります。
メソッドで返り値を取得する。
1 2 | //span要素のテキストを取得して 変数string に格納 var string = $('span').text(); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>document.writeメソッド</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function () { //span要素のテキストを取得して 変数string に格納 var string = $('span').text(); //div要素に 変数string のテキストを挿入 $('div').text(string); } ); </script> </head> <body> <span>span要素のテキスト</span> <div></div> </body> </html> |
結果は
span要素のテキスト
となります。
プロパティで返り値を取得する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>lengthプロパティ</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function () { //div要素数をカウント lengthプロパティ var num = $('div').length; //span要素に 変数num の数値を挿入 $('span').text(num); } ); </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <span></span> </body> </html> |
結果の例
イベント
function(引数){
処理内容
}
);
イベントを利用する場合は、.on() や .click() .hover() などのイベントメソッドを利用します。処理内容は function で指定します。イベント発生時の処理群のことをイベントリスナーと言います。
| イベントメソッド | 概要 |
|---|---|
| blur() | 要素からフォーカスを外したタイミング |
| contextmenu() | コンテキストメニューの表示前 |
| change() | 要素の値を変更したタイミング（input、checkboxなど） |
| click() | 要素をクリックしたタイミング |
| dblclick() | 要素をダブルクリックしたタイミング |
| focus() | 要素にフォーカスしたタイミング |
| focusin() | 要素にフォーカスしたタイミング（イベントバブリング） |
| focusout() | 要素からフォーカスを外したタイミング（イベントバブリング） |
| keydown() | キーを押したタイミング |
| keypress() | キーを押し続けている状態 |
| keyup() | キーを離したタイミング |
| mousedown() | マウスボタンを押したタイミング |
| mouseup() | マウスのボタンを離したタイミング |
| mouseenter() | 要素にカーソルが入ったタイミング |
| mouseleave() | 要素からカーソルが外れたタイミング |
| mouseover() | 要素にカーソルがオーバーしたタイミング |
| mouseout() | 要素からカーソルが外れたタイミング |
| mousemove() | 要素上をカーソルが移動したタイミング |
| scroll() | スクロールしたタイミング |
| select() | textbox／textareaのテキストを選択したタイミング |
| submit() | フォームからsubmitしたタイミング |
| resize() | ブラウザウィンドウのサイズを変更したタイミング |
イベントメソッド click() の例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>イベント click()</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { // ボタンクリックで現在日時を表示 $('#btnTime').click( function(e) { $(this).text((new Date()).toLocaleString()); } ); } ); </script> </head> <body> <button id="btnTime">クリックすると現在日時表示します。</button> </body> </html> |
サンプル
クリックすると結果は
となります。（クリック時の日時が表示されます。）
thisについて 要素を示す
クリック（イベント発生時）した要素
this を使用した簡単な例を紹介します。以下の例では、this は clickイベント発生時のspan要素を示しています。span要素をクリックすると文字サイズが変更されます。
this を使用する場合、this はイベント内に記述されているのが基本的な形です。this は $('this') などのようにクォーテーションで囲みません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //<span>要素をクリックしたら $('span').click(function() { //クリックした要素自身の文字サイズを変更 $(this).css('font-size', '300%'); } ); } ); </script> </head> <body> <span>クリックしたら文字サイズを変更</span> </body> </html> |
1 2 3 4 5 6 7 | $(function() { //<span>要素をクリックしたら $('span').click(function() { //クリックした要素自身の文字サイズを変更 $(this).css('font-size', '300%'); }); }); |
this は clickイベントのセレクタである span要素 を示しています。上記の例では $(this) の部分を $('span') に置き換えても動作します。
this は複数の要素の中から特定の要素を示す場合に便利さを発揮します。
では複数の要素を配置した場合の例を紹介します。
複数の要素から特定の要素を示す
span要素を複数配置した this の例です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //<span>要素をクリックしたら $('span').click( function() { //クリックした要素自身の文字サイズを変更 $(this).css('font-size', '300%'); } ); } ); </script> </head> <body> <span>span要素 をクリックしたら</span><br> <span>span要素 をクリックしたら</span><br> <span>span要素 をクリックしたら</span><br> <span>span要素 をクリックしたら</span><br> <span>span要素 をクリックしたら</span><br> </body> </html> |
複数の span要素 が記述されていますが、クリックした span要素 の文字サイズが変更されます。仮に、$(this) の部分を $('span') に置き換えた場合、1回のクリックですべての span要素 の文字サイズが変更されてしまいます。
もう一つの例として hoverイベントを使用し、要素内にマウスオーバー／要素内からマウスアウト で背景色を変更するスクリプトを記述してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて 複数要素</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function(){ //hoverイベント $("div").hover(msOverFunc, msOutFunc); //要素内にマウスオーバー function msOverFunc(){ $(this).css("background-color", "#85d134"); } //要素内からマウスアウト function msOutFunc(){ $(this).css("background-color", "#ffffff"); } } ); </script> </head> <body> <div>div要素 マウスオーバー／マウスアウト</div> <div>div要素 マウスオーバー／マウスアウト</div> <div>div要素 マウスオーバー／マウスアウト</div> <div>div要素 マウスオーバー／マウスアウト</div> <div>div要素 マウスオーバー／マウスアウト</div> </body> </html> |
上記の例では、各div要素に対してマウスオーバー／マウスアウトのイベントが個別に発生しているかと思います。仮に $(this) の部分を $("div") と記述した場合、すべてのdiv要素に対してイベントが同時に発生してしまいます。
親要素の取得
.parent() を使用すると this の親要素を指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて 親要素</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //span要素をクリックしたら $('span').click( function() { //クリックしたspanの親要素の背景色を変更 $(this).parent().css('background-color', '#cccccc'); } ); } ); </script> </head> <body> <div> <span>span要素 をクリックしたら spanの親要素の背景色を変更</span><br> <span>span要素 をクリックしたら spanの親要素の背景色を変更</span><br> <span>span要素 をクリックしたら spanの親要素の背景色を変更</span><br> <span>span要素 をクリックしたら spanの親要素の背景色を変更</span><br> <span>span要素 をクリックしたら spanの親要素の背景色を変更</span><br> </div> </body> </html> |
子要素を取得
.children() を使用すると this の子要素を指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて 子要素</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //p要素をクリックしたら $('p').click( function() { //クリックしたp要素の子要素の背景色を変更 $(this).children().css('background-color', '#cccccc'); } ); } ); </script> </head> <body> <div> <p>p要素 をクリックしたら <span>pの子要素の背景色</span>を変更</p> <p>p要素 をクリックしたら <span>pの子要素の背景色</span>を変更</p> <p>p要素 をクリックしたら <span>pの子要素の背景色</span>を変更</p> <p>p要素 をクリックしたら <span>pの子要素の背景色</span>を変更</p> <p>p要素 をクリックしたら <span>pの子要素の背景色</span>を変更</p> </div> </body> </html> |
隣接する要素
.next() や .prev() を使用すると this の子要素を指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて 隣接要素</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //li要素をクリックしたら $('li').click( function() { //背景色リセット $('li').css('background-color', '#ffffff'); //クリックした次の隣接要素の背景色を変更 $(this).next('li').css('background-color', '#cccccc'); //クリックした前の隣接要素の背景色を変更 $(this).prev('li').css('background-color', '#ff0000'); } ); } ); </script> </head> <body> <ul> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> <li>li要素</li> </ul> </body> </html> |
idを取得する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて idの指定</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { //id要素をクリックしたら $('#span001').click( function() { //クリックした子要素の背景色を変更 $(this).children().css('background-color', '#ff0000'); } ); //id要素をクリックしたら $('#span002').click( function() { //クリックした親要素の背景色を変更 $(this).parent().css('background-color', '#cccccc'); } ); } ); </script> </head> <body> <div> <p id="span001">p要素 をクリックしたら <span>指定idの子要素の背景色</span>を変更</p> <p id="span002">p要素 をクリックしたら <span>指定idの親要素の背景色</span>を変更</p> </div> </body> </html> |
thisについて 要素の情報を取得する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>thisについて DOMの要素</title> <script src="../../jquery-3.2.1.js"></script> <script> $( function() { $("div").click( function(){ this.innerHTML = "Clicked" } ); } ); </script> </head> <body> <div>Click here!</div> <div>Click here!</div> <div>Click here!</div> <div>Click here!</div> <div>Click here!</div> </body> </html> |
タグ（＝記事関連ワード）
日付
最終更新日：2018年06月09日
