jquery has several basic selectors-Front-end Q&A-php.cn

jquery has several basic selectors

青灯夜游

Release： 2022-05-07 20:09:52

Original

3149 people have browsed it

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.

jquery has several basic selectors

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:

jquery has several basic selectors

Selector	Function description
ID selector`#id`	According to the given ID Matches an element
Element (tag) selector`element`	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>

Copy after login

jquery has several basic selectors

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>

Copy after login

jquery has several basic selectors

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>

Copy after login

jquery has several basic selectors

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>

Copy after login

jquery has several basic selectors

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>

Copy after login

jquery has several basic selectors

[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!