menu
ホーム > jquery > jQuery超入門

jQuery超入門

jQueryリファレンス
jQuery超入門 | wepicks!


jQueryとは

jQuery とは、javaScript(ブラウザベースのプログラム言語)のライブラリのことです。John Resig(ジョン・レッシグ)氏によって開発され、2006年8月に初期バージョンがリリースされました。javaScriptのプログラマーではなくても、javaScriptの機能を十分活用できるように設計されています。javaScript簡単操作命令文という感じです。jQuery のコンセプトは「Write Less, Do More=より少ない書き方で、もっと多くこなす」です。javaScript のプログラムを何十行も記述しなければ実装できない機能でも、jQuery を使用すればもっと短く簡潔に表現出来るようになります!javaScrip には 多くのライブラリが用意されています。有名なライブラリとして、Angular、React、Vue.js、Aurelia、Node.js、Socket.io、Bootstrap、Foundation、Skeleton などがあります。

JavaScript(ジャバスクリプト) はクライアント側(ブラウザ側)で実行される、オブジェクト指向機能を備えたインタプリタ型(コンパイルせずに実行可能)のプログラム言語です。
ダウンロード:jQueryオフィシャルサイト


jQueryの機能、何ができる?

jQuery は html や xml の各要素直接操作できます。この機能によって、画像をスライドショーのように表示したり、タブメニューを作成したり、フォームのテキストボックスやチェックボックスなどの内容を動的に操作、ある要素をマウスオーバーしたりクリックしたら、別の要素のアニメーションが作動する、などの機能を実装させることが出来ます。このようにブラウザページをダイナミックに表現することが可能となります。

要素(Element:エレメント)とは

<p>文章</p>

この一式のことです。開始タグと終了タグとその間の内容で構成される一式です。上記は p要素 となります。要素はDOMにおいてノード(Node)に含まれ、要素ノード(エレメントノード)として扱われます。

タグ(Tag)とは

<p>
</p>
<strong>
</strong>

など、「 < 」記号 と 「 > 」記号で作られるものです。開始タグと終了タグの2種類あります。

属性(attribute)とは

タグに追加指定する情報です。例えば <a> タグには href属性があり、属性値としてurlを指定できます。

<a href="https://wepicks.net/">
クリックして下さい。
</a>

セレクタ(selector)とは

セレクタはcssの仕組みで、スタイルを適用する対象のことです。

セレクタ{プロパティ:値;}

h1 や #hoge-id p や .hoge-span p などがセレクタになります。css の セレクタ は「font-size:100%;」などのスタイルを適応する対象のことです。要素 や class 、 id も セレクタ の1つです。

オプション(options)

jQueryの関数(メソッド)に渡す引数に多くの値を一度に設定する場合、オブジェクトを使用します。オブジェクトはキー名と値のペアから成る構造をしています。
例えば以下のような形です。var で address を宣言してオブジェクトを作成しています。キー名が address1 や city などで、「:(コロン)」で区切って値を設定しています。次のキー名と値を記述するのに「,(カンマ)」で区切っています。

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のプラグイン)


ブラウザに依存しない

javaScript のメソッドやプロパティはブラウザによって扱いが異なるので、同じコードでもブラウザの種類によっては動作が保障されません。ですが、jQuery は ブラウザ間の差異を解消してくれます。そのため、ブラウザに依存しない機能が提供可能になります。


コードが短くなる

上述しましたが、jQuery のコンセプトは「Write Less, Do More=より少ない書き方で、もっと多くこなす」です。javaScript のプログラムを何十行も記述しなければ実装できない機能でも、jQuery を使用すればもっと短く簡潔に表現出来るようになります!


readyイベント で jQuery を実行

readyイベントでは、ページ構成(DOMの要素)を読み込んだら処理を開始できるので、ページを完全に読み込む前に準備可能です。


DOMとは

DOM(Document Object Model)とは、htmlドキュメント や xmlドキュメント にアクセスするための仕組みのことです。ドキュメントの 要素(エレメント) 例えば、<div> <span> <p> <img> など、にアクセスして操作することが可能です。DOMの使用はプログラム言語から独立しているので、基本的には、様々な言語で実装可能です。DOMの仕組みによって、htmlドキュメント や xmlドキュメント の各要素の値を直接操作することができます。そのためページを遷移やリロードの必要がありません。
DOMツリー とは htmlドキュメント や xmlドキュメント の各要素をツリー構造で表したものです。DOMツリーの各要素のことをノード(Node)と言います。

HTMLドキュメント

DOMツリー

HTMLドキュメントをDOMツリーで表した場合。

要素(エレメント)の関係

親:1階層上の要素のことを親要素と言う。
子:1階層下の要素のことを親要素と言う。
祖先:該当要素より上の階層にあるすべての要素のこと。
子孫:該当要素より下の階層にあるすべての要素のこと。
兄弟:該当要素と同階層にあるすべての要素のこと。


jQueryを実装する

jQuery のオフィシャルサイトから jQueryファイルをダウンロードして、 html の head内に

と記述するだけです。
また、Google にホストされている jQuery ファイルを読み込んでもOKです。

このように記述します。


jQueryの記述方法 readyイベントの使用

jQueryを機能させるには基本的に readyイベント が必要です。readyイベント を使用すると DOMの要素 を読み込んだ時点で処理を開始できます。ページ全要素の読み込みが完了するまで待つ必要がありません。readyイベントを使用しないと要素を読み込む前に jQuery を実行してしまうので、要素が操作できなくなります。

(1) readyイベント の記述方法

readyイベント<スクリプト> ~ </スクリプト> タグ内に jQuery(document).ready(/* DOMの要素読み込み後処理開始 */); と記述します。

実際は readyイベント を省略して記述します。

jQueryは、 $(・・・)jQuery(・・・)の形で呼び出すことが出来ます。
「$(ドルマーク)」は1文字で変数になっています。JavaScript では、$ という変数名を付けることが可能です。この $ は、 jQuery のエイリアス(別名)となっています。どちらの記述でも問題ありません。

.js ファイルで外部化

.js ファイルで外部化する場合は、<スクリプト> ~ </スクリプト> タグは必要ありません。
外部化で.jsファイルを読み込むように、headタグ内に以下のコードを記述します。

この場合、〇〇〇.jsファイルは以下のように記述します。

(2) readyイベント の省略記述

jQuery(document).ready の記述は $ のみでも同じ意味になります。

(3) readyイベント の処理を function で指定

readyイベント を宣言したら、function で処理を記述します。その際、通常は function名 も指定します。

(3)の例

ready-red.png の画像のみ非表示の指定がされています。

  • readyイベント:jQuery(document).ready
  • ファンクション名:imgHideFunc
  • function処理内容:$("img#ready-red").hide();
    img要素 の id:ready-red を見えなくする

  • ブラウザ
  • jQuery
  • html

(4) function名 の省略

function名 を指定しないことも可能です。この場合、無名関数となります。function が多い場合に多くの関数名を管理する必要がなくなります。

(4)の例

ready-green.png の画像のみ非表示の指定がされています。

  • ブラウザ
  • jQuery
  • html

(5) readyイベント 省略 と function名の省略

readyイベント を省略形式で記述し、function名 を省略した場合、かなり簡潔に記述することが出来ます。

(5)の例

ready-blue.png の画像のみ非表示の指定がされています。

  • ブラウザ
  • jQuery
  • html


jQueryオブジェクト

オブジェクトとは

オブジェクト とは、簡潔に説明すると、データコード をまとめたもので データ構造処理(関数など) が合わさったものです。ある機能を実装するのに、何十行、何百行とコードを記述しなければならない場合でも、オブジェクトでまとめられたデータや機能を呼び出すことで、非常に短いコードで表現できます。関数とも似ていますが、オブジェクトは関数よりも大きな枠組であり、オブジェクト指向言語においては根幹となる仕組みにもなります。Python言語では「全てはオブジェクトである」という言葉もあります。
オブジェクトのデータを プロパティ と呼び、処理系コードを メソッド と呼びます。では、jQuerオブジェクトとは、どのようなものでしょうか。

jQueryオブジェクトとは

jQueryオブジェクト は、jQueryを操作する入口の役目を果たします。javaScript を短いコードで簡単に操作するように設計されたライブラリが jQuery ですが、jQueryオブジェクトは、そのjQuery を容易に操作するための仕組みとなるものです。

jQueryオブジェクトは以下の記述で作ることが出来ます。

( ) 内に操作適応対象を記述します。readyイベントでは( ) 内に function を指定しますが、jQueryオブジェクトでは セレクタ を指定しています。

セレクタ 以外に jQueryオブジェクト や DOMの要素 の window や document も指定することが出来ます。

セレクタは上述しましたが、cssの仕組みで、スタイルを適用する対象のことです。

セレクタ{プロパティ:値;}

h1 や #hoge-id p や .hoge-span p などがセレクタになります。css の セレクタ は「font-size:100%;」などのスタイルを適応する対象のことです。要素 や class 、 id も セレクタ の1つです。セレクタの記述書式は多くあります。

一部の例

プロパティ

オブジェクト.プロパティ

プロパティ はある特定のデータで、例えば、 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()メソッドには引数として テストという文字列が指定されています。

結果は

テスト

となります。

以下の場合、jQueryオブジェクトのセレクタに img要素 を指定して、hide()メソッドを呼び出しています。hide()メソッドは指定した要素を隠す機能があります。

以下の場合、jQueryオブジェクトのセレクタに body要素 を指定して、text()メソッドを呼び出しています。text()メソッドは引数のテキストを表示する機能があります。

– サンプル Click Here ! –

結果の例

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

返り値

変数 = オブジェクト.プロパティ
変数 = オブジェクト.メソッド()

返り値とは、オブジェクトにプロパティやメソッドを指定した結果、返っている結果の値です。変数はデータを格納する箱です。返り値は変数に格納することが出来ます。返り値があるかないかは、オブジェクトに指定するプロパティやメソッドによって異なります。

メソッドで返り値を取得する。

結果は

span要素のテキスト
span要素のテキスト

となります。

プロパティで返り値を取得する

結果の例

10


イベント

イベントの仕組みを利用することで、より豊かな表現が可能になります。イベントはボタンがクリックされたらなど、処理の「タイミング」を指定することが出来ます。

$(セレクタ).イベント名(
    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() の例

– サンプル Click Here ! –

サンプル

クリックすると結果は

となります。(クリック時の日時が表示されます。)


thisについて 要素を示す

幾つかの要素の中で この要素 と特定の要素を指定する場合、 thisを利用します。jQuery の this は、イベント発生時特定の要素を示したり要素の情報を取得したりすることが出来ます。イベント発生時以外でも this は利用しますが、今回はイベント発生時の this の利用方法について紹介します。this は、複数の要素の中から特定の要素を示すことが出来るので、用途に応じて示す対象を選択することが出来ます。それらは、イベント発生時の、要素、親要素、子要素、隣接する要素、指定idの要素、などです。

クリック(イベント発生時)した要素

this を使用した簡単な例を紹介します。以下の例では、this は clickイベント発生時のspan要素を示しています。span要素をクリックすると文字サイズが変更されます。
this を使用する場合、this はイベント内に記述されているのが基本的な形です。this は $('this') などのようにクォーテーションで囲みません。

– サンプル Click Here ! –

this は clickイベントのセレクタである span要素 を示しています。上記の例では $(this) の部分を $('span') に置き換えても動作します。
this は複数の要素の中から特定の要素を示す場合に便利さを発揮します。
では複数の要素を配置した場合の例を紹介します。

複数の要素から特定の要素を示す

span要素を複数配置した this の例です。

– サンプル Click Here ! –
複数の span要素 が記述されていますが、クリックした span要素 の文字サイズが変更されます。仮に、$(this) の部分を $('span') に置き換えた場合、1回のクリックですべての span要素 の文字サイズが変更されてしまいます。

もう一つの例として hoverイベントを使用し、要素内にマウスオーバー/要素内からマウスアウト で背景色を変更するスクリプトを記述してみます。

– サンプル Click Here ! –
上記の例では、各div要素に対してマウスオーバー/マウスアウトのイベントが個別に発生しているかと思います。仮に $(this) の部分を $("div") と記述した場合、すべてのdiv要素に対してイベントが同時に発生してしまいます。

親要素の取得


.parent() を使用すると this の親要素を指定できます。

– サンプル Click Here ! –

子要素を取得

.children() を使用すると this の子要素を指定できます。

– サンプル Click Here ! –

隣接する要素

.next() や .prev() を使用すると this の子要素を指定できます。

– サンプル Click Here ! –

idを取得する

– サンプル Click Here ! –


thisについて 要素の情報を取得する

this からどの要素がクリックされたかなど、要素の情報を取得することが出来ます。this は jQuery ではなく、javaScript言語 の仕組みで動作するもので、利用方法も幾つかあります。thisは実際にはDOMの要素を示しています。

– サンプル Click Here ! –


タグ(=記事関連ワード)

日付

投稿日:2017年7月10日
最終更新日:2018年06月09日

このカテゴリの他のページ

この記事へのコメント

トラックバックurl

https://wepicks.net/jq-intro/trackback/

page top