jQuery API - Part 1

jQuery has many functions, both synchronous and asynchronous which reduce the task of the programmer and are

• Efficient
• Reliable
• Fast
• Scalable

For getting the immediate ancestor of an element use
$("#element_id").parent();

jQuery implements method chaining which means that all jQuery functions that work on a selector process the element and returns the new jQuery variable i.e., $("#element_id")

The benefit of jQuery JavaScript library having method chaining is that if you want to perform 10 functions on a single element, it becomes tedious to create 10 new variables assign value to each of them and storing the results in a different variable.

So, to get the grandfather of an element, use
$("#element_id").parent().parent();

To get / set attributes of an HTML element, use attr() method. Example:
If you want the value of the color to change from blue to red from a <p> element, use
let ret = $("#div1").attr("color","red")

If you want to get the current background color of a button having id="submit", use
let ret = $("#submit").attr("background-color");

If you want to set the value of a text field through jQuery, use
let ret = $("input[type=text]").val("Gaurav")

If you want to get a value of a text field through jQuery, use
let ret = $("input[type=text]").val();

If you want to get the in[nerHTML of an HTML element, use
let ret = $("#div1").html()

If you want to set the innerHTML of an HTML element, use
let ret = $("#div1").html("<span>Small Text</span>")

Here, in all the above 6 cases "ret" will contain the jQuery object of that respective element(s) marked by the selector.

AJAX in jQuery:

The jQuery object supports a function namely $.ajax() which uses callback mechanism. Suppose a want to make a request to a server for updating a footer of a web page for contact number change:we can use the Jquery AJAX function to just update the footer and not the whole page. This will save lots code, code management, fast functionaning of website, reduces network congestion,etc.

  
$.ajax({
	method: 'GET', //or "POST'
	data: form1.serialize(),
	url: 'http://destination_url/',
	async: true
}).success(function(req,res){
	console.log(res);
}).error(function(err){
	throw err;
});

Let us understand simple code step-by-step:

The jQuery object $ contains an ajax method defined in that class in the jQuery library and accepts only one parameter that describes the request completely in object type.

There are four properties for that AJAX call:

1. method - Defines the fully capital name of the HTTP method for sending the request
2. data - The data to be sent in either XML or JSON format
3. url - The uRL with an optional port numbre which idenfies the port on which the program is running
4. async - IF true, the AJAX request-respomnse will run in the background and either success or error callback functions will be called on completion of HTTP session

The ajax() function returns the response object to the success() function with the following properties: request and response.
The reponse property is a object containg various information about the response given back to the client.
For example res.responsText will return the response as plain text.
res.responseHTML will return the processed HTML markup.

The error() function is called whenever there is a error either on the client or on the server side. It simply calls the cllabck function which receives one err object and inside that function we can throw that error or process it or log int in the console.

The find() function

The find() function searches for the closest HTML element in DOM tree from the current HTML element which is specified by the selector.
For example:
If there are three tables in an HTML file and there are 4 rows i.e., 4 <tr> tags and 4 columns i.e., 4 <td> tags
Then the code
$("td.last").find("tr") will be the parent element that is the fourth row <tr> tag.
Again to support method chaining, it will return a jQuery object with the selector as the parameter tothis.

The "this" keyword

jQuery maintains the variable which called the jQuery function and stores it in a variabvle inside the function.
Even callback functions have access to the this variable. Actually, this is an object denoted by $(this)
$(this) also supports method chaining.

To create a blank HTML element having only attributes or sometimes no attriburtes and no content, we simply need to write
let jQueryobj = $("<div />");
This will create a blank div tag which is not yet in the DOM

To include it in the DOM, we use $(document).append(jQueryobj);