{"id":2850,"date":"2015-05-29T00:11:13","date_gmt":"2015-05-28T18:41:13","guid":{"rendered":"http:\/\/cmscomputer.in\/blog\/?p=2850"},"modified":"2024-03-05T16:36:03","modified_gmt":"2024-03-05T11:06:03","slug":"learning-jquery-setting-up-a-jquery-code-environment","status":"publish","type":"post","link":"https:\/\/www.cmscomputer.in\/blog\/learning-jquery-setting-up-a-jquery-code-environment\/","title":{"rendered":"Learning jquery &#8211; Setting up a jQuery code environment"},"content":{"rendered":"<p>Today&#8217;s World Wide Web (WWW) is a dynamic environment and its users are very particular about styles and\u00a0functionality. To build interesting and interactive websites, developers are turning to javascript libraries\u00a0such as JQuery. Statistics shows jQuery is being used by 77.9% of all the websites.<\/p>\n<h3>Downloading jQuery<\/h3>\n<p>No installation is required. To use jQuery, we just need a publicly available copy of the file, no matter whether that copy is on an external site or our own.<\/p>\n<p>http:\/\/jquery.com is the official jQuery website, will have up to date stable version of libraries, which can\u00a0be downloaded from the home page of the site. Website comprises of both compressed and uncompressed version of\u00a0library. For testing and developing you can use uncompressed version and for production you can replace with\u00a0compressed version.<\/p>\n<p>As jQuery&#8217;s popularity has grown, companies have made the file freely available through their Content Delivery Networks (CDNs). Most notably, Google (https:\/\/developers.google.com\/speed\/libraries\/devguide), Microsoft<br \/>\n(http:\/\/www.asp.net\/ajaxlibrary\/cdn.ashx), and the jQuery project itself (http:\/\/code.jquery.com) offer the file on powerful, low-latency servers distributed around the world for fast download regardless of the user&#8217;s location.<br \/>\nWhile a CDN-hosted copy of jQuery has speed advantages due to server distribution and caching, using a local copy can be convenient during development.<\/p>\n<h3><strong>Deciding the version of jQuery to use.<\/strong><\/h3>\n<p>a) 1.X jQuery versions (1.11.x, 1.10.x, 1.9.x etc..)- Supports almost all browsers including old versions of\u00a0Internet explorer(6,7 and 8).<br \/>\nb) 2.X jQuery versions no longer supports old versions of Internet Explorer (6, 7, and 8) in order to\u00a0provide faster, cleaner support for more modern browsers.<\/p>\n<h3><strong>Setting up jQuery in an HTML document<\/strong><\/h3>\n<p>Download latest stable Jquery version library (v1.11.3 or v2.1.4 &#8211; latest when writing this article) and place\u00a0it in your website folder and link the file using &lt;script&gt; tag.<br \/>\neg: &lt;script src=&#8221;jquery.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>jQuery library file can be linked to website in 2 places one is in &lt;head&gt; tag and another is just above\u00a0closing body tag.<\/p>\n<p><strong>NOTE:<\/strong> Webpage with scripts at the bottom of the page loads faster and renders much faster.<\/p>\n<p>The below code demonstrates script inclusion in webpage.<\/p>\n<p><code>&lt;!DOCTYPE html&gt;<br \/>\n&lt;html lang=\"en\"&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta charset=\"utf-8\"&gt;<br \/>\n&lt;title&gt;Setting up jQuery in an HTML document&lt;\/title&gt;<br \/>\n&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<br \/>\n&lt;script src=\"jquery.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;Setting up jQuery in an HTML document&lt;\/h1&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/code><\/p>\n<p><strong>jQuery &#8211; CDN version<\/strong><\/p>\n<p>No JQuery download required, just replace the <code>&lt;script src=\"jquery.js\"&gt;&lt;\/script&gt;<\/code> with the following JQuery CDN<br \/>\nversions.<\/p>\n<p><code>&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"&gt;&lt;\/script&gt;<br \/>\nOR<br \/>\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.4\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p><strong>NOTE:<\/strong> Using CDN is prefered because as already discussed, nearly 77.9% websites are using JQuery, when we open\u00a0these websites in our web browsers, our browsers will cache the CDN script, hence rest of jquery webpages \/\u00a0websites will load faster.<\/p>\n<p>In our next article, we will learn about jQuery Selectors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s World Wide Web (WWW) is a dynamic environment and its users are very particular about styles and\u00a0functionality. To build interesting and interactive websites, developers are turning to javascript libraries\u00a0such as JQuery. Statistics shows jQuery is being used by 77.9% of all the websites. Downloading jQuery No installation is required.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"categories":[115,7],"tags":[],"class_list":["post-2850","post","type-post","status-publish","format-standard","hentry","category-it-training","category-web-technologies"],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/2850"}],"collection":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/comments?post=2850"}],"version-history":[{"count":5,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/2850\/revisions"}],"predecessor-version":[{"id":2855,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/2850\/revisions\/2855"}],"wp:attachment":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/media?parent=2850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/categories?post=2850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/tags?post=2850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}