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();
Protected by Copyscape

Comments

  1. Good explanation of Jquery for beginners.
    Nice.

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

    ReplyDelete

Post a Comment

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

Popular

Top 8 C# 6.0 Features

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX

What is Cloud Computing - A guide for beginners