jQuery Selectors
Spread the love

One of the most important parts of a jQuery library is jQuery Selectors.

Selectors in jQuery

Allows JQuery selectors to select and manipulate HTML elements.

jQuery selectors are used to finding or selecting HTML elements based on their name, ID, categories, types, properties, attribute values, and more. In addition, it has some custom selectors of its own. And it is based on existing CSS selectors.

All jQuery selectors start with a dollar sign and parentheses: $ ().

jQuery has three main selectors:

  • The element Selector
  • The #id Selector
  • The .class Selector

The element Selector

The JQuery component selector selects the element of the HTML tag.

You can select all elements on a page like <p>: $(“p”)

Example:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

The #id Selector

Using jQuery’s #id selector, the Html tag is given a specific id and we can access that id using the id selector.

An ID must be unique to a page, you should use the # ID selector when you want to find a single, unique element.

After the HTML element ID, type the hash character so that you can find the element with the unique ID: $(“#test”)

Example:

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

The .class Selector

jQuery’s .class selector is used to find elements of a specific class.

To find elements of a particular class, first type the character of the period, followed by the name of the class: $(“.test”)

Example:

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

More examples of jQuery selectors are as follows

SyntaxDescriptionExample
$(“*”)Selects all elements$(document).ready(function(){
$(“button”).click(function(){
$(“*”).hide();
});
});
$(this)Selects the current HTML element$(document).ready(function(){
$(“button”).click(function(){
$(“this”).hide();
});
});
$(“p.intro”)Selects all <p> elements with class=”intro”$(document).ready(function(){
$(“button”).click(function(){
$(“p.intro”).hide();
});
});
$(“p:first”)Selects the first <p> element$(document).ready(function(){
$(“button”).click(function(){
$(“p.first”).hide();
});
});
$(“ul li:first”)Selects the first <li> element of the first <ul>$(document).ready(function(){
$(“button”).click(function(){
$(“ul li:first”).hide();
});
});
$(“ul li:first-child”)Selects the first <li> element of every <ul>$(document).ready(function(){
$(“button”).click(function(){
$(“ul li:first-child”).hide();
});
});
$(“[href]”)Selects all elements with an href attribute$(document).ready(function(){
$(“button”).click(function(){
$(“[href]”).hide();
});
});
$(“a[target=’_blank’]”)Selects all <a> elements with a target attribute value equal to “_blank”$(document).ready(function(){
$(“button”).click(function(){
$(“a[target=’_blank’]”).hide();
});
});
$(“a[target!=’_blank’]”)Selects all <a> elements with a target attribute value NOT equal to “_blank”$(document).ready(function(){
$(“button”).click(function(){
$(“a[target!=’_blank’]”).hide();
});
});
$(“:button”)Selects all <button> elements and <input> elements of type=”button”$(document).ready(function(){
$(“button”).click(function(){
$(“:button”).hide();
});
});
$(“tr:even”)Selects all even <tr> elements$(document).ready(function(){
$(“tr:even”).css(“background-color”, “yellow”);
});
$(“tr:odd”)Selects all odd <tr> elements$(document).ready(function(){
$(“tr:even”).css(“background-color”, “yellow”);
});
jQuery Selectors…

Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *