JavaScript DHTML/jQuery/DIV

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

Содержание

Add html to div then do further manipulations to the inserted html.

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



Adds a border to divs that are not green

  

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



Animates all divs to slide down and show themselves over 600 milliseconds.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document.body).click(function () {
              if ($("div:first").is(":hidden")) {
                $("div").slideDown("slow");
              } else {
                $("div").hide();
              }
            });

        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
    </body>
</html>



Animates all hidden divs to show fastly in order

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#showHandler").click(function () {
              $("div:eq(0)").show("fast", function () {
                $(this).next().show("fast", arguments.callee); 
              });
            });
            $("#hideHandler").click(function () {
              $("div").hide(2000);
            });
        });
    </script>
  </head>
  <body>
    <body>
      <button id="showHandler">Show</button>
      <button id="hideHandler">Hide</button>
    
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </body>
</html>



Animates divs between dividers with a toggle that makes some appear and some disappear.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $("button").click(function () {
              $("div:not(.still)").slideToggle("slow", function () {
                
               
              });
            });

        });
    </script>
  </head>
  <body>
    <body>
        <button>Toggle</button>
        <div>asdf</div>
    </body>
</html>



Append to DIV

     
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").html("<b>bold</b> not bold");
            $("div b").append(document.createTextNode("!!!")).css("color", "red");
        });
    </script>
  </head>
  <body>
    <body>
      <DIV></DIV>
  </body>
</html>



Bind a single click that adds the div id to its text.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div[id]").one("click", function(){
                  var idString = $(this).text() + " = " + $(this).attr("id");
                  $(this).text(idString);
            });
        });
    </script>
  </head>
  <body>
    <body>
      <div id="hey">hey id</div>
    </body>
</html>



Bind mouse over and out event to div tag

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
$(document).bind(
  "ready",
  function() {
    $("div").bind("mouseover",function() {
        $(this).addClass("myMouseOver");
      }
    );
    $("div").bind("mouseout",function() {
        $(this).removeClass("myMouseOver");
      }
    );
    $("div").bind("click",function() {
        if ($(this).hasClass("myMouseOn")) {
          $(this).removeClass("myMouseOn");
        } else {
          $(this).addClass("myMouseOn");
        }
      }
    );
    
  }
);
    </script>
    <style type="text/css">
div {
    border: 1px solid rgb(200, 200, 200);
    width: 10px;
    height: 10px;
    margin: 5px;
    float: left; 
}
div.myMouseOver {
    background: red;
}
div.myMouseOn {
    background: yellow;
}
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>



Change DIV background

     
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           function colorEm() {
              var $div = $("div");
              $div.css("background", "red");
              $div.slice(2, 4).css("background", "yellow");   
           }
           $("button").click(colorEm);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
      <button>Click the button</button>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
  </body>
</html>



Change the color of all divs then put a border around only some of them.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("color", "red");
        });
    </script>
 
  </head>
  <body>
    <body>
         <div class="middle">asdf</div>
         <div>asdf</div>
    </body>
</html>



Change the color of all divs then put a border two specific ones.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("div").css("background", "#b4b0da")
               .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
               })
               .css("border", "3px double red");
        });
    </script>
 
  </head>
  <body>
    <body>
         <div class="middle">asdf</div>
         <div>asdf</div>
    </body>
</html>



Click to add border

     
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("div").one("click", function () {
              $(this).css({"border-style": "inset", cursor:"default"});
              
           });
        });
    </script>
  </head>
  <body>
    <body>
      Press each to see the text.
      <div>asdf</div>
      <div>sdf</div>
      <div>df</div>
      <div>sdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <p></p>
  </body>
</html>



Click to change DIV tag color

     

<html>
  <head>
    <style>
      div { width:50px; height:40px; margin: 5px; float:left;background:red; }
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
           $("div:visible").click(function () {
             $(this).css("background", "yellow");
          });
    });
    </script>
  </head>
  <body>
 
      <div></div>
      <div style="display:none;"></div>
      <div></div>
      <div></div>
      <div style="display:none;"></div>
  </body>
</html>



Creates a div element (and all of its contents) dynamically, and appends it to the body element.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          
            $("<div><p>Hello</p></div>").appendTo("body")
 

        });
    </script>
  </head>
  <body>
    <body>
       <form>
       <input type="radio" name="newsletter" value="Hot Fuzz">adf</input>
       </form>

    </body>
</html>



Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
            $("p:first").click(function () {
              $(this).fadeTo("slow", Math.random());
            });
        });
    </script>
  </head>
  <body>
    <body>
      <p><span>asdf</span></p>
    </body>
</html>



Find all children of each div.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
               $("div").children().css("border-bottom", "3px double red");
                    
        });
    </script>
  </head>
  <body>
    <body>
        <div id="container">
        <div>
          asdf
        </div>
        </div>
          
    </body>
</html>



Finds all divs adds all paragraphs

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
           
            
    $("div").add("p")
            .css("background", "yellow");

                    
        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          
    </body>
</html>



Get text from paragraph and set to DIV

     
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var str = $("p:first").text();
            $("div").html(str);
        });
    </script>
  </head>
  <body>
    <body>
      <p>asdf</p>
      <DIV></DIV>
  </body>
</html>



Hides the divs when clicked over 2 seconds, then removes the div element when its hidden.

  
<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).hide(2000, function () {
                $(this).remove();
              });
            }); 
        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div><div>asdf</div><div>asdf</div><div>asdf</div>
    </body>
</html>



Hides the divs when clicked, then removes the div element when its hidden.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              for (var i = 0; i < 5; i++) {
                $("<div>asdf</div>").appendTo(document.body);
              }
              $("div").click(function () {
                $(this).hide(2000, function () {
                  $(this).remove();
                });
              });
        });
    </script>
  </head>
  <body>
    <body>
    </body>
</html>



Locate all the divs after the first and give them a class.

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



Set DIV color

     
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("div").css("color", "red").add("p").css("background", "yellow");
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
  </body>
</html>



Sets id for divs based on the position in the page.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("div").attr("id", function (arr) {
                  return "div-id" + arr;
                 })
                .each(function () {
                  $("span", this).html("(ID = "<b>" + this.id + "</b>")");
             });
        });
    </script>
  </head>
  <body>
    <body>
      <div>A<span></span></div>
      <div>B<span></span></div>
      <div>C<span></span></div>
    </body>
</html>



Switch class when clicking the div tag

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
$(document).bind(
  "ready",
  function() {
    $("div").bind(
      "mouseover",
      function() {
        $(this).addClass("myMouseOver");
      }
    );
    $("div").bind(
      "mouseout",
      function() {
        $(this).removeClass("myMouseOver");
      }
    );
    $("div").bind(
      "click",
      function() {
        if ($(this).hasClass("myMouseOn")) {
          $(this).removeClass("myMouseOn");
        } else {
          $(this).addClass("myMouseOn");
        }
      }
    );
    
  }
);
    </script>
    <style type="text/css">
div {
    border: 1px solid rgb(200, 200, 200);
    width: 10px;
    height: 10px;
    margin: 5px;
    float: left; 
}
div.myMouseOver {
    background: red;
}
div.myMouseOn {
    background: yellow;
}
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>



Tie a one-time click to each div.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        
            
                $("div").one("click", function(){
                  alert("clicked.");
                });
               

        });
    </script>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  
</style>
  </head>
  <body>
    <body>
          <div>asdf</div>
                 
    </body>
</html>



To set the height of each div on click to 30px plus a color change.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        
               
                    $("div").one("click", function () {
                      $(this).height(30)
                             .css({cursor:"auto", backgroundColor:"green"});
                    });
               

        });
    </script>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  
</style>
  </head>
  <body>
    <body>
          <div></div>
          <div></div>
                 
    </body>
</html>



To set the width of each div on click to 30px plus a color change.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        
               
                  $("div").one("click", function () {
                      $(this).width(30)
                             .css({cursor:"auto", "background-color":"blue"});
                  });
               

        });
    </script>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  
</style>
  </head>
  <body>
    <body>
          <div></div>
          <div></div>
                 
    </body>
</html>



Turn the div with index 2 blue by adding an appropriate class.

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("div").eq(2).css("color","blue");
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
    </body>
</html>



Wrap a jQuery object div around all of the paragraphs

  

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("p").wrap($(".doublediv"));
                
         
        });
    </script>
    <style>
      .doublediv { color:red; }
    </style>
    
  </head>
  <body>
    <body>
         
          <p>World</p>
          <div class="doublediv">asdf<div>
                 
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/DIV&oldid=2959»