Jquery勉強記(2)_jquery-jsチュートリアル-php.cn

Jquery勉強記(2)_jquery

WBOY

リリース： 2016-05-16 18:44:47

オリジナル

1106 人が閲覧しました

セレクター
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、...

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

ボタン
[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"); 

 
 テキスト 2 
テキスト 3  

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