jQuery - C.S.D part 1

Hey, guys welcome back to my blog article series of Programming Applications & Frameworks. Today I'm going to discuss jQuery. for the ease of understanding, I'm going to divide my Client-side development article series to 2 parts. From this part, you'll be learning about jQuery. So let's move on to jQuery.

What is this 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. If you’re new to coding, this might sound like cheating. Shouldn’t you be writing your own code? The reality is for certain routine coding tasks there’s absolutely no point in reinventing the wheel.

Is this jQuery is a library or a framework?

Strictly speaking, jQuery is a library, but, to an extent, it does meet the definition of a software framework. Although many would argue that jQuery doesn't meet the definition of a software framework strictly enough, the fact is that no other JavaScript framework fully meets the definition of a framework either.
Perhaps the best explanation of why jQuery is more of a framework than a library is the fact that as a developer, you can choose not to use any of its framework-like functionalities. You can, for example, mix a simple jQuery statement with a standard JavaScript statement on the same line. AngularJS and Bootstrap typically don't allow you to do this. Therefore, the accurate answer of whether jQuery is a framework or not is "it depends whether you chose to use it as a framework or not".

These are some features of jQuery

  1. Effects and animations.
  2. Ajax.
  3. Extensibility.
  4. DOM element selections functions.
  5. Events.
  6. CSS manipulation.
  7. Utilities - such as browser version and each function.
  8. JavaScript Plugins.
  9. DOM traversal and modification.

Let's discuss the advantages and disadvantages of jQuery

Advantages:-

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.

Disadvantages:-

One of the main disadvantages of jQuery is a large number of published versions in a 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.

Do you know about the sectors of jQuery?

The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM). A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors, are used to selecting one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

Advanced selectors used in jQuery


In some more advanced web applications, you need more control than just referencing several element types or one with a specific ID. You can have several classes and subclasses and referencing one of them might not be enough to properly work with your elements. 
Remember that a web page can contain hundreds of elements, so you might not even know the elements' names. For instance, you could have a page with a list of orders for a customer. If the customer has a hundred orders, you could have a hundred elements on the page. The IDs and names on the page could be created dynamically. 

jQuery's DOM traversal API

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. Once you've made an initial selection with jQuery, you can traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts. Notice that each of these methods can optionally be passed string selectors, and some can also take another jQuery object in order to filter your selection down.

What is this Document Object Model (DOM)

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
ex:-

 DOM representation of the example table


Then what are the benefits of using jQuery over JavaScript?


jQuery is a JavaScript library, so it operates on top of JavaScript. It cannot exist on its own, so you can't use one over the other. You can use just JavaScript or JavaScript and jQuery. jQuery was introduced to make development with JavaScript easier. It will reduce the development time. Use it to add animation and even handling on your website.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is easier to use compared to JavaScript and its other JavaScript libraries. You need to write fewer lines of code while using jQuery, in comparison with JavaScript.
Let us see the following code snippet as an example of jQuery and JavaScript to change the background color:

JavaScript

function changeColor(color) {
   document.body.style.background = color;
}
Onload=”changeColor('blue');”

jQuery

$ ('body') .css ('background', '#0000FF');
As shown above, both the code snippets are doing the same work of changing the background color. But jQuery takes less code and in this way, you can work around other examples, which shows that jQuery minimizes the code and is easier to use.

These are the events supported by jQuery

All the different visitors' actions that a web page can respond to are called events. An event represents a precise moment when something happens.
Examples:
  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".

That's all for jQuery article of the Client-side development part 1. Let's meet with another interesting topic in the Programming Applications and Frameworks soon. Thank you for reading. Good luck!



 References:-





Comments

Post a Comment

Popular Posts