JavaScript Tutorial/jQuery/addClass
Содержание
addClass(class) adds the specified class(es) to each of the set of matched elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>
Add class to a selected Tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>
Adds the classes "selected" and "highlight" to the matched elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("selected highlight"); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>
Adds the class "selected" to the matched elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>
Add style class to tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> a.test { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("a").addClass("test"); }); </script> </head> <body> <a href="http://wbex.ru/">wbex.ru</a> </body>
</html></source>
Add two classes
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("one two"); }); </script> <style> .one { color:red; } .two { border:1px solid blue; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>