jQuery Selector Detailed Guide

Understanding jQuery Selector with examples: In the previous section, we have understood what is jQuery, and how to use jQuery in our webpage. Now next step is how to work with jQuery for DOM manipulation. To manipulate the DOM element we first need to select that HTML element.

In short, we need to access that element then only we can manipulate it. jQuery selectors allow us to select respective elements. 


The jQuery Selector starts with the dollar sign and with an open-close round bracket i.e $(), and returns one or more jQuery objects of selected HTML elements.  Below are mentioned 4 basic jQuery selector options.

4 Basic jQuery Selector options

  1. jQuery Select Elements by ID
  2. jQuery Select Elements by ClassName
  3. jQuery Select Elements by Attribute
  4. jQuery Select Elements by Tag

Let's check each selector one my one.

jQuery Select Element by ID

jQuery selectors are very much like the CSS selectors that we use in CSS stylesheets.

So here in jquery to select an element by id, we use the element id with the prefix hash (#). 

<div id="myDiv"></div>

<script>
 $(document).ready(function(){
    $("#myDiv").html("Learn jQuery with codepedia");
 });
</script>

Explanation: Here we have a Div tag with id as myDiv, and in jQuery to select div by an ID we use $(#myDiv) and updated its content.

jQuery Select Element by ClassName

Same as in CSS to select a class we use classname with prefix dot (.), here in jquery to select an element by classname we use dot with classname $(".className").

<div class="clsTitle"></div>
<p class="clsBody"></p>

<script>
 $(document).ready(function(){
    $(".clsTitle").html("This is my page Title");
    $(".clsBody").html("And this is my body content.");
 });
</script>

Explanation: Here we have a P tag and a Div tag with the respective classname. Now to select P (paragraph) tag by classname in jQuery we write $(".clsTitle") and updated its content.

Same for the div tag, we selected the div element by its classname and updated its content using the jQuery HTML() method.

jQuery Select Element by Arrtibute

jQuery selector also allows us to select an element by its attribute and value ie [attribute=value].

Suppose we have a div tag with the attribute as data-* and we want to access that element for further DOM manipulation. Then using $("[attribute=value]") we can select an HTML element by its attribute value in jQuery.

Try it yourself

<div data-name="iphone">Iphone</div>
<div data-name="samsung">Samsung</div>
<div data-name="sony">Sony</div>
<button id="btnClick">Click Me</button>

<script>
$(document).ready(function() {
    $("#btnClick").on('click', function() {
        $("[data-name=iphone]").css("color","red");
    });
});
</script>

Output:

Iphone
Samsung
Sony

Explanation: Here we have a div tag with html5 data-name attribute, and want to change the text color for the property data-name as iPhone.

So first we create a click event on our button tag.

Next, we select an element by its attribute using $("[data-name=iphone]").

And then using the jQuery CSS method change its text color.


In another example, we have a form tag, with some input textbox. Each textbox has a name attribute. Now in jQuery, we select Textbox by name property and get textbox value to display in an alert box. 

Sample Code: jQuery Get Textbox value by name.

Try it yourself

<form>
Enter Name: <input type="text" name="firstname" />
<button id="btn2" class="btn btn-success">Click Me</button>
</form>

<script>
$(document).ready(function() {
    $("#btn2").on('click', function() {
        alert($("[name=firstname]").val());
    });
});
</script>

Explanation: Here in the above code, on button click, we select textbox element by its name property. and using the jQuery val() method we get textbox value.

jQuery Select Element by Tag

This one is simple, where we directly select the element by its tag name. For example, select all p tag, we use $("P"), select all span tag, we use $("span").

Sample Code: jQuery Select all Div Tag, select all span tag.

Try it yourself

<div>This is div1</div>
<div>This is div2</div>
<div>This is div3</div>

<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>

<button id="btn3">Change Div Color</button>
<button id="btn4">Change Paragrah Color</button>
$(document).ready(function() {
    $("#btn3").on('click', function() {
        $("div").css("color","red");
    });

    $("#btn4").on('click', function() {
        $("p").css("color","blue");
    });
});

Output

This is div1
This is div2
This is div3

This is paragraph 1

This is paragraph 2

This is paragraph 3


Explanation: Here in the above code we select all div tags and change their text color to red color. The same we did with the p tag by changing its color to blue.

Now in the next article will learn in-depth about DOM manipulation. 

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee