How to add and remove classes in jquery-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to add and remove classes in jquery

青灯夜游

Nov 22, 2022 pm 07:24 PM

javascriptjquery

AddClass() and removeClass() can be used in jquery to add and remove classes. addClass() adds one or more classes to the selected element, the syntax is "$(selector).addClass(class name)". If you need to add multiple classes, use spaces to separate the class names. removeClass() removes one or more classes from the selected element, the syntax is "$(selector).removeClass(class name)"; the parameters can be omitted, and all classes will be cleared.

How to add and remove classes in jquery

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

jquery methods to add and remove classes

##MethodDescriptionaddClass()Adds the specified class name to the matching element. removeClass()Remove all or specified classes from all matching elements.

jquery addClass()Add class

addClass() method adds an or Multiple classes.

This method does not remove the existing class attribute, but only adds one or more class attributes.

Tip: If you need to add multiple classes, please use spaces to separate class names.

Syntax:

$(selector).addClass(class)

ParametersDescription classRequired. Specifies one or more class names.

Example: Add a class to the first p element

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").addClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h1>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<button>向第一个 p 元素添加一个类</button>
	</body>
</html>

How to add and remove classes in jquery

jQuery removeClass() Remove Class

The removeClass() method removes one or more classes from the selected element.

Note: If no parameters are specified, this method will remove all classes from the selected elements.

Syntax:

$(selector).removeClass(class)

ParametersDescription


class	Optional. Specifies the name of the class to be removed. If you need to remove several classes, please use spaces to separate class names. If this parameter is not set, all classes will be removed.

class

Optional. Specifies the name of the class to be removed.

If you need to remove several classes, please use spaces to separate class names.

If this parameter is not set, all classes will be removed.

Example: Remove all

's "intro" classes

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").removeClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h1>
		<p class="intro">This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<button>从第一个段落中删除类</button>
	</body>
</html>

How to add and remove classes in jquery

【Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of How to add and remove classes in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn