JavaScript Tutorial/jQuery/DIV

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

Содержание

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

   <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").html("bold");
           $("p b").append(document.createTextNode("!!!")).css("color", "red");
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>

Hello

   </body>

</html></source>


30. Adds a border to divs that are not green

   <source lang="javascript">

<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>
asdf
   </body>

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
asdf
asdf
   </body>

</html></source>


30. Animates all hidden divs to show fastly in order

   <source lang="javascript">

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

</html></source>


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

   <source lang="javascript">

<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>
asdf
   </body>

</html></source>


30. Append to DIV

   <source lang="javascript">

<html> 

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

 </body>

</html></source>


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

   <source lang="javascript">

<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>
hey id
   </body>

</html></source>


30. Change DIV background

   <source lang="javascript">

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

 </body>

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
   </body>

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
   </body>

</html></source>


30. Click to add border

   <source lang="javascript">

<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.
asdf
sdf
df
sdf
asdf
asdf

 </body>

</html></source>


30. Click to change DIV tag color

   <source lang="javascript">

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


 </body>

</html></source>


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

   <source lang="javascript">

<html> 

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

Hello

").appendTo("body") 


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

   </body>

</html></source>


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

   <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:first").click(function () {
             $(this).fadeTo("slow", Math.random());
           });
       });
   </script>
 </head>
 <body>
   <body>

asdf

   </body>

</html></source>


30. Find all children of each div.

   <source lang="javascript">

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

         asdf

   </body>

</html></source>


30. Finds all divs adds all paragraphs

   <source lang="javascript">

<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>
asdf
asdf
asdf
asdf
   </body>

</html></source>


30. Get text from paragraph and set to DIV

   <source lang="javascript">

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

asdf

 </body>

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
asdf
asdf
   </body>

</html></source>


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

   <source lang="javascript">

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

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
   </body>

</html></source>


30. Set DIV color

   <source lang="javascript">

<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>
asdf
asdf
 </body>

</html></source>


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

   <source lang="javascript">

<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 = "" + this.id + "")");
            });
       });
   </script>
 </head>
 <body>
   <body>
A
B
C
   </body>

</html></source>


30. Tie a one-time click to each div.

   <source lang="javascript">

<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>
asdf
   </body>

</html></source>


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

   <source lang="javascript">

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

   </body>

</html></source>


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

   <source lang="javascript">

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

   </body>

</html></source>


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

   <source lang="javascript">

<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>
asdf
asdf
asdf
asdf
   </body>

</html></source>


30. Wrap a jQuery object div around all of the paragraphs

   <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").wrap($(".doublediv"));
               
        
       });
   </script>
   <style>
     .doublediv { color:red; }
   </style>
   
 </head>
 <body>
   <body>

World

asdf
   </body>
</html></source>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/DIV&oldid=9653»