jQuery - CSS Classes-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - CSS Classes

jQuery provides three methods addClass(), removeClass() and toggleClass() to manipulate CSS classes of the elements.

We have spanided our CSS manipulation discussion into two parts. This chapter will discuss about manipulating CSS classes and the next chapter will discuss about manipulating CSS properties.

jQuery - Adding CSS Classes

jQuery provides addClass() method to add a CSS class to the matched HTML element(s). Following is the syntax of the addClass() method:

$(selector).addClass(className);

This method takes a parameter which is one or more space-separated classes to be added to the class attribute of each matched element. More than one class may be added at a time, separated by a space, to the set of matched elements, pke so:

$(selector).addClass("Class1 Class2");

Synopsis

Consider the following HTML content with CSS classes defined:

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<span class="container">
   <h2>jQuery addClass() Method</h2>
   <span class="hello">Hello</span>
   <span class="goodbye">Goodbye</span>
</span>
</body>

Now if we use the addClass() method as follows:

$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );

It will produce following result:

<body>
<span class="container">
   <h2>jQuery addClass() Method</h2>
   <span class="hello big">Hello</span>
   <span class="goodbye small">Goodbye</span>
</span>
</body>

Please note that addClass() method does not replace an existing class, rather it simply adds the class, appending it to any which may already be assigned to the elements.

Example

Let s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".hello" ).addClass("big" );
         $( ".goodbye" ).addClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <span class="container">
      <h2>jQuery addClass() Method</h2>
      <span class="hello">Hello</span>
      <span class="goodbye">Goodbye</span>
   </span>
   <br>
   
   <button>Add Class</button>
</body>
</html>

jQuery - Removing CSS Classes

jQuery provides removeClass() method to remove an existing CSS class from the matched HTML element(s). Following is the syntax of the removeClass() method:

$(selector).removeClass(className);

This method takes a parameter which is one or more space-separated classes to be removed from the class attribute of each matched element. More than one class may be removed at a time, separated by a space, from the set of matched elements, pke so:

$(selector).removeClass("Class1 Class2");

Synopsis

Consider the following HTML content with CSS classes defined:

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<span class="container">
   <h2>jQuery removeClass() Method</h2>
   <span class="hello big">Hello</span>
   <span class="goodbye small">Goodbye</span>
</span>
</body>

Now if we use the removeClass() method as follows:

$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );

It will produce following result:

<body>
<span class="container">
   <h2>jQuery removeClass() Method</h2>
   <span class="hello">Hello</span>
   <span class="goodbye">Goodbye</span>
</span>
</body>

Example

Let s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".hello" ).removeClass("big" );
         $( ".goodbye" ).removeClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <span class="container">
      <h2>jQuery removeClass() Method</h2>
      <span class="hello big">Hello</span>
      <span class="goodbye small">Goodbye</span>
   </span>
   <br>
   
   <button>Remove Class</button>
</body>
</html>

jQuery - Toggle CSS Classes

jQuery provides toggleClass() method to toggle an CSS class on the matched HTML element(s). Following is the syntax of the toggleClass() method:

$(selector).toggleClass(className);

This method takes a parameter which is one or more space-separated classes to be toggled. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.

Example

Let s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".hello" ).toggleClass("big" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
</style>
</head>
<body>
   <span class="container">
      <h2>jQuery toggleClass() Method</h2>
      <span class="hello big">Hello</span>
      <span class="goodbye">Goodbye</span>
   </span>
   <br>
   
   <button>Toggle Class</button>
</body>
</html>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

jQuery - CSS Classes

jQuery - Adding CSS Classes

Synopsis

Example

jQuery - Removing CSS Classes

Synopsis

Example

jQuery - Toggle CSS Classes

Example

jQuery HTML/CSS Reference

友情链接