jQueryの書き方とセレクター

CSSと似ている jQuery の書き方

 

DOMについて

HTMLドキュメント内の要素を操作するため仕組みをDOM(Document Object Model)という。DOMを使用すると
WEBページ内の文字列を動的に変更したりテキストや背景の色や配置などのスタイルを変更したりさらには
アニメーションを行ったりすることが可能です。javaScriptで表現するにはかなり骨が折れるがjQueryであれは非常に
シンプルに記述できる。

DOMではHTMLドキュメント「DOMツリー」と呼ばれる階層構造で表現する。 以下参照。

 

DOMツリー内の個々の要素を「ノード」と呼びます。前述のようにjQueryの場合には「$(“セレクター”)」の形式で各ノードにアクセルする。id属性が 「firstP」の要素の背景色を黄色にするにはCSS()メソッドを使って次のように記述する。

 

$(“#firstP”).css(“background-color”,”yellow”);

javascriptで書くともっとめんどくさい。

セレクタの書き方

対象となる要素を指定する重要セレクター(メゾッドは.css)

●要素名で指定する要素セレクター 例:$(“h1”)

●id属性で指定するIDセレクター 例:$(“#myDiv”)

●クラス属性で指定するクラスセレクター 例:$(“li.myClass”)

●内側の要素を指定する子孫セレクター 例:$(“ul#list strong”)

●すべての要素を選択するユニバーサルセレクター 例:$(“li *”)

●柔軟な要素指定が可能なフィルター 例:$(“li:odd”)

①要素セレクター

 

 

・h1を指定してcssメゾッドでh1エレメントの背景色を黄色にしている。

②グループセレクター

・セレクターはカンマで区切って複数指定できる。これをセレクターのグループ化という。emとstorongエレメントの文字サイズ を150%に、文字色を青色に、スタイルを斜体にしている。
◎ポイントcssメゾッドで複数のプロパティを同時に指定する場合{}の中に”プロパティ”:”値”をカンマで区切って指定する。 functionの最後の});と被るので注意が必要!!!!!!!あくまでも{}で囲むのはCSSメゾットの場合のみ!!!!!!

③IDセレクター

 

・フッターのdivエレメントの文字列をテキスト配置を右寄せにしている。

④クラスセレクター

・liエレメントの文字の太さを太字にしている。

⑤子孫セレクター

・指定したセレクターの内側の要素となるエレメントを指定。「親のセレクター 内側セレクター」 のようにスペースを空ける。ul#listの内側にあるstorongエレメントの文字サイズを300%へ変更する。

⑥ユニバーサルセレクター

・アルタリスクを使えばすべての要素を指定。しばしば子孫セレクターと組み合わせて使用される。 上はliエレメント内のすべての要素にアンダーラインを表示するには次のようにします。

補足・CSSのプロパティについて

・CSSのプロパティにはbackground-colorやfont-sizeのように二つの単語がハイフンで区切られているものがあるが これらのプロパティを標準のDOMを使用して設定する場合には「backgroundColor」「fontSize」のようにハイフン を削除し続く文字をお文字にする必要がある。ただしjQueryのCSS()メソッドでプロパティを単独で設定する場合 にはjQueryの内部でbackground-colorがbackgroundColorに自動変換されるためどちらでしてもよい。
$(“h1”).css(“background-color”, “yellow”);・・・CSS形式

$(“h1”).css(“backgroundColor”, “yellow”);・・・DOM形式

補足2・””の省略

CSSメソッドでプロパティを複数指定する場合にはプロパティ名を””で囲まなくてもよい。 ただしその場合ハイフンなしの形式で指定する必要ある。

$(“strong, em”).css({
fontSize: “150%”,
fontStyle: “italic”,
color: “blue”});

フィルターについて

フィルター=jQuery独自のセレクター。フィルターを使用するにはコロンで セレクターとフィルターを接続する。

参考サイト→jQuery 日本語リファレンス

フィルター一覧