Client-side development 1 - jQuery

                   What is 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. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

                Features of jQuery

DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.

Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.

Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.

Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).

Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

              The Advantages of jQuery

The main advantage of jQuery is that it is much easier than its competitors. You can add plugins easily, translating this into a substantial saving of time and effort. In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).

The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking.

Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

• jQuery is flexible and fast for web development
• It comes with an MIT license and is Open Source
• It has an excellent support community
• It has Plugins
• Bugs are resolved quickly
• Excellent integration with AJAX

           The Disadvantages of jQuery

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google (attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

• 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 the jQuery handles the issues related to partial page loads to the browser?

In Jquery / Javascript how to handle updates for partial (nested) web page view Inside a single View on browser back, forward & refresh button events? Or simply put how to handle browser back or forward button clicks for content displayed dynamically or with ajax calls?

Suppose when we want to load different views conditionally inside a single view. In other words, we are rendering nested view inside a single view/page based on menu items click in the parent view. In this case, if I click on the back button or forward button of the browser, it will not work as usual when we navigate from one page to another in web application and the way it saves the navigation history of different pages.

So for the case, when we are on the same page, but we are setting the nested view dynamically based on condition, we need some identifying criteria for each different nested view in the same page/View.

For identification purpose, we use the concept of Fragment URLs. In simpler words, we will use the concept of hash-based URLs which contain the character of sequences preceded by # at the end of actual Url of page/View. For each different nested view inside a single view which is set conditionally, we can append different character sequences preceded by #. The benefit of using this technique is that these are stored in the browser history and with this, if we click on back & forward buttons, the page is not refreshed and only the characters sequences changes, that we can handle partial view updates on the Page on browser events.

                    jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

The .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

   More Examples of jQuery Selectors

• 
  

• 
  

jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.


DOM in jQuery

One of the most important aspects of JavaScript and thereby jQuery, is manipulation of the DOM. DOM stands for Document Object Model and is a mechanism for representing and interacting with your HTML, XHTML or XML documents.

Purpose of DOM

The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM Elements

The Document Object Model (DOM for short) is a representation of an HTML document. It may contain any number of DOM elements. At a high level, a DOM element can be thought of as a "piece" of a web page. It may contain text and/or other DOM elements.

             jQuery event handler

Events are often triggered by the user's interaction with the web page, such as when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, the mouse pointer is moved etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events.

jQuery enhances the basic event-handling mechanisms by offering the events methods for most native browser events, some of these methods are ready(), click(), keypress(), focus(), blur(), change(), etc.

Example:

• <script type="text/javascript">

• $(document).ready(function(){

•     // Code to be executed

•     alert("Hello World!");

• });

• </script>

Note: The $(document).ready() is an event that is used to manipulate a page safely with the jQuery. Code included inside this event will only run once the page DOM is ready i.e. when the document is ready to be manipulated.

In general, the events can be categorized into four main groups — mouse events, keyboard events, form events and document/window events.

Declare jQuery event handlers outside the $(document).ready() function

If you only need to access callMe() from within $(document).ready(function() { }), then it's fine to put the function there, and offers some architecture benefits because you can't access the function outside of that context. If you need to use the callMe() function outside of document ready though, you need to define the callMe() function outside of that context.

function callMe() {
  // Do Something
}

$(document).ready(function() {
  callMe();
});

Advanced features provided by jQuery

The simplicity, advanced features and strong support are common arguments for developers preferring jQuery against other JavaScript-frameworks. In fact, jQuery is one of the most popular JavaScript frameworks, with powerful tools that can significantly improve the user’s interaction with Web applications.

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code.

References:

https://jquery.com/

https://www.tutorialspoint.com/jquery/jquery-overview.htm

https://www.lorecentral.org/2017/11/advantages-disadvantages-jquery.html

https://blog.webnersolutions.com/handling-browser-back-or-forward-button-clicks-for-ajax-content

https://www.tutorialrepublic.com/jquery-tutorial/jquery-events.php

https://stackoverflow.com/questions/6780890/jquery-function-inside-document-ready-function