{"id":1913,"date":"2023-08-01T07:30:46","date_gmt":"2023-08-01T07:30:46","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1913"},"modified":"2023-08-01T07:30:46","modified_gmt":"2023-08-01T07:30:46","slug":"insights-on-jquery","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2023\/08\/01\/insights-on-jquery\/","title":{"rendered":"Insights on jQuery"},"content":{"rendered":"<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-ixbsx-79elbk h-full dark:bg-gray-800\">\n<div class=\"react-scroll-to-bottom--css-ixbsx-1n7m0yu\">\n<div class=\"flex flex-col text-sm dark:bg-gray-800\">\n<div class=\"group w-full text-gray-800 dark:text-gray-100 border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\">\n<div class=\"flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl md:py-6 lg:px-0 m-auto\">\n<div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\">\n<div class=\"flex flex-grow flex-col gap-3\">\n<div class=\"min-h-[20px] flex items-start overflow-x-auto whitespace-pre-wrap break-words\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>jQuery is a fast, small, and feature-rich JavaScript library designed to simplify front-end web development. It was created by John Resig in 2006 and quickly gained popularity due to its simplicity and powerful set of tools for manipulating HTML documents, handling events, making AJAX requests, and animating elements on web pages. jQuery&#8217;s syntax is designed to be easy to use and efficient, making it a popular choice for web developers.<\/p>\n<p>Key features of jQuery include:<\/p>\n<ol>\n<li>DOM Manipulation: jQuery provides a set of methods to easily select and manipulate HTML elements on a web page. It allows developers to change element content, attributes, and styles with ease.<\/li>\n<li>Event Handling: jQuery simplifies event handling by providing methods to bind event listeners and respond to events such as clicks, keypresses, mouse movements, etc.<\/li>\n<li>AJAX Support: jQuery simplifies the process of making asynchronous HTTP requests (AJAX) to interact with servers and load data without refreshing the entire web page.<\/li>\n<li>Animation: jQuery includes built-in animation effects and methods to animate elements, making it easy to create interactive and visually appealing web pages.<\/li>\n<li>Cross-browser Compatibility: jQuery abstracts browser-specific differences and provides a consistent API that works across various web browsers, ensuring better compatibility.<\/li>\n<\/ol>\n<p>To use jQuery, you need to include the jQuery library in your HTML document either by downloading it and hosting it locally or by using a CDN (Content Delivery Network). For example:<\/p>\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">html<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-comment\">&lt;!-- Load jQuery from a CDN --&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p>Once jQuery is loaded, you can start using its functions by wrapping your code within a document ready event to ensure that it executes only when the DOM has been fully loaded:<\/p>\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\">$(<span class=\"hljs-variable language_\">document<\/span>).<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>() {<br \/>\n<span class=\"hljs-comment\">\/\/ jQuery code here<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<p>From there, you can use various jQuery methods to manipulate the DOM, handle events, and perform other tasks.<\/p>\n<p>It&#8217;s worth mentioning that as of my last update in September 2021, jQuery has seen a gradual decline in popularity, mainly due to advancements in modern JavaScript, the introduction of native browser APIs, and the rise of other JavaScript frameworks like React, Angular, and Vue.js. Many modern web projects have shifted away from jQuery in favor of these newer technologies, which offer better performance and maintainability. However, jQuery still remains relevant in legacy projects and some specific use cases where its simplicity and ease of use are valuable.<\/p>\n<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-ixbsx-79elbk h-full dark:bg-gray-800\">\n<div class=\"react-scroll-to-bottom--css-ixbsx-1n7m0yu\">\n<div class=\"flex flex-col text-sm dark:bg-gray-800\">\n<div class=\"group w-full text-gray-800 dark:text-gray-100 border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\">\n<div class=\"flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl md:py-6 lg:px-0 m-auto\">\n<div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\">\n<div class=\"flex flex-grow flex-col gap-3\">\n<div class=\"min-h-[20px] flex items-start overflow-x-auto whitespace-pre-wrap break-words\">\n<div class=\"markdown prose w-full break-words dark:prose-invert light\">\n<p>Here are some additional aspects of jQuery:<\/p>\n<ol>\n<li>Selectors: jQuery&#8217;s selector engine allows you to use familiar CSS-style selectors to target HTML elements in the DOM. This makes it easy to identify and manipulate specific elements or groups of elements on a web page.Example:\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Select all &lt;p&gt; elements and change their text color to red<\/span><br \/>\n$(<span class=\"hljs-string\">\"p\"<\/span>).<span class=\"hljs-title function_\">css<\/span>(<span class=\"hljs-string\">\"color\"<\/span>, <span class=\"hljs-string\">\"red\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>Chaining: One of the key features of jQuery is method chaining, which allows you to perform multiple operations on the same set of elements in a single statement. This can result in more concise and readable code.Example:\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Change the background color and font size of all &lt;h1&gt; elements with class \"title\"<\/span><br \/>\n$(<span class=\"hljs-string\">\"h1.title\"<\/span>)<br \/>\n.<span class=\"hljs-title function_\">css<\/span>(<span class=\"hljs-string\">\"background-color\"<\/span>, <span class=\"hljs-string\">\"yellow\"<\/span>)<br \/>\n.<span class=\"hljs-title function_\">css<\/span>(<span class=\"hljs-string\">\"font-size\"<\/span>, <span class=\"hljs-string\">\"24px\"<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>Plugins: jQuery has a vibrant ecosystem of plugins developed by the community that extend its functionality. These plugins cover a wide range of features, from image sliders and lightboxes to form validation and complex UI components. Including a plugin is as simple as adding an additional script to your HTML page.<\/li>\n<li>AJAX Convenience Methods: jQuery provides shorthand methods for making AJAX requests, making it easier to fetch data from the server and handle responses.Example:\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Fetch data from the server using AJAX<\/span><br \/>\n$.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">\"https:\/\/api.example.com\/data\"<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">data<\/span>) {<br \/>\n<span class=\"hljs-comment\">\/\/ Handle the response data<\/span><br \/>\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(data);<br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>Event Delegation: jQuery supports event delegation, allowing you to attach event handlers to parent elements that will also catch events from their child elements. This can be useful for dynamically generated content or performance optimization.Example:\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Attach a click event handler to a parent &lt;ul&gt; element<\/span><br \/>\n<span class=\"hljs-comment\">\/\/ that listens for clicks on any &lt;li&gt; element within it,<\/span><br \/>\n<span class=\"hljs-comment\">\/\/ even those added dynamically after the page has loaded<\/span><br \/>\n$(<span class=\"hljs-string\">\"ul\"<\/span>).<span class=\"hljs-title function_\">on<\/span>(<span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-string\">\"li\"<\/span>, <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"List item clicked!\"<\/span>);<br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>Cross-Domain JSONP Support: JSONP (JSON with Padding) is a technique to bypass the same-origin policy in browsers and enable cross-domain data retrieval. jQuery provides support for making JSONP requests.<\/li>\n<li>No Conflict Mode: To avoid conflicts with other JavaScript libraries using the <code>$<\/code> symbol, jQuery provides a no-conflict mode. By using <code>jQuery<\/code> instead of <code>$<\/code>, you can use jQuery alongside other libraries that use <code>$<\/code>.Example:\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\">javascript<button class=\"flex ml-auto gap-2\">Copy code<\/button><\/div>\n<div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Use jQuery in no-conflict mode<\/span><br \/>\n<span class=\"hljs-title function_\">jQuery<\/span>(<span class=\"hljs-variable language_\">document<\/span>).<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>() {<br \/>\n<span class=\"hljs-comment\">\/\/ jQuery code here<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<p>While jQuery continues to be used in some legacy projects and small-scale websites, the shift towards modern JavaScript frameworks and libraries has resulted in a decreased dependency on jQuery in newer web development projects. However, the concepts and principles introduced by jQuery have had a significant influence on how developers approach web development, and many of its features have been incorporated into native browser APIs and other JavaScript libraries.<\/p>\n<p>Watch this space for more updates on the latest trends in Technology.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>jQuery is a fast, small,<\/p>\n","protected":false},"author":1,"featured_media":1916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,7,989],"tags":[96,18,990],"class_list":["post-1913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-techtrends","category-web-development","tag-jquery","tag-technology","tag-web-development"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1913"}],"version-history":[{"count":2,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1913\/revisions"}],"predecessor-version":[{"id":1915,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1913\/revisions\/1915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1916"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}