JavaScript Tutorial/jQuery/addClass

Материал из Web эксперт
Перейти к: навигация, поиск

addClass(class) adds the specified class(es) to each of the set of matched elements.

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </body>
</html>


Add class to a selected Tag

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
  </body>
</html>


Adds the classes "selected" and "highlight" to the matched elements.

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </body>
</html>


Adds the class "selected" to the matched elements.

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </body>
</html>


Add style class to tag

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


Add two classes

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/addClass&oldid=9655»