{"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 call it method Our selector part is written to target the dang of HTML or to select the dang element.And after selecting you do the work you want&#8230;<\/p>\n","protected":false},"author":1,"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":[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}]}}