{"id":3106,"date":"2017-11-16T07:59:24","date_gmt":"2017-11-16T12:59:24","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3106"},"modified":"2020-02-26T09:28:42","modified_gmt":"2020-02-26T14:28:42","slug":"getting-your-html-ready-for-jquery","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/","title":{"rendered":"Getting Your HTML Ready for jQuery"},"content":{"rendered":" \t\t
\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThis article assumes you have a basic understanding of HTML and CSS. If HTML or CSS is new to you, we recommend you learn HTML and CSS basics before attempting to use jQuery. See <\/span>w3schools\u2019 HTML tutorials<\/span><\/a> or <\/span>their CSS tutorials<\/span><\/a> for some helpful pointers on getting started learning HTML or CSS.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

jQuery is a Javascript library that serves to make Javascript easier to use. It\u2019s like an abbreviated form of Javascript. Instead of writing out Javascript, you can use a short jQuery action instead. <\/span><\/p>\n

<\/a><\/p>\n

Getting Your HTML Ready for jQuery<\/h3>\n

jQuery was created specifically to select HTML elements and apply actions to them. These actions can be anything from hiding elements to causing an action when an element is clicked. <\/span><\/p>\n

To tell the HTML document that you are using jQuery, you need to call the jQuery library. You can do this two different ways.<\/span><\/p>\n \t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThis library must be referenced <\/span>before<\/b> you any jQuery code.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

<\/a><\/p>\n

Add jQuery Library CDN<\/h4>\n

This is the easier option. All you have to do is tell your HTML document to pull the library from a link to the jQuery Library CDN. <\/span><\/p>\n

There are many different versions and CDNs. You can go to <\/span>jQuery CDN - Latest Stable Versions<\/span><\/a> to see jQuery CDNs. To implement, j<\/span>ust find the version you would like to use and click the most desirable option: uncompressed, minified, slim, or slim minified. \u00a0This will give you the link you need to add to your HTML document in order to call the jQuery library. <\/span><\/p>\n

You can also visit the\u00a0<\/span>Other CDNs article<\/span><\/a> for jQuery CDNs from Google, Microsoft, etc. They will also give you a link you can use.\u00a0<\/span><\/p>\n

Add your chosen link right before the closing <\/body><\/span> element.<\/span><\/p>\n

<!doctype html><\/span>\r\n<html lang=\u201cen\u201d><\/span>\r\n <head><\/span>\r\n   <title>Example<\/title><\/span>\r\n   <link rel=\u201cstylesheet\u201d href=\u201ccss\/style.css\u201d><\/span>\r\n <\/head><\/span>\r\n\r\n <body><\/span>\r\n\r\n   <!-- Add HTML body here --><\/span>\r\n\r\n   <script>src=\"https:\/\/code.jquery.com\/jquery-3.2.1.js\"<\/span>\r\n \u00a0   integrity=\"sha256-DZAnKJ\/6XZ9si04Hgrsxu\/8s717jcIzLy3oi35EouyE=\"<\/span>\r\n    \u00a0crossorigin=\"anonymous\"><\/script>\r\n<\/span>\r\n <\/body><\/span>\r\n<\/html>\r\n<\/span><\/pre>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tThe <\/span>integrity<\/span> and <\/span>crossorigin<\/span> attributes verify that the third-party servers have not been altered or manipulated.<\/span>    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n
It is recommended not to reference the jQuery library any higher in the code because it might interfere with loading the HTML document. <\/span><\/p>\n
<\/a><\/p>\n
Download jQuery Library<\/h4>\n
Downloading the jQuery library is more challenging. Go to the jQuery website, choose a method for downloading, and follow their steps to download the jQuery library to your server. Once you have downloaded and set up your jQuery library, be sure to reference it before the closing <\/body><\/span> element in your HTML document.<\/span><\/p>\n
<!doctype html><\/span>\r\n<html lang=\u201cen\u201d><\/span>\r\n  <head><\/span>\r\n     <title>Example<\/title><\/span>\r\n     <link rel=\u201cstylesheet\u201d href=\u201ccss\/style.css\u201d><\/span>\r\n  <\/head><\/span>\r\n\r\n  <body><\/span>\r\n      <!-- Add HTML body here --><\/span>\r\n      <script src=\"js\/jquery.min.js\"><\/script><\/span>\r\n  <\/body><\/span><\/pre>\n
It is recommended not to reference the jQuery library any higher because it might interfere with loading the HTML document. <\/span><\/p>\n
    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tjQuery is an open-source software permissive under an MIT license. jQuery is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for jQuery. Please note that there are many levels of javascript libraries available. Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery is a Javascript library that serves to make Javascript easier to use. It\u2019s like an abbreviated form of Javascript. Instead of writing out Javascript, you can use a short jQuery action instead. Getting Your HTML Ready for jQuery jQuery was created specifically to select HTML elements and apply actions…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[32],"ht-kb-tag":[187],"yoast_head":"\nGetting Your HTML Ready for jQuery - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Your HTML Ready for jQuery - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T14:28:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\",\"name\":\"Getting Your HTML Ready for jQuery - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2017-11-16T12:59:24+00:00\",\"dateModified\":\"2020-02-26T14:28:42+00:00\",\"description\":\"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Your HTML Ready for jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Your HTML Ready for jQuery - Knowledge Base - Pair Networks","description":"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Getting Your HTML Ready for jQuery - Knowledge Base - Pair Networks","og_description":"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.","og_url":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2020-02-26T14:28:42+00:00","twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/","url":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/","name":"Getting Your HTML Ready for jQuery - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2017-11-16T12:59:24+00:00","dateModified":"2020-02-26T14:28:42+00:00","description":"Learn how to set up your HTML document to recognize and read jQuery scripts. This is necessary before running any jQuery on your site.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Getting Your HTML Ready for jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3106"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=3106"}],"version-history":[{"count":23,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3106\/revisions"}],"predecessor-version":[{"id":7433,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3106\/revisions\/7433"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3106"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3106"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}