{"id":12752,"date":"2020-04-12T06:36:34","date_gmt":"2020-04-12T06:36:34","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=12752"},"modified":"2020-05-27T08:01:41","modified_gmt":"2020-05-27T08:01:41","slug":"jquery-syntax","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/jquery-syntax\/","title":{"rendered":"jQuery Syntax!"},"content":{"rendered":"\n<p>The jQuery syntax is tailor-made for&nbsp;<strong>selecting<\/strong>&nbsp;HTML elements and performing some&nbsp;<strong>action<\/strong>&nbsp;on the element(s).<\/p>\n\n\n\n<p>Basic syntax is:&nbsp;<strong>$(<em>selector<\/em>).<em>action<\/em>()<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A $ sign to define\/access jQuery<\/li><li>A (<em>selector<\/em>) to &#8220;query (or find)&#8221; HTML elements<\/li><li>A jQuery&nbsp;<em>action<\/em>() to be performed on the element(s)<\/li><\/ul>\n\n\n\n<p>Examples:<\/p>\n\n\n\n<p><code>$(this).hide()<\/code>&nbsp;&#8211; hides the current element.<\/p>\n\n\n\n<p><code>$(\"p\").hide()<\/code>&nbsp;&#8211; hides all &lt;p&gt; elements.<\/p>\n\n\n\n<p><code>$(\".test\").hide()<\/code>&nbsp;&#8211; hides all elements with class=&#8221;test&#8221;.<\/p>\n\n\n\n<p><code>$(\"#test\").hide()<\/code>\u00a0&#8211; hides the element with id=&#8221;test&#8221;.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"javascript\">\n\n$(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n\n<span class=\"hljs-comment\">\/\/ your code<\/span>\n\n$(selector).action();\n\n});\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you observe above jQuery syntax, we placed a jQuery code inside of &lt;\/script&gt; tag because jQuery is a just JavaScript library.<\/p>\n\n\n\n<p>Following is a detailed explanation of the above jQuery syntax.<\/p>\n\n\n\n<p><strong>$<\/strong>&nbsp;&#8211; The dollar sign (<strong>$<\/strong>) is just an alias name of jQuery and it is used to define or access the jQuery.<\/p>\n\n\n\n<p><strong>$(document).ready(function(){})<\/strong>&nbsp;&#8211; It represents the document ready event and it is used to execute the jQuery code once the document is fully loaded and ready before working with it.<\/p>\n\n\n\n<p>In above jQuery syntax, we written a&nbsp;<strong>$(selector).action()<\/strong>&nbsp;jQuery statement in document ready event to select and perform required actions such as setting the content or changing the color, etc. on HTML elements.<\/p>\n\n\n\n<p><strong>selector<\/strong>&nbsp;&#8211; It represents the HTML element of which manipulation needs to be done.<\/p>\n\n\n\n<p><strong>action()<\/strong>&nbsp;&#8211; It represents an action that needs to be performed on the given element.<\/p>\n\n\n\n<p>The jQuery team provided a shorter way for document ready event (<strong>document.ready<\/strong>) with an anonymous function (<strong>$(function(){})<\/strong>).<\/p>\n\n\n\n<p>By using document ready event shorter way, the above jQuery syntax can be rewritten as shown following.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"javascript\">\n\n$(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n\n<span class=\"hljs-comment\">\/\/ your code<\/span>\n\n$(<span class=\"hljs-string\">\"#selector\"<\/span>).action();\n\n});\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now we will see the simple example of using jQuery to set the div element text after the\u00a0<strong>DOM<\/strong>\u00a0is ready, for that write the code like as shown below.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/e082fbcfd3bafc5bf450a66b60371b99.js\"><\/script>\n\n\n\n<p>If you observe above example, we defined a document ready event with jQuery statement to find all the\u00a0<strong>div<\/strong>\u00a0(Here\u00a0<strong>div<\/strong>\u00a0is a\u00a0<strong>jQuery selector<\/strong>) elements in the page and set the content to \u201c<strong>Welcome to DevopsSchool<\/strong>\u201d using\u00a0<strong>text()<\/strong>\u00a0action method.<\/p>\n\n\n\n<p>Suppose if we want to replace the div text, once the user performs some action, then we need to write the code as shown below.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/e082fbcfd3bafc5bf450a66b60371b99.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery syntax is tailor-made for&nbsp;selecting&nbsp;HTML elements and performing some&nbsp;action&nbsp;on the element(s). Basic syntax is:&nbsp;$(selector).action() A $ sign to define\/access jQuery A (selector) to &#8220;query (or find)&#8221; HTML elements A jQuery&nbsp;action() to be performed on the element(s) Examples: $(this).hide()&nbsp;&#8211; hides the current element. $(&#8220;p&#8221;).hide()&nbsp;&#8211; hides all &lt;p&gt; elements. $(&#8220;.test&#8221;).hide()&nbsp;&#8211; hides all elements with class=&#8221;test&#8221;. $(&#8220;#test&#8221;).hide()\u00a0&#8211;&#8230;<\/p>\n","protected":false},"author":14,"featured_media":0,"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":[173,6035,5607],"class_list":["post-12752","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-java","tag-jquery","tag-syntax"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12752","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=12752"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12752\/revisions"}],"predecessor-version":[{"id":12754,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12752\/revisions\/12754"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=12752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=12752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=12752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}