Home > Article > Web Front-end > jquery has several basic selectors
There are 5 basic selectors: 1. ID selector, matching elements based on ID, syntax "$("#id value")"; 2. Element selector, matching elements based on element name, syntax " $("Element name")"; 3. Class selector, matches elements according to class, syntax "$(".Class name")"; 4. Wildcard "*" selector, matches all elements, etc.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
The basic selector is the most commonly used selector in jQuery. jquery has 5 basic selectors:
| Selector | Function description |
|---|---|
ID selector#id
|
According to the given ID Matches an element |
Element (tag) selectorelement
|
Matches all elements based on the given element name |
Class selector.class
|
Match elements based on the given class |
Wildcards* Select Device |
Match all elements |
Union selector selector1, selector2,...,selectorN
|
will each The elements matched by the selector are merged and returned together |
1, #id selector:
jQuery #id selector through HTML The element's id attribute selects the specified element.
The id of the element in the page should be unique, so if you want to select the only element in the page, you need to use the #id selector
Example: Use the #id selector to select id="myDiv1 " element to hide it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("#myDiv1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>
2. Element selector:
jQuery element selector selects elements based on the element name.
Example: Use the element selector to select all
elements and hide them.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>3. .class selector:
jQuery class selector can find elements through the specified class.
Example: Use the class selector to select the element with Class="myClass1" and hide it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$(".myClass1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>
4. Wildcard selector*
jQuery wildcard selector can be used Select all elements, or you can select all elements under a certain element;
Example: Add a style to all elements to make the font red
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("*").css("color", "red");
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>
5. Union selector
When several elements have the same style attributes, a statement can be called together, and the elements are separated by commas. Group selectors group elements with the same style together. Each selector is separated by a comma ",". This comma tells the browser that the rule contains multiple different selectors. If there is no comma, , then the meaning expressed is completely different. Omitting the comma becomes the descendant selector we mentioned earlier. You must be careful about this when using it.
Example: Set the font color of p and span elements to red
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("p,span").css("color", "red");
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素</p>
<span>span元素2</span>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>[Recommended learning: jQuery video tutorial,webfront-end video】
The above is the detailed content of jquery has several basic selectors. For more information, please follow other related articles on the PHP Chinese website!
