Monday, 14 March 2016

JQuery Tutorial


What is JQuery?


· Jquery is a light weight java script library.
· JQuery is cross browser.
· Easy to write compare to java script.

$(document).ready is a jquery event. It fires as soon as the DOM is loaded.
This event is fired before all the images, css are fully loaded.

$(window).load event fires when DOM and all content (images, css) loads.

What is DOM?
The HTML DOM (Document Object Model), when a web page is loaded, the browser creates a Document Object Model of that page.
The HTML DOM model is constructed as a tree of Objects like HTML, HEAD, Body, H1, P etc.



<script src="jquery cdn link">/script>


If above script loaded properly then in below line windows.JQuery will work otherwise document.write will work which will reference local jquery library.

<script>
window.JQuery || document.write("<script src='jquery-1.11.3.js'<\/script>");
</script>


JQuery Selectors: It allows to select and manipulte HTML tags or elements.

· ElementID
· Element Class Name
· Element Tag Name
· Element Attribute Value

JSON: Java Script Object Notation

It is a light weight data exchange format.
Convert from JSON object to string.

use stringify method

JSON array:

var arrayJSON = [


{


"fname":"Mark",


"County":"US",


"city":""


var result = JSON.stringify(dataJSON);



Convert JSON string to JSON array.
use parse method.
var result = JSON.parse(datastringJSON);


JQuery event delegation
It is a single event listener, allows to attach parent element.
For eg We can attach event on ul tag for all li.

JQuery Datatable:

DataTables is a plug-in for the JQury Javascript library which provide enhanced way to manage data on web page.

Below css and js file require to perform this.

//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js


Link above files in page and add below script:

$('#datatable').datatable();

2 comments:

  1. Good explanation of Jquery for beginners.
    Nice.

    ReplyDelete
  2. Good explanation on Jquery for beginners.
    Please post more on Jquery.

    ReplyDelete