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 thoughts on “JQuery Tutorial”

Leave a Comment

RSS
YouTube
YouTube
Instagram