初めに
jQueryとCSSが別々ファイルを設定するという集めです。
#クラスの設定に対して
###①普通の設定
html要素）
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
<div>
<p>jQuery練習</p>
<ul>
<li class="item">サンプルテキスト１</li>
<li class="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>
<body id="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を分別したの方が分かりやすし、ソースの改善も便利だ。
以上