{"id":18338,"date":"2013-10-11T18:01:13","date_gmt":"2013-10-11T10:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18338"},"modified":"2025-04-04T01:37:40","modified_gmt":"2025-04-03T17:37:40","slug":"jquery-selectors","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/","title":{"rendered":"A Beginner&#8217;s Guide to jQuery Selectors"},"content":{"rendered":"<p>As you may already know, <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a> introduced a set of new selectors that allow us <strong>to select elements in the document with less HTML class addition<\/strong>. But, the new CSS selectors rely on the browser\u2019s capability, making them not applicable in some cases. jQuery has a set of selectors, which could be an alternative way.<\/p>\n<p>There are two reasons to use jQuery selectors instead of CSS. First, jQuery has <strong>covered the compatibility for older browsers that do not support particular type of CSS selectors<\/strong>. Second, when building an interactive feature, we may want to select elements upon user actions such as <strong>on a mouse click<\/strong> or <strong>on hover<\/strong>.<\/p>\n<p>And using jQuery selectors is the felicitous way to do the job.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/\" class=\"ref-block__link\" title=\"Read More: Building a Mobile Panel with jQuery Mobile\" rel=\"bookmark\"><span class=\"screen-reader-text\">Building a Mobile Panel with jQuery Mobile<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/mobile-panel-with-jquery.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18243 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/mobile-panel-with-jquery.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Building a Mobile Panel with jQuery Mobile<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Index Selectors<\/h2>\n<p>Index selectors match elements based on its sequence. In CSS3 we have <code>first-child()<\/code> and <code>last-child()<\/code> selectors, which select the first and last elements. In jQuery, there are <code>:eq()<\/code>, <code>:lt()<\/code>, <code>:gt()<\/code>, <code>:even()<\/code>, and <code>:odd()<\/code>.<\/p>\n<p>Let\u2019s say we have the following unordered list.<\/p>\n<pre>\r\n&lt;ul&gt;\r\n  &lt;li&gt;List 1&lt;\/li&gt;\r\n  &lt;li&gt;List 2&lt;\/li&gt;\r\n  &lt;li&gt;List 3&lt;\/li&gt;\r\n  &lt;li&gt;List 4&lt;\/li&gt;\r\n  &lt;li&gt;List 5&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\n<p>And we want to select the third <code>&lt;li&gt;<\/code> and add an HTML class. Using jQuery you can use <code>:eq()<\/code>. Remember that since JavaScript index starts at <code>0<\/code>, the third <code>&lt;li&gt;<\/code> is actually the second at the index, giving you:<\/p>\n<pre>\r\n $('td:eq(2)').addClass('selected');\r\n <\/pre>\n<h2>Visibility Selectors<\/h2>\n<p>Visiblity selectors match the elements based on its visibility. So, we are able to select elements when they are visible or invisible. CSS3, at the moment does not have this kind of selectors.<\/p>\n<p>In the following example, we have a <code>&lt;div&gt;<\/code> element that is hidden by assigning <code>display: none;<\/code>.<\/p>\n<pre>\r\n &lt;div style=\"display:none;\"&gt;\r\n This is hidden\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>To select the <code>&lt;div&gt;<\/code>, you can do it this way using <code>:hidden<\/code> selector.<\/p>\n<pre>\r\n $('div:hidden').removeAttr('style');\r\n <\/pre>\n<p>The <code>:hidden<\/code> selector, however, does not work for elements that are hidden using visibility: hidden. It works when the element <code>display<\/code> mode is set to <code>none<\/code> like what we have shown above, or when the element width and height is set to <code>0<\/code>.<\/p>\n<p>To select visible elements, you can use <code>:visible<\/code>.<\/p>\n<h2>Element-Containing Selectors<\/h2>\n<p>Using jQuery we can also select elements when they are containing the specified element. Let\u2019s say we have two &lt;section&gt;. One contains a heading, while the other does not contain anything. Using the :has selector we can select the &lt;section&gt; that contains the heading, as follows.<\/p>\n<pre>\r\n $('section:has(h2)'').addClass('selected');\r\n <\/pre>\n<p>CSS3, at the moment, does not have a similar selector.<\/p>\n<h2>Text Containing Selectors<\/h2>\n<p>We can also select an element that contains specified text. Let\u2019s say we have three paragraphs and we want to select only one that contains \u201c<strong>Hello<\/strong>\u201c, for example.<\/p>\n<pre>\r\n &lt;p&gt;Hello&lt;\/p&gt;\r\n &lt;p&gt;World&lt;\/p&gt;\r\n <\/pre>\n<p>Using <code>:contains()<\/code> we can doing so this way.<\/p>\n<pre>\r\n $('div:contains('World')'').addClass('world');\r\n <\/pre>\n<p>This will select the first and second paragraph. And note that the text value is case sensitive, meaning that \u201cWorld\u201d does not equal to \u201cworld\u201d. So the <strong>text<\/strong> specified in the selector has to match the one at the selected element.<\/p>\n<h2>Animated Selector<\/h2>\n<p>Lastly, jQuery allows us to select element that is in the progress of an animation. jQuery provides a set of methods to animate element, for example <code>.slideToggle()<\/code>, <code>.slideUp()<\/code>, <code>.slideDown()<\/code>, <code>.show()<\/code> and <code>.hide()<\/code>. And we can use <code>:animated<\/code> selector to select the element that is animated with those method, like so.<\/p>\n<pre>\r\n $('li:animated').addClass('animation');\r\n <\/pre>\n<h2>Conclusion<\/h2>\n<p>CSS3 is indeed more advanced than CSS2 with some introduction of new selectors. But in particular cases, you may need to use jQuery selector instead of CSS, so if this is the case for you, I hope that this post could be helpful for your reference.<\/p>","protected":false},"excerpt":{"rendered":"<p>As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the new CSS selectors rely on the browser\u2019s capability, making them not applicable in some cases. jQuery has a set of selectors, which could be an alternative way.&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Beginner&#039;s Guide to jQuery Selectors - Hongkiat<\/title>\n<meta name=\"description\" content=\"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the\" \/>\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.hongkiat.com\/blog\/jquery-selectors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Beginner&#039;s Guide to jQuery Selectors\" \/>\n<meta property=\"og:description\" content=\"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-11T10:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:37:40+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Beginner&#8217;s Guide to jQuery Selectors\",\"datePublished\":\"2013-10-11T10:01:13+00:00\",\"dateModified\":\"2025-04-03T17:37:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/\"},\"wordCount\":541,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"jQuery\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/\",\"name\":\"A Beginner's Guide to jQuery Selectors - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2013-10-11T10:01:13+00:00\",\"dateModified\":\"2025-04-03T17:37:40+00:00\",\"description\":\"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-selectors\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Beginner&#8217;s Guide to jQuery Selectors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Beginner's Guide to jQuery Selectors - Hongkiat","description":"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the","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.hongkiat.com\/blog\/jquery-selectors\/","og_locale":"en_US","og_type":"article","og_title":"A Beginner's Guide to jQuery Selectors","og_description":"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-11T10:01:13+00:00","article_modified_time":"2025-04-03T17:37:40+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Beginner&#8217;s Guide to jQuery Selectors","datePublished":"2013-10-11T10:01:13+00:00","dateModified":"2025-04-03T17:37:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/"},"wordCount":541,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["jQuery"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/","name":"A Beginner's Guide to jQuery Selectors - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2013-10-11T10:01:13+00:00","dateModified":"2025-04-03T17:37:40+00:00","description":"As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-selectors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Beginner&#8217;s Guide to jQuery Selectors"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4LM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18338"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18338\/revisions"}],"predecessor-version":[{"id":73628,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18338\/revisions\/73628"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18338"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}