jQueryの共通の基本セレクタ

免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
このリンク: https://blog.csdn.net/qq_41684621/article/details/102747743

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>

おすすめ

転載: blog.csdn.net/qq_41684621/article/details/102747743