JqueryNo Comments

default thumbnail

Jquery selectors are used to select the HTML element. Jquery selectors find the HTML element using their name, class, id, type, attributes etc. All jquery selectors start with $ sign. Here is how to use jquery selectors.

Jquery Element Selectors

Jquery element selectors select the element based on the element name. Here is how to use element selectors in jquery.

HTML

<button class="newBtn">Hide All H2 Headings</button>

Jquery

$(document).ready(function(){
  $(".newBtn").click(function(){
    $("h2").hide();
  });
});

To see effect, click on the button. All h2 headings will be hidden.

Jquery Id Selector

Jquery id selector finds the html element using # tag like example.

HTML

<button class="newBtn">Hide Box</button>
<div id="box"></div>

Jquery

$(document).ready(function(){
  $(".newBtn").click(function(){
    $("#box").hide();
  });
});

HTML element having id is selected by jquery id selector using #. In above example, box will be hidden.

Jquery Class Selector

Jquery Class Selector is mostly used to select the html element using (.) dot. Here is how to use.

HTML

<button class="newBtn">Hide Box</button>
<div class="box"></div>

Jquery

$(document).ready(function(){
  $("newBtn").click(function(){
    $(".box").hide();
  });
});

All the boxes having box class will be hidden.

More Jquery Selectors


$("*")	 -   Selects all elements	
$(this)	 -   Selects the current HTML element	
$("p.intro")  -	Selects all <p> elements with class="intro"	
$("p:first")  -	Selects the first <p> element	
$("ul li:first")    -	Selects the first <li> element of the first <ul>	
$("ul li:first-child")  -  Selects the first <li> element of every <ul>	
$("[href]")  -	Selects all elements with an href attribute	
$("a[target='_blank']")    -	Selects all <a> elements with a target attribute value equal to "_blank"	
$("a[target!='_blank']")   -	Selects all <a> elements with a target attribute value NOT equal to "_blank"	
$(":button")  -	Selects all <button> elements and <input> elements of type="button"	
$("tr:even")  -	Selects all even <tr> elements	
$("tr:odd")   -	Selects all odd <tr> elements

Thus, you can easily use jquery selectors. If you have any issue, comment us in the comment box. We will try to help you soon.

Be the first to post a comment.

Add a comment