Basics of jQuery

Create an HTML page:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="http://dotnetinterviewcracker.blogspot.com/">Dot Net Interview Cracker</a>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
 
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "Thanks for visiting!" );
        });
    });
 
    </script>
</body>
</html>

The src attribute in the <script> element must point to a copy of jQuery. You can download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file.

You can use jQuery's CDN from MediaTemple:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Launching Code on Document Ready

To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {
    // Your code here.
});

For example, inside the ready event, you can add a click handler to the link:

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Thanks for visiting!" );
    });
});

Save your HTML file and reload the test page in your browser. Clicking the link should now first display an alert pop-up, then continue with the default behavior of navigating to http://dotnetinterviewcracker.blogspot.com.
For click and most other events, the default behavior can be prevented by calling event.preventDefault() in the event handler:

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "As you can see, the link no longer took you to dotnetinterviewcracker.blogspot.com" );
        event.preventDefault();
    });
});

Complete Example:

The following example illustrates the click handling code discussed above, embedded directly in the HTML <body>.

Note: It is usually better approach to place your code in a separate JS file and load it on the page with a <script> element's src attribute.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="http://dotnetinterviewcracker.blogspot.com/">Dot Net Interview Cracker</a>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
 
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "As you can see, the link no longer took you to dotnetinterviewcracker.blogspot.com" );
            event.preventDefault();
        });
    });
 
    </script>
</body>
</html>

Adding and Removing an HTML class

Note: You must place the remaining jQuery examples inside the ready event so that your code executes when the document is ready to be worked on.

Step 1: Add some style information into the <head> of the document:

<style>
    a.test {
        font-weight: bold;
    }
</style>

Step 2: Add the .addClass() call to the script: 

$( "a" ).addClass( "test" );

All <a> elements are now bold.

Step 3: To remove an existing class, use .removeClass():

$( "a" ).removeClass( "test" );

Introducing Special Effects

jQuery provides some handy special effects to help you make your web sites stand out. Ex.

$( "a" ).click(function( event ) {
    event.preventDefault();
    $( this ).hide( "slow" );
});

This effect slowly disappears the link when clicked.

Pages

Basics of jQuery

No comments:

Post a Comment