jQuery in One Example!

Here we are trying to cover jQuery main features, such as Selector, DOM manipuation, Events and Effects in one example.

One Example

Here we will try to cover what jQuery mainly does in one example!

We will do the following:

  • Execute jQuery when document is ready
  • Find an HTML element
  • Modify the appearance of the selected element
  • Modify element dimension
  • Change the content
  • Add event listener mouseover/mouseout event
  • Add effect hide effect
  • Add a new element

Code: Simple HTML & CSS

The sample code below shows an HTML file that contains one <div> element. The class attribute is pointing to .simple CSS style class='simple'.

index.html
 <!-- CSS class, controls the appearance of the HTML element -->
    <style type="text/css">
    .simple{
        width:200px;
        text-align:center;
        border:1px dashed #333;
    }
    </style>
        
    <!-- jQuery JS file -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript">
    </script>
    
    <!-- one HTML element -->
    <body>
            <div id="xDiv" class="simple">Simple HTML Element</div>
    </body>
    
Code Output
Simple HTML Element

Code: Execute jQuery when document is ready

Bacuase jQuery is mainly dealing with DOM "HTML elements", we need to make sure that document object is ready. We can do so by using .ready() function. Usually the rest of jQuery code will go within .ready() handler function

 <script type="text/javascript">
        $( document ).ready(function() {
            alert("test"); //just for test
        });
    </script>
    

Code: Find an HTML element

In this example we have one HTML element of type div which we want jQuery to find <div id="xDiv" class="simple">Simple HTML Element</div>. However there are more than one way to tell jQuery to find this element

All of the below selector are returning the same element

 <script type="text/javascript">
        $("div") //1.  return all elements of type div
        $("#xDiv") // 2.  return element with id="xDiv"
        $(".simple") // 3.  return elements with class="simple"
    </script>
    

Code: Modify the appearance

We will change the background color

   $("#xDiv").css("background-color","#ffcc00");
    
Code Output
click to change the background color
Simple HTML Element

Code: Modify element dimension

We will change the div width to 300px

 $("#xDiv").width('300px');
    
Code Output
click to change the width
Simple HTML Element

Code: Change the content

We will change the div content "text" to "Content changed"

 $("#xDiv").text("Content changed");
    
Code Output
click to change the content
Simple HTML Element

Code: Add event listener (mouseover/mouseout listener)

We will add event listener to the div so when the mouse is over the element the text color will change and when the mouse is out the color will go back to black

 $("div").mouseover( function() {
        $("#xDiv").css("color","#0066ff");
    });
    $("div").mouseout( function() {
        $("#xDiv").css("color","#000");
    });
    
Code Output
Move the mouse over the div
Simple HTML Element

Code: Add effect (hide effect)

We will add event listener to the div so when the mouse is over the element the text color will change and when the mouse is out the color will go back to black

 $("div").click( function() {
        $(this).hide();
    });
    
Code Output
Click on the dive to hide it
Simple HTML Element

Code: Add new element <div>

Sometime you need to dynamically add a new element, we can do this easily using jQuery.

 $("body").append($("<div>").text("new HTML div element").addClass("simple"));
    
Code Output
Click on the dive to add a new div
Simple HTML Element

Source Code @ github

jQuery basic