免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
jQueryのセレクタとは何ですか
jQueryのセレクタjQueryのは、私たちを提供するためのメソッドのセットで、私たちは、ページ上の要素を取得する方が便利なことができます。注:jQueryのセレクタはjQueryオブジェクトを返します。
jQueryのセレクタは、CSS3のセレクタへのすべてのCSS1、jQueryを使って基本的に互換性がたくさんあるし、また、より多くの複雑なセレクタを追加しました。[表示jQueryのドキュメント]
多くのjQueryのセレクタが、しかし、セレクタの間で相互に置き換えることができ、その要素を得ることで、あなたが得るために様々な方法があります。だから我々は本当に、最も一般的なセレクタの通常わずか数することができます。
jQueryのでCSSセレクタを書くことができます
基本的なセレクタ
名前 | 使い方 | 説明 |
---|---|---|
IDセレクタ$( "#IDは") | $(「#IDは」) | 要素指定されたIDを取得します。 |
クラスセレクタ | $(「クラス」) | クラスの同じタイプの要素を取得 |
タグセレクタ | $(「div要素」 | 同じクラスラベルのすべての要素を取得します。 |
そして、セレクタを設定します | $( "ディビジョン、P、それ") | 区切るには、カンマを使用し、それができるのいずれかの条件満たしています。 |
交差点セレクタ | $(「div.redClass」) | div要素にクラスを返しますredClass |
概要:まったく同じでCSSセレクタを使用しています。
ケース:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="four">4</li>
<li>5</li>
<li class="green yellow">6</li>
<li class="green">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<script src="jquery-1.12.4.js"></script>
<script>
//入口函数
$(function () {
//jquery如何设置样式
//css(name, value)
//name:样式名 value:样式值
//id选择器 $("#id")
//$("#four").css("backgroundColor", "red");
//$(".green").css("backgroundColor", "green");
//$("li").css("color", "red");
//交集
//$("#four,.green").css("backgroundColor", "pink");
//并集
//$("li.green").css("backgroundColor", "red");
$(".green.yellow").css("backgroundColor", "pink");
});
</script>
</body>
</html>
注: $(".green.yellow").css("backgroundColor", "pink");
設定されると、セレクタは、取得された要素に対応しています
<li class="green yellow">6</li>