{"id":12739,"date":"2020-04-12T05:36:46","date_gmt":"2020-04-12T05:36:46","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=12739"},"modified":"2020-05-27T08:01:59","modified_gmt":"2020-05-27T08:01:59","slug":"what-is-jquery-a-brief-look","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/what-is-jquery-a-brief-look\/","title":{"rendered":"What is jQuery? A Brief Look!"},"content":{"rendered":"\n<p>jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto:&nbsp;<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<ul class=\"wp-block-list\"><li><strong>DOM manipulation<\/strong>\u00a0\u2212 The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called\u00a0<strong>Sizzle<\/strong>.<\/li><li><strong>Event handling<\/strong>\u00a0\u2212 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.<\/li><li><strong>AJAX Support<\/strong>\u00a0\u2212 The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.<\/li><li><strong>Animations<\/strong>\u00a0\u2212 The jQuery comes with plenty of built-in animation effects which you can use in your websites.<\/li><li><strong>Lightweight<\/strong>\u00a0\u2212 The jQuery is very lightweight library &#8211; about 19KB in size (Minified and gzipped).<\/li><li><strong>Cross Browser Support<\/strong>\u00a0\u2212 The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+<\/li><li><strong>Latest Technology<\/strong>\u00a0\u2212 The jQuery supports CSS3 selectors and basic XPath syntax.<\/li><\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>DOM manipulation<\/strong>:-<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"467\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/dom.jpg\" alt=\"\" class=\"wp-image-12747\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/dom.jpg 625w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/dom-300x224.jpg 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<p>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. It allows you to navigate and manipulate your documents through a programming language, which in the browser will almost always be JavaScript. DOM navigation and manipulation using standard JavaScript can be pretty cumbersome, but fortunately for us, jQuery comes with a bunch of DOM related methods, making it all much easier.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Event handling<\/strong>:-<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"470\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/event-types.jpg\" alt=\"\" class=\"wp-image-12748\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/event-types.jpg 633w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/event-types-300x223.jpg 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p>jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function,\u00a0<code>this<\/code>\u00a0refers to the DOM element that initiated the event.<\/p>\n\n\n\n<p>The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event\u2019s default behavior.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>AJAX Support<\/strong>:-<\/p>\n\n\n\n<p>AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.<\/p>\n\n\n\n<p>If you are new with AJAX, I would recommend you go through our\u00a0Ajax Tutorial\u00a0before proceeding further.<br>JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong><strong>Animations<\/strong>\u00a0<\/strong>:-<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/Preloader-with-Anime-js-1024x580.gif\" alt=\"\" class=\"wp-image-12749\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/Preloader-with-Anime-js-1024x580.gif 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/Preloader-with-Anime-js-300x170.gif 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/Preloader-with-Anime-js-768x435.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Animations <\/p>\n<\/div><\/div>\n\n\n\n<p>jQuery includes methods which give special effects to the elements on hiding, showing, changing style properties, and fade-in or fade-out operation. These special effect methods can be useful in building an interactive user interface.<\/p>\n\n\n\n<p>The following table lists jQuery methods for adding special effects to the DOM elements.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>jQuery Methods for Special Effects<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>animate()<\/td><td>Perform custom animation using element&#8217;s style properties.<\/td><\/tr><tr><td>queue()<\/td><td>Show or manipulate the queue of functions to be executed on the specified element.<\/td><\/tr><tr><td>stop()<\/td><td>Stop currently running animations on the specified element(s).<\/td><\/tr><tr><td>fadeIn()<\/td><td>Display specified element(s) by fading them to opaque.<\/td><\/tr><tr><td>fadeOut()<\/td><td>Hides specified element(s) by fading them to transparent.<\/td><\/tr><tr><td>fadeTo()<\/td><td>Adjust the opacity of the specified element(s)<\/td><\/tr><tr><td>fadeToggle()<\/td><td>Display or hide the specified element(s) by animating their opacity.<\/td><\/tr><tr><td>hide()<\/td><td>Hide specified element(s).<\/td><\/tr><tr><td>show()<\/td><td>Display specified element(s).<\/td><\/tr><tr><td>toggle()<\/td><td>Display hidden element(s) or hide visible element(s).<\/td><\/tr><tr><td>slideUp()<\/td><td>Hide specified element(s) with sliding up motion.<\/td><\/tr><tr><td>slideDown()<\/td><td>Display specified element(s) with sliding down motion.<\/td><\/tr><tr><td>slideToggle()<\/td><td>Display or hide specified element(s) with sliding motion.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to use jQuery?<\/h2>\n\n\n\n<p>There are two ways to use jQuery.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Local Installation<\/strong>&nbsp;\u2212 You can download jQuery library on your local machine and include it in your HTML code.<\/li><li><strong>CDN Based Version<\/strong>&nbsp;\u2212 You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Local Installation<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the&nbsp;<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/download\/\">https:\/\/jquery.com\/download\/<\/a>&nbsp;to download the latest version available.<\/li><li>Now put downloaded&nbsp;<strong>jquery-2.1.3.min.js<\/strong>&nbsp;file in a directory of your website, e.g. \/jquery.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example<\/h4>\n\n\n\n<p>Now you can include\u00a0<em>jquery<\/em>\u00a0library in your HTML file as follows \u2212<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/e082fbcfd3bafc5bf450a66b60371b99.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">CDN Based Version<\/h3>\n\n\n\n<p>You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example<\/h4>\n\n\n\n<p>Now let us rewrite above example using jQuery library from Google CDN.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/e082fbcfd3bafc5bf450a66b60371b99.js\"><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto:&nbsp;Write less, do more. 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&#8230;<\/p>\n","protected":false},"author":14,"featured_media":12751,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5691],"tags":[5838,5241,5085,5611,5491],"class_list":["post-12739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ajax","tag-animation","tag-events","tag-javascript","tag-javascript-framework"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12739","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\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=12739"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12739\/revisions"}],"predecessor-version":[{"id":12750,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12739\/revisions\/12750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/12751"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=12739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=12739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=12739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}