Change DIV background : DIV « jQuery « JavaScript Tutorial

JavaScript Tutorial
1. Language Basics
2. Operators
3. Statement
4. Development
5. Number Data Type
6. String
7. Function
8. Global
9. Math
10. Form
11. Array
12. Date
13. Dialogs
14. Document
15. Event
16. Location
17. Navigator
18. Screen
19. Window
20. History
21. HTML Tags
22. Style
23. DOM Node
24. Drag Drop
25. Object Oriented
26. Regular Expressions
27. XML
28. GUI Components
29. Dojo toolkit
30. jQuery
31. Animation
32. MS JScript
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript DHTML
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript Tutorial » jQuery » DIV 
30. 135. 2. 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(24).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>
30. 135. DIV
30. 135. 1. Append to DIV
30. 135. 2. Change DIV background
30. 135. 3. Click to add border
30. 135. 4. Click to change DIV tag color
30. 135. 5. Set DIV color
30. 135. 6. Get text from paragraph and set to DIV
30. 135. 7. Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
30. 135. 8. Animates all divs to slide down and show themselves over 600 milliseconds.
30. 135. 9. Animates divs between dividers with a toggle that makes some appear and some disappear.
30. 135. 10. Sets id for divs based on the position in the page.
30. 135. 11. Bind a single click that adds the div id to its text.
30. 135. 12. Add html to div then do further manipulations to the inserted html.
30. 135. 13. Turn the div with index 2 blue by adding an appropriate class.
30. 135. 14. Change the color of all divs then put a border around only some of them.
30. 135. 15. Change the color of all divs then put a border two specific ones.
30. 135. 16. Adds a border to divs that are not green
30. 135. 17. Finds all divs adds all paragraphs
30. 135. 18. Find all children of each div.
30. 135. 19. Locate all the divs after the first and give them a class.
30. 135. 20. Tie a one-time click to each div.
30. 135. 21. Hides the divs when clicked over 2 seconds, then removes the div element when its hidden.
30. 135. 22. To set the width of each div on click to 30px plus a color change.
30. 135. 23. To set the height of each div on click to 30px plus a color change.
30. 135. 24. Wrap a jQuery object div around all of the paragraphs
30. 135. 25. Animates all hidden divs to show fastly in order
30. 135. 26. Hides the divs when clicked, then removes the div element when its hidden.
30. 135. 27. Creates a div element (and all of its contents) dynamically, and appends it to the body element.
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.