Getting Started with jQuery

-

Background:

With the popularity of World Wide Web, scripting languages likeJavaScript became very popular. Mostly because it allows to read and write values in different DOM (Document Object Model) elements, handle different events without even visiting the server. In short without JavaScript web-based programming is incomplete.

Along with all these advantages, there are a few disadvantages of JavaScript as well, cross browser behavioural difference, complex syntax are a few disadvantages to name.

Introduction:

In 2006 jQuery was introduced, which not only addressed the disadvantages of JavaScript but also added many more features.To start with the introduction of jQuery, first we have to know what jQuery is. Actually it is not a language but a library of well written JavaScript code.

Let’s have a look at a few advantages we get by using jQuery:
  • Cross-browser behaviour of the client side code remains same
  • Amount of code we need to write to achieve a specific functionality in less compared to JavaScript
  • Syntax are a lot simpler
  • JSON parsing
  • We can extend jQuery to create our own UI Component

Apart from the above, there are many more advantages some are:
  • Interacting with the server through asynchronous calls
  • Basic animation in the browser
  • Faster execution

How to enable jQuery?

jQuery is free, open source software Dual-licensed under the MIT License and the GNU General Public License. We can simply download from the internet. Microsoft has integrated jQuery officially into its IDE Visual Studio from the 2010 version onwards and jQuery intellisense and debugging is available in Visual Studio now.

It comes with a single file that includes all its interfaces, including DOM, events and Ajax Function. To use jQuery in our code, all we have to do is adding the jQuery file as script source to the HTML page. We can either download the file and add that as script source in our HTML file, or use CDNas the source in the HTML.

Download jQuery:

We can download the jQuery file from jQuery.com. There are development version and minified versions (compressed), any one of that can be downloaded and referred like below:
<head>
<scriptsrc="jquery-3.3.1.min.js"></script>
</head>

Minified version is smaller in size, so loading time is less, hencecan be used for better performance in production environment. But for development and testing purpose generally normal uncompressed and readable version is used to get more precise error and better understanding of the library.

The CDN:

Both Google and Microsoft host jQuery which we can directly refer in our page like:

The Google CDN:
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

The Microsoft CDN:
<head>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>


The Syntax:

While programming with jQuery the basic goal is to select one/multiple DOM element and the do some action on that. This action can be:
  • Reading value of that element
  • Writing value to that element
  • Change the CSS of that element
  • Manipulate different HTML attributes of that element
  • Assign different actions for that element

The sign $ denotes a jQuery constructor. It can be written either as $() or jQuery(). All jQuery constructors must start with the $() or jQuery().

So the basic jQuery syntax is $(selector).action().

In the above syntax,
  • $ Shortcut is basically used to define/access jQuery.
  • Selector is basically a query to find one/many HTML element.
Here are a few examples:

•   varmyValue = $("#test").val();//get the value in the HTML element with id “test”
•   $(“.test”).hide();//hide all HTML elements that have a css class “test”
•   $("#test").click(function(){
//code here
    })// do certain things on the click event of HTML element with id “test”



The Ready Event

As discussed already, jQuery is used to access the DOM elements. So what will happen if we try to use jQuery code to access a DOM element even before the DOM is loaded? The answer is simple this will simply not work.

In order to ensure that our jQuery code executes after all the DOM element is loaded we have to write all the jQuery code within the $(document).ready function.

Let’s have a look at the example below,
<html>
<head>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<divid="TESTdIV"></div>
</body>
</html>
<scripttype="text/javascript">
$(document).ready(function()
    {
$("#TESTdIV").text("Hello, world!");    
    });
</script>

The above code will wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

In real world situation where we may have to work with a long list of things to be done once the DOM is loaded we may opt to make that as a separate function and call from the ready event. The example below demonstrates that,
<scripttype="text/javascript">
functioninit(){
$("#TESTdIV").text("Hello, world!");
    }

$(document).ready(init);
</script>


The $(document).ready have even a shorter syntax like :
$(function(){
// jQuery methods go here...
});

Next

I hope by now we have got the basic understanding about jQuery, what it is, what advantages we can get out of it, and how to start using jQuery and what are the things we can achieve by using jQuery.

Next we will see different ways to select DOM elements so that we can playing around with DOM elements

Comments

Post a Comment

Popular posts from this blog

Handling Events in jQuery – Few Advanced Notes and Faqs

-
Background: We have already discussed about handling client events in jQuery (see earlier post ). Obviously there are more things about jQuery events like binding client events to DOM element which are created dynamically, Cancelling the action of an event conditionally etc. Let’s have a look at few advanced topics on jQuery events. Adding event handler to future elements: In my earlier post we already know about the bind() and unbind() methods provided by jQuery which is used to attach and detach event handlers to various elements on the page. Instead of bind() we can also use the click()/dblclick() methods to add different event handlers. We declare these things in the ready() event because we need that element to be loaded before we attach any event handler to that element. Since we can create DOM element dynamically, can we use this technique to attach event to the element. The answer is no, because when the dynamically created element is not yet present in the DOM when th
Read more

Ways to select DOM element(s) - a guide to jQuery Selectors

-
Introduction: I hope you are now familiar with the basics of jQuery. You can go through my earlier post in case you are new to jQuery, so that you are familiar with the basics and know about how it can be used and the different things we can achieve using jQuery. A very common task using jQuery is selecting DOM element to get/set value, change the element’s appearance, get/set different HTML attributes or may be associate an event with that element. Let’s look a closure look at different ways to select DOM elements. jQuery Selector: There are different ways to select DOM element(s) using jQuery. We can select element(s) using the Id, class, HTML attributes, attribute value and much more. Basically jQuery selector is based on the CSS Selectors (the way CSS selects DOM element) but it has some own custom selectors. Let’s look at some selectors along with examples. The ID selector: It uses the Id attribute of the element. As we know that id of an element is unique within the
Read more

Let's traverse through DOM Tree - Few advanced notes on jQuery Selectors

-
Background: We have already seen different jQuery selectors (see earlier post ) and used a few examples to select one/multiple Dom element(s). But what about travarsing the whole DOM tree. can we select inversely?  can we select a dropdown without knowing its value? Lets look at some of the advanced jQuery selectors and a few in-built jQuery methods that can in this regard. Vertically traversing through DOM: Think about nested DOM elements, can we get the child elements of an element after selecting an element using any of the jQuery selectors? the answer is yes. jQuery have in built methods that allows us to traverse through DOM and get child elements. To get all child elements of an element we can use .children() method, which return an array of elements that are 1st level child of that element.So .children() method does not gives those elements which are child of these 1st level elements. The .children() method allows us to pass a selector in order to get specific chil
Read more