What does the jquery class selector return?-Front-end Q&A-php.cn

What does the jquery class selector return?

青灯夜游

Release： 2022-11-21 19:17:18

Original

1899 people have browsed it

In jquery, the class selector is used to select all elements with a specified class value. It can return a jquery collection object containing all specified class elements. The syntax is "$(".class")" ; The class attribute is used to set specific styles for multiple HTML elements. In order to avoid problems in some browsers, it is best not to use class attributes starting with a number.

What does the jquery class selector return?

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

In jquery, the class selector is used to select all elements with the specified class.

jquery class selector

class refers to the class attribute of an HTML element. The class attribute is used to set specific styles for multiple HTML elements.

Note: Do not use class attributes starting with numbers! This may cause problems in some browsers.

Syntax of class selector:

$(".class")

Copy after login

Return value: One containing all specified jquery collection object of class element.

Example of using class selector

1. Single class selection

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-3.6.1.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

What does the jquery class selector return?

2. Multiple class selectors

Select all classes equal to "intro", "demo" or "end" Elements:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".intro, .demo, .end").css("background-color", "yellow");
			});
		</script>
	</head>
	<body>
		<h2>欢迎来到我的主页</h2>
		<p class="intro">这个段落的 class 为 "intro".</p>
		<p>这是一个段落</p>
		<p class="demo">这个段落的 class 为 "demo".</p>
		<p>这是另一个段落</p>
		<p class="end">这个段落的 class 为 "end".</p>
	</body>
</html>

Copy after login

What does the jquery class selector return?

##[Recommended learning:

jQuery video tutorial, web front-end video]

The above is the detailed content of What does the jquery class selector return?. For more information, please follow other related articles on the PHP Chinese website!