jQuery: Introduction

JQuery is a popular JavaScript library. With jQuery, you can build more interesting and interactive web page easy. jQuery automate common tasks and simplify complicated writing code. jQuery have ability to assist in wide range of task. This is one reason this library become popular choice.

What JQuery Does

  • Access parts of page. jQuery offers a robust and efficient selector mechanism for retrieving exactly the piece of the document that is to be inspected or manipulated.
  • Modify the appearance of a page. jQuery can bridge CSS browser standard gap.
  • Alter the content a page. jQuery can modify texts, images,list, and entire of the HTML. All with a single easy-to-use API.
  • Respond to a user’s interaction with a page. The jQuery library have an elegant way to intercept a wide variety of events without the need to clutter the html code itself with event handlers.
  • Add animation. Implementing such interactive behaviors.
  • AJAX support. Retrieve information from server without refreshing a page.
  • Simplify common JavaScript task.

jQuery: Installation

You can get jQuery from the official jQuery website (http://jquery.com). May be you will get several jQuery versions at their website. Take the latest uncompressed version of the library.Actually, we don’t need any compilation. We just need to place jQuery library (with .js extension) on our site.

For practice, create a folder named “jquery” within www/test. Place jQuery library within it. May you get file named like jquery-1.2.3.js. To simplify, rename file become “jquery.js”.

For use it, we just call library like following code in our header html:

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

Ok, it’s time to try. Create a file named “myfirstjquery.html”. Enter following

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>My First JQuery</title>
     <link rel="stylesheet" href="mycss.css" type="text/css" media="screen">
     <script src="jquery.js" type="text/javascript"></script>
     <script src="myjs.js" type="application/javascript"></script>
   </head>

   <body>

   <div id="container">
     <H1>My First Song</H1>
     <div>Every children</div>
     <div id="song-1">
         <H2>1. Playgroup</H2>
         <p>This is very popular playgroup song</p>

         <div>
            <h3>Twinkle-Twinkle Little Start</h3>
            <div>
               <div>Twinkle-twinkle little start</div>
               <div>How I wonder what you are</div>        
               <div>...</div>        
            </div>
         </div>

         <div>
            <h3>Babablackship</h3>
            <div>
                <div>Babablackship have you any wool</div>
                <div>Yes sir, yes sir, three bag full</div>
                <div>...</div>
            </div>
         </div>
      </div>
    </div>

   </body>
   </html>

Then, create a CSS file named “mycss.css”. Enter following code:

   @charset "utf-8";
   /* CSS Document */

   body {
     font: 75% Arial, Helvetica, sans-serif;
   }

   h1 {
     font-size: 2.5em;
     margin-bottom: 0;
   }

   h2 {
     font-size: 1.2em;
     margin-bottom: .5em;
   }

  h3 {
    font-size: 1.0em;
    margin-bottom:0;
  }
  .lyric{
    margin: 0 2em;
   }

Ok, point your browser to http://localhost/test/jquery/myfirstjquery.html. You may get like this:

Result 1

jQuery: My First Code

After create simple page, we try to apply jQuery at the page. In this post, we will practice how to modify css action with jQuery.

We want to modify page in order to be like this:

Result 2

For this job, create a file named “myjs.js”. Enter following code:

  // JavaScript Document
  $(document).ready(
    function(){
	$('.lyric-text').addClass('lyric-full');
    }				  
  );

What mean? The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. In this case, jQuery find lyric-text class. Then, jQuery inject new class named “lyric-full”. This job use .addClass() method. So, we must add new class in our css, like this:

  .lyric-full {
   font-style: italic;
   background-color:#FFFFCC;
   border: 1px solid #FF0000;
   padding: 0.5em;
  }

Thus, open your mycss.css. Update like this:

  @charset "utf-8";
   /* CSS Document */

  body {
    font: 75% Arial, Helvetica, sans-serif;
  }

  h1 {
    font-size: 2.5em;
    margin-bottom: 0;
  }

  h2 {
    font-size: 1.2em;
    margin-bottom: .5em;
  }

  h3 {
    font-size: 1.0em;
    margin-bottom:0;
  }
  .lyric{
     margin: 0 2em;
  }
  .lyric-full {
    font-style: italic;
    background-color:#FFFFCC;
    border: 1px solid #FF0000;
    padding: 0.5em;
  }

Point your browser to http://localhost/test/jquery/myfirstjquery.html.

jQuery: Using Event Handler

We know, JavaScript have event handlers. Many handlers are available for user-initiated events, such as mouse clicks, key presses, load. In this post, we will see how to apply it.

In this practice, we use onload event at body. Like this:

   <body onload="lyricstyle();">

For this purpose, we must modify our myjs.js. Modify it become like this:

  // JavaScript Document
  $(document).ready();

  function lyricstyle(){
    $('.lyric-text').addClass('lyric-full');
  }

We create new function: lyricstyle(). We don’t put in $(document).ready(). What is impact? This causes our code to run after the page is completely loaded.


save

save

save