JavaScript Tutorial/jQuery/CSS

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

30. Change background color

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    $(document).ready(function(){
      $("*").css("background","red");
    });
  });
    </script>
  </head>
  <body>
      <div class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass myOtherClass">span</span>
  </body>
</html>


30. Change border style and cursor

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
               $("div").click(function () {
                 $(this).css({ borderStyle:"inset", cursor:"wait" });
                  
               });
        });
    </script>
    <style>
      input { display:none;margin:10px; }
    </style>
  </head>
  <body>
    <body>
          <div>Click me</div>
          <input type="text" />
          <input type="text"/>
          <input type="text" />
    </body>
</html>


30. Change color for DIV

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").text("data").css("color", "red");
        
        
    });
    </script>
  </head>
  <body>
     <form>
      <input type="text" />
    </form>
     <div></div>
  </body>
</html>


30. Change CSS visibility to hide a tag

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
               $("div").click(function () {
                 $("div").css("visibility", "hidden");
                  
               });
        });
    </script>
    <style>
      input { display:none;margin:10px; }
    </style>
  </head>
  <body>
    <body>
          <div>Click me</div>
          <input type="text" />
          <input type="text"/>
          <input type="text" />
    </body>
</html>


30. Change submit button background and border

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       var input = $(":submit").css({background:"yellow", border:"3px red solid"});
    
       $("#result").text("jQuery matched " + input.length + " elements.");
        
    });
    </script>
  </head>
  <body>
     <form><input type="submit" /></form>
     <div id="result"></div>

  </body>
</html>


30. If the property name includes a "-", put it between quotation marks:

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("p").css({ "background-color":"yellow", "font-weight":"bolder" });
        });
    </script>
  </head>
  <body>
    <body>
           <p>asdf</p>
                 
    </body>
</html>


30. Looks for the class "selected" on 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");
               alert($("p:last").hasClass("selected").toString());
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p>A</p>
      <p>B</p>
      <p>C</p>
    </body>
</html>


30. Remove all the classes from 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:even").removeClass();
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello</p>
    </body>
</html>


30. Remove style class

<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");
       $("a").removeClass("test");
   });
    </script>
  </head>
  <body>
    <a href="http://wbex.ru/">wbex.ru</a>
  </body>
</html>


30. Remove the class "highlight" from 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:even").removeClass("highlight");
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello</p>
    </body>
</html>


30. Remove two classes

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               
              $("p:even").removeClass("selected highlight");
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello</p>
    </body>
</html>


30. To access the background color of a clicked div.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("div").click(function () {
                  var color = $(this).css("background-color");
                  alert(color);
                });

        });
    </script>
  </head>
  <body>
    <body>
           <div style="background-color:blue;">asdf</div>
                 
    </body>
</html>


30. Toggle the class "highlight" when a paragraph is clicked.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").click(function () {
                      $("p").toggleClass("highlight");     
            });
    
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello</p>
    </body>
</html>