Jquery勉強記(2)_jquery

セレクター
Jquery のようなセレクターを見たとき、最初から CSS セレクターを思い出しましたが、CSS のセレクター構文は非常に古典的であるため、Jquery は CSS から学ぶことができません。多くの疑問が残った。

Jquery のセレクターをおさらいしてみましょう

このうち、h1 がセレクターで、color:red と background:#d00 が宣言されており、この 2 つの組み合わせも {} 宣言内で呼び出されます。ブロック、色と背景は属性と呼ばれ、赤と #d00 は値と呼ばれます。

セレクター カテゴリは次のカテゴリに分類できます。

タグ セレクター: p{CSS ルール}

id セレクター: #ID{CSS ルール}

クラス セレクター: .Class{CSS ルール}

グループ セレクター: h1,h2,h3,h4,h5,h6{CSS ルール}

子孫セレクター: div p{CSS ルール}

ワイルドカード セレクター: *{CSS ルール}

擬似クラス セレクター: a:link,a:visited{CSS ルール}

別のあまり一般的ではないマルチもあります-type セレクター、属性セレクター、部分属性セレクター、隣接兄弟セレクター、サブセレクターなど。詳細については、書籍「CSS 権威マニュアル」または http://www.w3 .org/TR/CSS2/selector を参照してください。 .html。

同様に、Jquery で $("#ID") を理解することは難しくありません。
Jquery の基本セレクターには *、class、element、id が含まれ、このグループ メソッド selector1、selector2、...

包括的な例を見てみましょう

<style type="text/css"> .normalStyle{}{ background:#C3D9FF; } .alterStyle{}{ background:#DDF8CC; } .h{}{ background:#fcc; border:solid 1px #d00; } .button{}{ background:#FAFAA0; border:solid 1px #996699; padding:4px; } </style> <ul> <li> </li> <li class="alter">オプション 1</li> <li>オプション 2</li> <li class="alter">オプション 3</li> </ul>オプション 4<h1> </h1> <h2 id="タイトル">タイトル 1</h2> <h3 id="タイトル">タイトル 2</h3> <button id="btn">タイトル 3</button> ボタン
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

2. 階層セレクター

言うまでもなく、階層セレクターのアイデアは CSS から来ており、実際には少し拡張されています。 要素内のすべてを選択
$("div>span")//
$('prev next') という名前の要素を選択します/prev の直後の要素を選択します 要素の次の要素
$('prev~siblings')//prev 要素の後のすべての兄弟要素を選択します
例:

コードをコピー

コードは次のとおりです:

$(function(){
$("ul li").css(" color","#f00");
$("div>スパン").css("color","#008000");
$("div スパン").css("color", "#d00");
$( "div~span").css("background","#ffc");
head>

テキスト 2
テキスト 3

• オプション 2
• 3 つ選択してください