[jQuery]②readyメソッド、セレクタの使い方
readyメソッド
- HTMLを読み込んでからjQueryを実行させる
<script> $(document).ready(function(){ //処理を記述 }); </script>
短縮形
$(function(){
//処理を記述
});
- $()は、戻り値としてjQueryオブジェクトを返す
- jQueryオブジェクトはセレクタによって取得した要素を保存し、これらの操作する機能をもったオブジェクトである
- jQueryでコードを書くことはjQueryオブジェクトのメソッドを呼び出すこと
- $はｊQueryのエイリアスである
jQueryの文法
- どの箇所に？(セレクタ)
- 何をさせる？
- どのタイミングで?
セレクタ {なにを：どうする}
セレクター
CSSでよく利用されるセレクター
- 要素セレクタ $(“要素名") 特定の要素が対象
- IDセレクタ $(“#ID名") 特定のid属性を持つ要素
- クラスセレクタ $(“.クラス名") 特定のclass属性を持つ要素
- 子孫セレクタ $(“要素1 要素2") 要素１の内側にある要素2
- ユニバーサルセレクタ $(“*") すべての要素
- グループセレクタ $(“セレクタ１,セレクタ２,…”) 複数のセレクタ
CSS2.1のセレクター
IE６など一部のブラウザが非対応。
- 子セレクタ $(“親要素名>子要素名”) 特定の要素の直下の子要素
- 隣接セレクタ $(“要素１＋要素２") 特定の要素の次の要素
- first-child擬似クラス $(“要素:first-child") 同一要素内の最初の要素
CSS3のセレクター
IE８以前など非対応。
- 間接セレクタ $(“要素１~要素２”) 特定の要素の後に出現する要素
- 否定擬似クラス $(“要素1:not(要素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(番号)") 同一要素で後ろから指定した番号にる要素
- first-of-type擬似クラス $(“要素:first-of-type”) 同一要素内で最初にあたる要素
- last-of-type擬似クラス $(“要素:last-of-type") 同一要素内で最後にあたる要素
- only-of-type擬似クラス $(“要素:only-of-type”) １つだけ存在する要素
- lang擬似クラス $(“:lang(言語)”) lang属性、特定の言語を指定された要素
CSSの属性セレクター
要素の属性や属性値を条件に選択。[ ]内に条件を記述。
- [attribute] $(“[属性名]”) 特定の属性を持つ要素
- [attribute=‘value’] $(“[属性名＝’値']”) 特定の属性が指定した値をもつ要素
- [attribute!=‘value’] $(“要素名[属性名!=‘値']") 特定の属性が指定した値をもたない要素
- [attribute ^= ‘value’] $("[属性名^=‘値']") 特定の属性が指定した値で始まっている要素
- [attribute $= ‘value’] $("[属性名$=‘値']") 特定の属性が指定した値で終わっている要素
- [attribute = ‘value’] $(“[属性名=‘値']") 特定の属性が指定した値を含んでいる要素
- [attributeFilter1][attributeFilter2] $(“[属性セレクター１][属性セレクター２]") 複数の属性セレクター組み合わせ
jQueryの独自セレクター
- firstセレクター $("要素:first") 指定した要素の最初の要素
- lastセレクター $(“要素:last") 指定した要路の最後の要素
- evenセレクター $(“要素:even") 指定した要素の偶数番目の要素
- oddセレクター $(“要素:odd") 指定した要素の奇数番目の要素
- eqセレクター $(“要素:eq(番号)") 指定した番号の要素
- ltセレクター $(“要素:lt(番号)") 指定した番号の前の要素
- gtセレクター $(“要素:gt(番号)") 指定した番号の後の要素
- headerセレクター $(“:header”) h1~h6までのheading要素
- containsセレクター $(“要素:contains(文字列)") 特定の文字列が含まれる要素
- hasセレクター $(“要素1:has(要素2)") 特定の要素が含まれる要素
- parentセレクター $(“要素:parent") 子要素やテキストを含む要素
