{"id":16905,"date":"2020-08-06T07:10:22","date_gmt":"2020-08-06T07:10:22","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16905"},"modified":"2022-04-28T09:15:19","modified_gmt":"2022-04-28T09:15:19","slug":"jquery-selectors-an-jquery-for-beginners","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/jquery-selectors-an-jquery-for-beginners\/","title":{"rendered":"jQuery Selectors: An jQuery for Beginners"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">What is Selectors?<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/sectors.png\" alt=\"\" class=\"wp-image-16907\"\/><\/figure>\n\n\n\n<p>The document we have written in blue text with $ is called selectors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/doc.png\" alt=\"\" class=\"wp-image-16908\"\/><\/figure>\n\n\n\n<p>And what is in the right side of the document, we call it method<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/target.png\" alt=\"\" class=\"wp-image-16910\"\/><\/figure>\n\n\n\n<p>Our selector part is written to target the dang of HTML or to select the dang element.<br>And after selecting you do the work you want to do in the method.<\/p>\n\n\n\n<p>In this blog, the part which you select is learned in detail.<\/p>\n\n\n\n<p><strong>Which is our selector part, it basically consists of CSS selectors,<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/captcher.png\" alt=\"\" class=\"wp-image-16912\"\/><figcaption><strong>These were our basic selectors<\/strong><\/figcaption><\/figure>\n\n\n\n<p>And which are basic selectors like -&gt; <strong>Id, Class, Tag Name.<\/strong><br>If you want to target an HTML element with id, then you can write for it as if we are showing the image above.<\/p>\n\n\n\n<p>For ID<br>For Class<br>For Tag<\/p>\n\n\n\n<p>These were our basic selectors apart from this, there are also advance selectors<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Advance selectors<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Advance-1.png\" alt=\"\" class=\"wp-image-16915\"\/><\/figure>\n\n\n\n<p><strong>$(&#8220;*&#8221;) <\/strong>Advance selector gets first star (*) tag<\/p>\n\n\n\n<p>Star means all the tags written inside HTML, if you want to target all of them within a page, or want to do CSS like that if you want to pink their HTML, then you can put star tags.<\/p>\n\n\n\n<p><strong>Example for Id<\/strong>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/e.png\" alt=\"\" class=\"wp-image-16920\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/789-1-1024x335.png\" alt=\"\" class=\"wp-image-16921\"\/><\/figure>\n\n\n\n<p><strong>Example for &lt;li&gt; Tag<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/569.png\" alt=\"\" class=\"wp-image-16922\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/123re-1024x322.png\" alt=\"\" class=\"wp-image-16923\"\/><\/figure>\n\n\n\n<p><strong>Example for Class Tag:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/21.png\" alt=\"\" class=\"wp-image-16926\"\/><\/figure>\n\n\n\n<p><strong>Resul<\/strong>t:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capture568-1024x316.png\" alt=\"\" class=\"wp-image-16927\"\/><\/figure>\n\n\n\n<p><strong>Example for (*) Star Tag:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/32.png\" alt=\"\" class=\"wp-image-16928\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/33-1024x366.png\" alt=\"\" class=\"wp-image-16929\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Selectors? The document we have written in blue text with $ is called selectors. And what is in the right side of the document, we&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[5434,6315,6035,6314,5421],"class_list":["post-16905","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-class","tag-id","tag-jquery","tag-selectors","tag-tag"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16905","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16905"}],"version-history":[{"count":0,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16905\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}