{"id":28710,"date":"2022-03-14T13:06:54","date_gmt":"2022-03-14T13:06:54","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=28710"},"modified":"2022-12-23T06:47:47","modified_gmt":"2022-12-23T06:47:47","slug":"what-is-jquery-and-how-it-works-an-overview-and-its-use-cases","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/what-is-jquery-and-how-it-works-an-overview-and-its-use-cases\/","title":{"rendered":"What is Jquery and How it works? An Overview and Its Use Cases"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-1024x559.png\" alt=\"\" class=\"wp-image-28713\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-1024x559.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-300x164.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-768x419.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-1536x838.png 1536w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/jquery-2048x1117.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What is jQuery?<\/h2>\n\n\n\n<p>jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto:\u00a0<strong>Write less, do more<\/strong>. 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. Here is the list of important core features supported by jQuery \u2212<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features of jQuery<\/h2>\n\n\n\n<p>Let me show you why you should take the time to look at jQuery. It has quite a bit of functionality, and I think you should look at these key features:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>DOM Element Selectors<\/strong>: jQuery Selectors allow you to select DOM elements so that you can apply functionality to them with jQuery\u2019s operational methods. jQuery uses a CSS 3.0 syntax (plus some extensions) to select single or multiple elements in a document. Using CSS means that you use selector syntax you\u2019re probably already familiar with from HTML styling and even if not, it\u2019s fairly easy to pick up the key CSS selector features. I\u2019ll go as far as saying that jQuery is the reason I really started to grok CSS. Using CSS syntax you can select elements by ID, CSS class, attribute filters, or by relationship to other elements, and you can even chain together filter conditions. Look at this simple example to select all 2nd column TD elements in a table with a simple selector: $(&#8220;#gdEntries td:nth-child(2)&#8221;).<\/li><li><strong>The jQuery Object:  <\/strong>The Wrapped Set Selectors result in a jQuery object that is known as the\u00a0<em>wrapped set<\/em>, which is an array-like structure that contains each of the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example). More importantly though, you can also apply jQuery functions against all the selected elements.<\/li><li><strong>Wrapped Set Operations<\/strong>: The real power of the wrapped set comes from applying jQuery operations against all selected DOM elements simultaneously. The jQuery.fn object exposes about 100 functions that can operate on the matched set and allows you to manipulate and retrieve information from the selected DOM objects in a batch. For example, you can easily manipulate all alternate rows in a table by adding a CSS class with $(&#8220;#gdEntries tr:odd&#8221;).addClass(&#8220;gridalternate&#8221;). jQuery applies the .addClass() function against each of the matched elements with one command. Intuitive methods allow you to get and set .css() styles directly including smart logic that accounts for browser differences of assignment types (number and string translations mostly) and values (opacity does the right thing on all browsers). You can set and retrieve attributes with .attr(), or retrieve or set a value with .val(), .text(), or .html(). You can clone selected DOM elements or create new elements from HTML text used as a selector and inject them into the document with methods like .appendTo(), .prependTo(), or reversely use a parent element to .append() or .prepend() the new or selected element(s). You can apply some basic but useful effects methods to .show() and .hide() elements in a smart way that checks for opacity, display, and visibility, and adjusts all to show or hide elements. You can do all of this and much more against all of the selected elements. Most wrapped set operations are also chainable so that they return the jQuery wrapped set object as a result. This means you can chain together many methods in a single command. Effectively this means you can select once and operate many times against the same object and even filter or expand the wrapped set with methods like .find(), .filter(), or .add(). The beauty of many of these functions is that they do things you actually want to do, and they are intuitively overloaded. Methods like .val() or .text() act both as retrieval and setter methods. Methods that deal with numeric values can take either text or numeric values. jQuery automatically fixes CSS assignments to browser dependent tags. Although the number of functions provided by jQuery is relatively small, many of the functions provide overloaded functionality to perform intuitive behaviors. The end result is that you have a relatively small API to learn, but a much broader range of functionality that is available on it.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Simplified Event Handling<\/strong> : Much of what you do in JavaScript code from DOM manipulation to AJAX calls is asynchronous using events and unfortunately the DOM implementations for event handling vary considerably between browsers. jQuery provides an easy mechanism for binding and unbinding events and providing a normalized event model for all supported browsers that makes it easy to handle events and hook up result handlers. jQuery calls all event handlers in the context of the element that caused the event (i.e., the\u00a0<em>this<\/em>\u00a0pointer) and they receive a fixed up and browser normalized event object that is consistent.<\/li><li><strong>Small Footprint<\/strong> : jQuery is a fairly compact base library yet it\u2019s feature packed with stuff you\u2019ll actually use. In my relatively short time of jQuery use, I\u2019ve gone through well over 85% of the jQuery functions with my code, which points at how useful the library is. All this functionality ends up in a compressed size of just around 16 KB (94 KB uncompressed with comments). For that you get selectors, a whole slew of operations that you can perform on the wrapped set, DOM normalization for most browsers, AJAX functionality, a host of utility functions for object\/array manipulation, and a number of basic effect functionality. Given my high utilization of jQuery, this 16 KB of script download provides a tremendous amount of \u201cBang for the Buck.\u201d<\/li><li><strong>Easy Plug-in Extensibility<\/strong>: jQuery is a language and DOM extension library and it provides a core set of useful features. It\u2019s small and tightly focused on providing core functionality and no more. For everything else, jQuery provides a very easy plug-in API that has spawned hundreds of plug-ins for almost every conceivable common operation you might think up to perform on a set of DOM elements. jQuery\u2019s API allows extending the core jQuery object\u2019s operations simply by creating a function and passing the jQuery wrapped set as a parameter. In this way, plug-ins receive the wrapped set and can operate on it and participate in the jQuery chaining. This very simple but powerful plug-in model is very easy to work with and likely the key to why so many plug-ins exist and jQuery has become so popular so quickly. If you need some specialty functionality, chances are that a plug-in already exists with the functionality you\u2019re looking for. And if it doesn\u2019t, it\u2019s easy enough to create it yourself with the help of jQuery or another plug-in as a baseline.<\/li><\/ul>\n\n\n\n<p>Ok, so now that you have some idea of what jQuery provides, I\u2019ll show you how to take it for a spin. In this article, I\u2019ll introduce you to core jQuery concepts of document manipulation purely from a client-side perspective. In part 2, I\u2019ll discuss how to use jQuery in combination with ASP.NET on the server for AJAX callbacks and how to integrate jQuery with server-side controls and components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use&nbsp;jQuery?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>It\u2019s easy to learn and use.<\/li><li>Makes DOM manipulation a breeze.<\/li><li>Has cross-browser support.<\/li><li>Working with AJAX is easy.<\/li><li>Lots of knowledge out there if you need help.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why Should I Not Use&nbsp;jQuery?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>It doesn\u2019t do anything you can\u2019t do on your own.<\/li><li>It\u2019s an unnecessary dependency.<\/li><li>Reduces performance.<\/li><li>It\u2019s old and everyone has moved to React\/Angular\/Vue.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to use jQuery in HTML document?<\/h2>\n\n\n\n<p>Two different ways to use jQuery.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Local machine: we can download jQuery library on local machine from&nbsp;<a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener\">jquery.com<\/a>&nbsp;and include it in HTML code.<\/li><li>CDN Based Version: we can include jQuery library into HTML code directly from Content Delivery Network (CDN).<br>The following CDNs also host compressed and uncompressed versions of jQuery releases.<ul><li><a href=\"https:\/\/developers.google.com\/speed\/libraries\/#jquery\" target=\"_blank\" rel=\"noopener\">Google CDN<\/a><\/li><li><a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/ajax\/cdn\/overview#jQuery_Releases_on_the_CDN_0\" target=\"_blank\" rel=\"noopener\">Microsoft CDN<\/a><\/li><li><a href=\"https:\/\/codingpointer.com\/#https:\/\/cdnjs.com\/libraries\/jquery\/\" target=\"_blank\" rel=\"noopener\">CDNJS CDN<\/a><\/li><li><a href=\"https:\/\/www.jsdelivr.com\/#!jquery\" target=\"_blank\" rel=\"noopener\">jsDelivr CDN<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to include jQuery file in HTML code?<\/h2>\n\n\n\n<p>The src attribute in the &lt;script&gt; element is used to link the external jQuery file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"606\" height=\"225\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example.jquery.png\" alt=\"\" class=\"wp-image-28712\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example.jquery.png 606w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example.jquery-300x111.png 300w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Example jQuery code:<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"439\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example2.png\" alt=\"\" class=\"wp-image-28711\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example2.png 864w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example2-300x152.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2022\/03\/example2-768x390.png 768w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advantages of jQuery<\/strong><\/h2>\n\n\n\n<p>Search engine optimization is easy with jQuery. As a result, the search engines will be able to find your websites more easily with jQuery. Therefore, the jQuery library becomes more SEO-friendly due to its increased traffic. The pages also load faster, which allows users to interact with the content better. Websites with good response times are more popular with users than those without. Additionally, jQuery provides the following advantages:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Open source<\/strong><\/h3>\n\n\n\n<p>Because\u00a0JQuery\u00a0is open-source, you know what you\u2019re getting into. As well as being free and transparent, it is also supported by a thriving community. You can easily seek their help whenever you face a problem. The problem of licensing with proprietary libraries is a thing of the past. You can customize jQuery to suit your needs because it is open source.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Easy to learn<\/strong><\/h3>\n\n\n\n<p>You need legible code when starting, and that is exactly what jQuery has. You can write efficient code with its clean, simple syntax. Identifying mistakes and correcting them is also possible. With jQuery, you can achieve the same result using a single line of code as opposed to a lengthy code as with other options. Moreover, the fact that the selectors and methods can be chained together makes it possible to perform multiple tasks at once.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Faster<\/strong><\/h3>\n\n\n\n<p>In our previous discussion, we saw how jQuery reduces the amount of code needed to perform certain tasks. The result is many tasks can be done in one line. This makes completing tasks more efficient. The library is lightweight, so you can accomplish much more with less code. The jQuery library is an excellent tool for developers to boost productivity. Using it will save you time and increase your efficiency in the development process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Popular<\/strong><\/h3>\n\n\n\n<p>78.5% of websites use jQuery, according to web technology surveys. JavaScript represents 95.4% of websites using jQuery. Due to its popularity, you probably got the impression it is one of the most widely used JavaScript libraries. Several factors contribute to its popularity. The first benefit is that it reduces development time, which reduces costs. The second reason it is a popular option in web development is that it is simple and easy to use. Finally, JavaScript enables adaptive solutions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Cross-browser support<\/strong><\/h3>\n\n\n\n<p>Developers are plagued by cross-browser issues every day. One browser works perfectly for one site, but another doesn\u2019t. However, the same website design elements collapse on different browsers and versions. JavaScript websites suffer from this problem the most. Thanks to jQuery, this can now be dealt with. A cross-browser web development tool allows you to develop websites that operate smoothly on a variety of browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Disadvantages of jQuery<\/strong><\/h2>\n\n\n\n<p>JQuery has many perks, as we have seen so far. Its downsides are now in the spotlight. The following are some of jQuery\u2019s disadvantages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Requires understanding of CSS<\/strong><\/h3>\n\n\n\n<p>Cascade Style Sheets (CSS) is a tool for building webpages, but it is also required for jQuery to function. In order to develop websites using jQuery, you must understand the basics of CSS. Classes and IDs are also essential CSS selectors to know. As a result, wannabe developers are unable to harness the full potential of jQuery.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Unsuitable for complex projects<\/strong><\/h3>\n\n\n\n<p>With jQuery, you can manipulate HTML, XHTML, or XML documents using the Document Object Model (DOM). You can manipulate DOM elements easily with jQuery. The features of jQuery are limited when you\u2019re working on complex projects. Therefore, they are not suitable for large or complex projects where additional resources are needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Debugging issues<\/strong><\/h3>\n\n\n\n<p>Further to the point above, when developing complex projects, it is necessary to add additional libraries and plugins to enhance functionality. Libraries and plugins grow in number along with their sizes and dependencies. Consequently, chaos ensues, and you are more likely to experience the bad effects when a problem arises. This means that figuring out how to debug it will be difficult since it has intricacies.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"  id=\"_ytid_22664\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/YFlx1C8XwR0?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p>Hopefully, this tutorial proved to be helpful in giving a thorough introduction to jQuery. It is an incredibly useful tool that goes a long way in facilitating web development and code writing. This is especially true if you are relatively new to the world of programming.<\/p>\n\n\n\n<p>We explored the various elements that make up the fundamentals of jQuery. We also learned how you can select and modify these elements, and how to put events and effects to good use. Mastery over tools like jQuery can help you create websites filled with interactive features that account for an engaging user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is jQuery? jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto:\u00a0Write less, do more. jQuery simplifies HTML document traversing, event&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[],"class_list":["post-28710","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/28710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=28710"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/28710\/revisions"}],"predecessor-version":[{"id":28714,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/28710\/revisions\/28714"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=28710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=28710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=28710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}