{"id":3118,"date":"2017-11-16T08:52:40","date_gmt":"2017-11-16T13:52:40","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3118"},"modified":"2020-02-26T09:27:13","modified_gmt":"2020-02-26T14:27:13","slug":"jquery-basics","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/","title":{"rendered":"jQuery Basics"},"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\u00a0w3schools\u2019 HTML tutorials<\/a>\u00a0or\u00a0their CSS tutorials<\/a>\u00a0for some helpful pointers on getting started learning HTML or CSS. \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

Before you add code to your HTML document, be sure to read our Getting Your HTML Ready for jQuery<\/a> article. Once you have set up your HTML document for jQuery, you are ready to begin adding jQuery code to it. Here are some jQuery basics.<\/span><\/p>\n

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

Loading the Document<\/h3>\n

Before you add your jQuery statements to your HTML document, there are a few things you need to do first. <\/span><\/p>\n

To prevent your jQuery from executing before the document has finished loading, you need this jQuery event. Simply add: <\/span><\/p>\n

$(document).ready(function(){<\/span>\r\n \u00a0\u00a0\u00a0\/\/Add your jQuery here<\/span>\r\n}<\/span><\/pre>\n
And add your jQuery statements in place of the <\/span>\/\/Add your jQuery here<\/span> comment. <\/span><\/p>\n
<\/a><\/p>\n
Basic jQuery Syntax<\/h3>\n
Each jQuery line must begin with a \u2018$\u2019 sign. Follow this with a pair of parentheses enclosing the element you want to affect.<\/span><\/p>\n
$(element)<\/span><\/pre>\n
Add a period and the name of the jQuery action you would like to apply to the element. Follow this with a pair of parentheses. <\/span><\/p>\n
$(element).action()<\/span><\/pre>\n
A simple example of jQuery would be: <\/span><\/p>\n
$(\u201c.button\u201d).hide()<\/span><\/pre>\n
This would hide all elements with the  class=\u201dbutton\u201d<\/span>. However, it is rare that we want to use jQuery just to hide or show something. The true power is when you tie these simple actions to events. <\/span>
\n<\/a><\/p>\n
jQuery Events<\/h4>\n
Events can be used to trigger actions. Events can be things like clicking, hovering, or even when the page has finished loading. Tying actions to events is jQuery\u2019s strength. <\/span><\/p>\n
 To create an action based on an event, you would do something like the following:<\/span><\/p>\n
$(element1).event(function(){<\/span>\r\n \u00a0\u00a0$(element2).action();<\/span>\r\n});<\/span><\/pre>\n
For example, if you want to create a jQuery statement that will show paragraphs when a button is clicked, you would do something like this: <\/span><\/p>\n
$(\u201c#button\u201d).click (function(){<\/span>\r\n \u00a0\u00a0$(\u201cp\u201d).show();<\/span>\r\n});<\/span><\/pre>\n
In this example, when the element with id=\u201dbutton\u201d<\/span> is clicked, all <p><\/span> elements will be shown.<\/span><\/p>\n
You can, of course, have more than one action tied to an event. For example, you could add <\/span>$(\u201c.navBar\u201d).fadeOut(\u201cslow\u201d); <\/span>causing the code to look like this:<\/span><\/p>\n
$(\u201c#button\u201d).click (function(){<\/span>\r\n \u00a0\u00a0$(\u201cp\u201d).show();<\/span>\r\n \u00a0\u00a0$(\u201c.navBar\u201d).fadeOut(\u201cslow\u201d);<\/span>\r\n});<\/span><\/pre>\n
The code would then show all <p><\/span> elements and slowly fade out all elements with the class=\u201dnavbar\u201d<\/span>.<\/span><\/p>\n
These are some basics to help you understand how jQuery works. Use this knowledge to either create your own jQuery code or put your own spin on our tutorials. Check out the <\/span>jQuery section <\/span><\/a>of our knowledge base for tutorials and further instruction. <\/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":"
Before you add code to your HTML document, be sure to read our Getting Your HTML Ready for jQuery article. Once you have set up your HTML document for jQuery, you are ready to begin adding jQuery code to it. Here are some jQuery basics. Loading the Document Before you…<\/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":"\njQuery Basics - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.\" \/>\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\/jquery-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Basics - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/\" \/>\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:27:13+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\/jquery-basics\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/\",\"name\":\"jQuery Basics - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2017-11-16T13:52:40+00:00\",\"dateModified\":\"2020-02-26T14:27:13+00:00\",\"description\":\"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Basics\"}]},{\"@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":"jQuery Basics - Knowledge Base - Pair Networks","description":"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.","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\/jquery-basics\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Basics - Knowledge Base - Pair Networks","og_description":"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.","og_url":"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2020-02-26T14:27:13+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\/jquery-basics\/","url":"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/","name":"jQuery Basics - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2017-11-16T13:52:40+00:00","dateModified":"2020-02-26T14:27:13+00:00","description":"Get ready to add jQuery to your site by reading over these jQuery basics. Topics include how to load the jQuery document and some basic syntax.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/jquery-basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"jQuery Basics"}]},{"@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\/3118"}],"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=3118"}],"version-history":[{"count":12,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3118\/revisions"}],"predecessor-version":[{"id":7432,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3118\/revisions\/7432"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3118"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3118"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}