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