初めに
jQueryとCSSが別々ファイルを設定するという集めです。
クラスの設定に対して
①普通の設定
html要素）
<html><head><title>Hoge</title></head><bodyid="main-id"><div><p>jQuery練習</p><ul><liclass="item">サンプルテキスト１</li><liclass="item">サンプルテキスト２</li></ul></div></body></html>jQueryオブジェクト
// html要素: p$('p').css('color','blue');// class .className$('.item').css('color','red');結果
②HTMLの表示の代わりに、jQueryタグで表示する
jQueryとCSSが一つファイルの設定の代わりに、別々ファイルを分別する
html要素）
<html><head><title>Hoge</title></head><bodyid="main-id"></body></html>jQueryオブジェクト
//マインオブジェクトvar$main=$("#main-id");//divオブジェクトに変換するvar$div=$("<div>");//ulオブジェクトに変換するvar$p=$("<p>").html("jQuery練習");//ulオブジェクトに変換するvar$ul=$("<ul>");//liオブジェクトに変換するvar$li1=$("<li>").html("サンプルテキスト１");$li1.addClass("item");//liオブジェクトに変換するvar$li2=$("<li>").html("サンプルテキスト２");$li2.addClass("item");//親オブジェクトに子オブジェクトを追加$div.append($p).append($ul.append($li1).append($li2));$main.append($div);CSSの設定
p{color:blue;}.item{color:red;}③表示の結果と同じですが、jQueryとCSSを分別したの方が分かりやすし、ソースの改善も便利だ。
以上