PHP 247
September 05, 2010, 02:38:49 PM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
 

Pages: [1]
Print
Author Topic: Begin Jquery from zero !  (Read 219 times)
lamnhatha_2010
Newbie
*
Posts: 7

Thank You
-Given: 0
-Receive: 0


lamnhath_2010
View Profile WWW Email
« on: April 03, 2010, 10:37:34 AM »


I started to learn jquery from zero, but it is easy to understand. JQuery is a platform to support programmers in developing applications on the web platform. JQuery's slogan is "Write less, do more”.
First step, download file jquery, Current Release is 1.3.2 from
http://docs.jquery.com/Downloading_jQuery

And now we learn how to use jQuery. Create an HTML document with the following contents:

Code:
<html>
  <head>
    <script type="text/javascript" src="path_to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

You must point to the path where you save the file jquery. If the same directory as the HTML file you can use
Code:
<script type="text/javascript" src="jquery.js"></script>
Copy the code below and insert into your HTML document. Our JQuery code will be placed inside this function, they will be executed when the document is ready:

Code:
$(document).ready(function(){
   // your Jquery code from here
 });

For example:

Code:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){
   $("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();
 });
     
    </script>
  </head>
  <body>
    <a href="http://google.com/" class="clickme">I give a message when you leave</a>
   <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
   <a href="http://microsoft.com/">I'm a normal link</a>
 
  </body>
  </html>
One more example!

Code:
<html>
<head>
  <script src="jquery.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $("button").click(function () {
      $("p").toggle();
    });

  });
  </script>
 
</head>
<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>
</body>
</html>

From now you can study with a lot effect at: http://docs.jquery.com/Effects.
There are many examples, demos and full code for you learning!

By a little guide with the way that I understand, hopefully you will enjoy JQuery 
Logged
Pages: [1]
Print
Jump to:  

Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC
Note, by Smoky