Client-side development 1 - jQuery

           
         jQuery is a fast, small, and feature rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy to use API that works across a multitude of browsers.
         A framework is something that usually forces a certain way of implementing a solution, whereas jQuery is just a tool to make implementing what you want to do easier.

Features provided by jQuery

Html/DOM Manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content.
CSS Manipulation: It have predefined css() method for manipulate style for any Html elements.
Event Handling: It support event handling like click mouse button.
Built-in Animation: It have predefined method "animate()" for create custom animation on web-page.
Ajax Support: It support ajax, can develop a responsive and feature-rich site using AJAX technology.

Advantages of jQuery

- Its light weight when compared to other javascript frameworks
- It has a wide range of plugins available for various specific needs

- It is easier for a designer to learn jQuery as it uses familiar CSS syntax.

Disadvantages of jQuery

- One of the main disadvantages of jQuery is the large number of published versions in the short time.
- jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS.
- If jQuery is improperly implemented as a Framework, the development environment can get out of control.

How pages load to the browser?

         A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

jQuery Selectors

1) element Selector:

The jQuery element selector selects elements based on the element name.
                
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

2) #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
                
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

3) .class Selector
The jQuery .class selector finds elements with a specific class.
   
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

          In some additional advanced web applications, would like additional management than simply referencing many component varieties or one with a particular ID. An web page will contain many parts, therefore it would possibly not even apprehend the elements' names. To complete this quality, jQuery and CSS have advanced selectors that allow to select parts supported location within the page or by descendants or maybe by adjacent siblings. it would not apprehend the IDs, categories or names of those parts, however still able to question them supported hypertext mark-up language location. within the example of an inventory of orders for a client, this is able to profit, do not know the IDs for every order component. Instead, will be able to reference them supported the instrumentation that holds them or their location to a different component.

       Filter selectors area unit thought-about advanced selectors that permit you traverse hypertext mark-up language components supported proximity or location. There area unit various filter selectors, however you'll run into many additional usually than others.

Document Object Model (DOM)

jQuery Event Methods

$("p").click(function(){
 $(this).hide(); });

$("p").dblclick(function(){
 $(this).hide(); });

$("#p1").mouseup(function(){

 alert("Mouse up over p1!"); }); 

Advanced Features
'this' - (this) object refers to the current object within the scope.
Data attributes
Refactoring with DOM objects
Target on specific elements with generic names
Filters
CSS manipulation 
Animation

REFERENCES
[1] https://www.w3schools.com/jquery/jquery_intro.asp
[2] https://learn.jquery.com/about-jquery/

[3] https://www.tutorialspoint.com/jquery/jquery-dom.htm
[4] https://slideplayer.com/slide/9324760/