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

Some basic Jquery implementation:

JQuery to enable and disable anchor link:

//To disable anchor click

$('#anchorSubmit').css('pointer-events', 'none');

//To enable anchor click

  $('#anchorSubmit').css('pointer-events', 'all');

JQuery to enable and disable button:

//To disable button
$('#btnLogin').attr('disabled', 'disabled');
//To enable button
$('#btnLogin'). removeAttr('disabled');

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

Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks