jQuery - SPLessons
boy2 Chapter 6

jQuery Application

jQuery - SPLessons

jQuery Application

shape Description

jQuery Application chapter gives an idea on how to create a basic application using jQuery.

The first thing to include in jQuery Application is the jQuery library to HTML page with a <script> tag. As jQuery is nothing but a JavaScript library, jQuery code can be placed in the <script> element. However, to place in an external JavaScript file, which is preferred, remove this part.


<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

Now, use jQuery to manipulate this jQuery Application, and typically follow these below steps of action

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <title>jQuery First Application</title>
  </head>

  <body>
     <h1>Welcome to SPLessons</h1>
     <div>
        <p>click on this paragraph</p>
     </div>
  </body>
</html>

//wait until document ready event has fired.
$(document).ready(function(){

//select the HTML element with 'div' tag.
var theDiv = $("div");
  

//Traverse to 'p' element inside 'div' tag.
var theParagraph = theDiv.find("p");
     

//Add the click event handler on selected 'p' element.
theParagraph.click(function(){
       

//Modify the attributes and CSS styles of 'p' element. 
theParagraph
         .html("This is a paragraph")
         .css({"background-color": "#00A9EC", "font-size": "200%"});
    
   });
});

In the above jQuery example the “p” is a jQuery selector that selects all the paragraphs. The paragraph text in the example above is given color automatically when the document is ready and performs some the action when the user clicks on the paragraph text.

Output:

Summary

shape Key Points

jQuery Application draws out the following important points.

  • Include jQuery library in the <script> in HTML head section.
  • Add document ready function and event handling functions with required css style.