jQuery 実行タイミングとセレクター 2014.12.07
jQuery 基本
はじめに
最近、jQueryに頭を悩ますことが増えています。
例えば、当サイトはCSSフレームワークのFoundationを利用して作成しています。
Foundationの中にはjQueryを使用して動かす要素が含まれていますが、それがWordPress内に含まれているjQueryと干渉していまい、意図した通りに動かないことがよくあるのです。
WordPress内でjQueryを動かす方法、というのは調べるといくつか出てきます。
ただそれは、一般的な方法であり、私のケースに必ず当てはまるわけではないので、やはりケースバイケースで対応していく他ないのです。
そうなってくると必要なのがjQueryの知識です。
すぐに身につくものではありませんが、小さなブログ一つ満足に作れないのは私にとって大きな問題です。
そのため、これからの最優先課題として取り組むことに決めました。
jQueryの基本
前置きが長くなりましたが、そんなわけでjQueryの勉強を始めます。
基本的に『Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
さて、jQueryが何なのか、ということについては以前記事にまとめました。
一言で言えば、
jQueryはJavascriptライブラリの一つで、少ないコードでJavascriptを実行することができます。
jQueryの実行タイミング
jQueryないしは、Javascriptはscript要素が読み込まれた段階で、script要素内に記述された命令を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> alert("Hello world!"); </script> </head> <body> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </body> </html> |
サンプル１では、まず<script>~</script>内のalert文が実行され、（OKボタンを押した）その後にページが表示されます。
ということは、例えばHTMLの内容を変更するscriptを<head>内に書いた場合、HTMLが表示される前に実行されてしまうため、意図したとおりに動かないことになります。
readyメソッド
そこで、scriptを実行するタイミングを制御する「ready」というjQueryのメソッドを使用します。
|
1 2 3 |
$(document).ready(function(){ ここにjQueryの処理を記述する }); |
このとき、｛ ｝の内側に書かれている命令は、HTMLの読み込みが終わった後に実行されます。
（readyメソッド→準備が終わった後に実行する）
このreadyは以下のような省略形でも使えます。
|
1 2 3 |
$(function(){ ここにjQueryの処理を記述する }); |
これはよく見る形ですね。
jQueryでスクリプトを書く場合、ほとんどの場合このreadyメソッドを記述し、その内側に実際の命令を記述していきます。
HTMLの要素を指定するセレクター
jQueryを利用したスクリプトでは、
HTMLの要素を指定→操作する内容（命令）
という手順を踏みます。
そのため、jQueryを使いこなす第一歩としてセレクターを理解する必要があります。
ここではjQueryに用意されたセレクターを5つに分類しています。
- CSSでよく使われるセレクター
- CSS2.1のセレクター
- CSS3のセレクター
- CSSの属性セレクター
- jQueryの独自のセレクター
これを表にまとめると以下のようになります。
| 1.CSSでよく使われるセレクター | ||
|---|---|---|
| 要素セレクター | $(“要素名”) | 特定の要素 |
| IDセレクター | $(“ID名”) | 特定のid属性を持つ要素 |
| クラスセレクター | $(“クラス名”) | 特定のclass属性を持つ要素 |
| 子孫セレクター | $(“要素1 要素2”) | 特定の要素の内側にある要素 |
| ユニバーサルセレクター | $(“*”) | すべての要素 |
| グループセレクター | $(“セレクター1,セレクター2”) | 複数のセレクター |
| 2.CSS2.1のセレクター | ||
| 子セレクター | $(“親要素名>子要素名”) | 特定の要素の直下の子要素 |
| 隣接セレクター | $(“要素1+要素2”) | 特定の要素の次の要素 |
| first-child疑似クラス | $(“要素:first-child”) | 同一要素内の最初の要素 |
| 3.CSS3のセレクター | ||
| 間接セレクター | $(“要素1~要素2”) | 特定の要素の後に出現する要素 |
| 否定疑似クラス | $(“要素1:not(要素2)”) | 特定の要素のうち要素2の条件を除く要素 |
| empty疑似クラス | $(“要素:empty”) | 子要素やテキストを含まない要素 |
| nth-child疑似クラス | $(“要素:nth-child(番号)”) | 要素内の指定した番号の要素 |
| last-child疑似クラス | $(“要素:last-child”) | 特定の要素の最後の要素 |
| only-child疑似クラス | $(“要素:only-child”) | 特定の要素が一つだけ含まれる要素 |
| nth-last-child疑似クラス | $(“要素:nth-last-child(番号)”) | 要素内を後ろから数えて指定した番号にある要素 |
| nth-of-type疑似クラス | $(“要素:nth-of-type(番号)”) | 同一要素で指定した番号にある要素 |
| nth-last-of-type疑似クラス | $(“要素:nth-last-of-type(番号)”) | 同一要素で後ろから数えて指定した番号にある要素 |
| only-of-type疑似クラス | $(“要素:only-of-type”) | 1つだけ存在する要素 |
| lang疑似クラス | $(“:lang(言語)”) | 特定の言語を指定された要素 |
| 4.CSSの属性セレクター | ||
| [attribute] | $(“[属性名]”) | 特定の属性を持つ要素 |
| [attribute=’value’] | $(“[属性名=’値’]”) | 特定の属性が指定した値を持つ要素 |
| [attribute!=’value’] | $(“要素名[属性名!=’値’]”) | 特定の属性が指定した値を持たない要素 |
| [attribute^=’value’] | $(“[属性名^=’値’]”) | 特定の属性が指定した値で始まっている要素 |
| [attribute$=’value’] | $(“[属性名$=’値’]”) | 特定の属性が指定した値で終わっている要素 |
| [attribute*=’value’] | $(“[属性名*=’値’]”) | 特定の属性が指定した値を含んでいる要素 |
| [attributeFilter1] [attributeFilter2] |
$(“[属性セレクター1][属性セレクター2]”) | 複数の属性セレクターに該当する要素 |
| 5.jQuery独自のセレクター | ||
| firstセレクター | $(“要素:first”) | 指定した要素の最初の要素 |
| lastセレクター | $(“要素:last”) | 指定した要素の最後の要素 |
| evenセレクター | $(“要素:even”) | 指定した要素の偶数番目の要素（0から数える） |
| oddセレクター | $(“要素:odd”) | 指定した要素の奇数番目の要素（0から数える） |
| eqセレクター | $(“要素:eq(番号)”) | 指定した番号の要素（番号は0から数える） |
| ltセレクター | $(“要素:lt(番号)”) | 指定した番号より前の要素（番号は0から数える） |
| gtセレクター | $(“要素:gt(番号)”) | 指定した番号より前の要素（番号は0から数える） |
| headerセレクター | $(“:header”) | h1~h6までのheading要素 |
| containsセレクター | $(“要素:contains(文字列)”) | 特定の文字列が含まれている要素 |
| hasセレクター | $(“要素1:has(要素2)”) | 特定の要素が含まれている要素 |
| parentセレクター | $(“要素:parent”) | 子要素やテキストを含む要素 |
CSSのセレクターだけでも、結構な数がある上に、jQuery独自のセレクターも含んでいるので、HTML上の要素はすべて指定できると思います。
セレクターについては、時間出来次第、もっと掘り下げた記事を書きたいと思います。
次回は、操作する内容＝jQueryの命令についてです。
参考
この記事は以下の書籍を参考にして書いています。
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
Webデザイナー等、ノンプログラマーを対象に書かれているので、プログラミング初心者でもとっつきやすいと思います。
が、プログラミングなので奥が深く、全部理解するまでにはそれ相応の時間と根気が必要かと。
表紙のドーナツがおいしそうです…
Thanks for reading to the end!!