CSSと似ている jQuery の書き方

ＤＯＭについて

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

ＤＯＭではＨＴＭＬドキュメント「ＤＯＭツリー」と呼ばれる階層構造で表現する。以下参照。

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

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

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

セレクタの書き方

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

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

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

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

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

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

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

①要素セレクター

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

②グループセレクター

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

③ＩＤセレクター

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

④クラスセレクター

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

⑤子孫セレクター

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

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

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

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

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

$(“h1”).css(“backgroundColor”, “yellow”);・・・ＤＯＭ形式