This series of articles mainly describes how to use Attributes of the jQuery framework (Attributes). I will describe it in the form of an instance. It is based on simplicity and comprehensiveness and will not involve much depth. My learning method: get started first, and then go to advanced level!
This series of articles includes five articles: attribute, class, Html code, text, and value.
This article describes the usage of addClass (class), removeClass (class), and toggleClass (class.
If you have any suggestions or comments on this series of articles, please send to: sjzlgt@qq.com
You can go to the official jQuery website to learn more about jQuery.
Copyright: code-cat blog: http://www.cnblogs.com/bynet/ reprint please keep the original author, source and copyright information!
1. addClass (class) Usage
Definition: add the specified class name for each matching element.
Returned value: Object
Parameter: class (String): one or more CSS class names to be added to the element. Separate multiple CSS class names with spaces.
Example: add the 'redborder' class to all images in the DIV with ID "div_a1.
Code: $ ("# div_a1 img"). addClass ("redBorder ");
2. removeClass (class) Usage
Definition: deletes all or specified classes from all matching elements.
Returned value: Object
Parameter: class (String): (optional) one or more CSS class names to be deleted. Separate multiple CSS class names with spaces.
Example: Delete the 'redborder' class from all images in the DIV with ID "div_b1.
Code: $ ("# div_b1 img"). removeClass ("redBorder ");
3. toggleClass (class) Usage
Definition: if there is (does not exist), delete (ADD) a class.
Returned value: Object
Parameter: class (String): CSS class Name
Instance: Switch the 'redborder' class to all images in the DIV with ID "div_c1. Code: $ ("# div_c1 img"). toggleClass ("redBorder ");
Demo:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> jQuery-Attributes-2 </title> <script src =" http://www.bkjia.com/uploads/common/jquery-1.3.2.min.js "Type =" text/javascript "> </script> <style type =" text/css ">. div {width: 95%; margin-left: 15px; margin-top: 15px; margin-right: 15px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; background-color: # ccc; border: #999 1px solid; line-height: 30px; font-size: 13px; font-family: ;}. blue {color: Blue ;}. green {color: Green ;}. button {border: green 1px solid; width: 100px ;}. xiaobiao {font-weight: bold ;}. red_test {background- Color: red; color: White; width: 300px; height: 30px ;}. li_test {border: #000 1px solid ;}. redBorder {border: Red 1px solid; padding: 1px ;}</style>
Tip: the code can be modified before running!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
