What is a jQuery selector

JQuery selectors are a set of methods that jQuery provides to make it easy to get elements from a page. Note: the jQuery selector returns a jQuery object.

JQuery selectors are numerous, basically compatible with all CSS1 to CSS3 selectors, and jQuery has added many more complex selectors. [jQuery]

There are many jQuery selectors, but they are interchangeable, meaning that there are many ways to get an element. So we only really use a few of the most common selectors.

JQuery can write all the selectors in CSS

Basic selector

The name of the usage describe
ID selector $(” # ID “) $(” # id “) Gets the element with the specified ID
Class selectors $(” class “) Gets elements of the same class
Label selector $(” div” Gets all elements of the same class of tags
Union selector $(” div, p, li “) Use commas, as long as one of the criteria is met.
Intersection selector $(” div. RedClass “) Gets the div element whose class is redClass

Summary: Same as CSS selectors. Case study:

<! 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>
  // the entry function
  $(function () {
    
    // How does jquery set styles
    //css(name, value)
    //name: style name value: style value
    
    //id selector $("#id")
    //$("#four").css("backgroundColor", "red");
  
  
    //$(".green").css("backgroundColor", "green");
  
  
    //$("li").css("color", "red");
  
  
    / / intersection
    //$("#four,.green").css("backgroundColor", "pink");


    / / and set
    //$("li.green").css("backgroundColor", "red");
    $(".green.yellow").css("backgroundColor"."pink");
    
  });
  
  
</script>

</body>
</html>
Copy the code

$(“.green.yellow”).css(“backgroundColor”, “pink”); Is the union selector, and the corresponding element is

<li class="green yellow">6</li>
Copy the code