jQuery for beginners

Written by Joe on Tuesday, February 2, 2010

jQuery is a Javascript library that is used to interact with HTML elements.  To get started with jQuery you first need to download the jQuery library at http://docs.jquery.com/Downloading_jQuery.  Save the file and add it to a directory on your webserver.  Next include the jQuery library in the <head> section of your html document and you're done!

Here is a simple example of how to use jQuery.  Simply copy the code, save it with the extension .html and open it in your browser.  When you click "Click Here!" a javascript alert box will popup and say "Hello, how are you?".

<html>

    <head>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">

                //jQuery code goes here
                $(document).ready(function() {
                    $("p").click(function() {
                        alert("Hello, how are you?");
                    });
                });

        </script>

    </head>

    <body>

        <!-- html goes here -->
        <p>Click Here!</p>

    </body>
</html>

Here is a little more complicated example.  This example asks the user to enter their name, then says hello to them.

<html>

    <head>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">

                //jQuery code goes here
                $(document).ready(function() {
                    $("a").click(function() {
                        var name = $("input#name").val();
                        alert("Hello "+ name +", how are you?");
                    });
                });

        </script>

    </head>

    <body>

        <!-- html goes here -->
        <label>Enter your name:</label>
        <input type="text" id="name">
        <a href="#">Click Here</a>

    </body>
</html>

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/javascript-jquery/2010-02-02/jquery-for-beginners/

OR Join Our Mailing List

* indicates required fields

Cheaper & more effective than traditional mail

Email marketing can return $43.62 for every dollar spent.

Contact Us Today

Post A Comment