8 Most useful Jquery Selectors - You Need To Know
Tags: tutorial, javascript, jquery
Published: 2023-02-02 10:46:59

<p class="paragraph"> Howdy coders, </p><p class="paragraph"> In this tutorial, we are going to show some useful uses of Jquery selectors. </p><h2>What is Selectors?</h2><p class="paragraph"> <b>Selectors</b>&nbsp;are a very useful part of jquery.  </p><blockquote ><p>In Jquery selectors are used to select any HTML elements and perform some action on them Like add some animation on the element, make the element fade in-out or call some function on element click, etc….</p><cite></cite></blockquote><p class="paragraph"> Let’s start, </p><h3>1.Attribute selector:</h3><p class="paragraph"> Uses:&nbsp;Attribute selector&nbsp;is used for the select element which has the selected attribute. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//select element which has title attribute
$('a[title]').fadeOut(2000)
//select element which has title=service attribute
$('a[title=service]').fadeIn(2000);</code></pre><h3>2.this selector:</h3><p class="paragraph"> Uses: This selector is used for select particular elements when an event occurred. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//To select particular element when event occured 
$('p').click(function () {
   //This will hide slected elemets on click event
   $(this).hide();
});</code></pre><p class="paragraph"> Read, <a href="https://www.tutscoder.com/post/how-to-check-uncheck-checkbox-with-jquery">How to check-uncheck all checkbox With jQuery</a> </p><h3>3.Odd-even selector:</h3><p class="paragraph"> Uses:&nbsp;Odd-Even&nbsp;Selector is used to selecting odd and even elements from HTML. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//To select odd element
$('li:odd').addClass("green");
//To select even element
$('li:even').addClass("blue");</code></pre><h3>4.First last selector:</h3><p class="paragraph"> Uses: The first-last&nbsp;selector is used to selecting first or last elements. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//To select First Element 
$('li:first').addClass("green");
//To select Last Element
$('li:last').addClass("blue");</code></pre><h3>5.nth Element&nbsp; selector:</h3><p class="paragraph"> Uses:&nbsp;nth Element&nbsp;selector is used to selecting any element according to its </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//To select nth element
$('li:eq(2)').addClass("green");</code></pre><h3>6.not Selector:</h3><p class="paragraph"> Uses:&nbsp;not selector&nbsp;is used when you want to not to select an element from given. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//Do not select 3rd element
$('p:not(p:eq(2))').fadeOut(2000);

</code></pre><h3>7.Form field selector:</h3><p class="paragraph"> Uses:&nbsp;Form&nbsp;field selector is used to select any form input </p><pre><code class="code-block">//To select all input fields
$(':input').addClass('green');
//To select input with type=password
$(':input:password').addClass('red');</code></pre><h3>8.Contains selector:</h3><p class="paragraph"> Uses:&nbsp;Contains selector&nbsp;is used to finding which elements contains selected text. </p><p class="paragraph"> For Example: </p><pre><code class="code-block">$('#show').click(function(){
     //Find 'Jigar' from elements and show it		
      $("p:contains('Jigar')").show();
});</code></pre><p class="paragraph"> Also read,&nbsp;<a href="https://www.tutscoder.com/post/jquery-most-usefull-functions-list">12 Most Helpful jQuery Methods and Functions</a> </p><p class="paragraph"> <b>Conclusion:</b> </p><p class="paragraph"> So, These are some basic uses of Jquery selectors. Thanks for reading. </p><p class="paragraph"> Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting. </p><p class="paragraph"> Don’t forget to share this tutorial with your friends on <a href="https://www.facebook.com/TutsCoder" target="_blank">Facebook</a> and <a href="https://twitter.com/tutscoder" target="_blank">Twitter</a>&nbsp; </p>