Element, ID and Class Selectors using JQuery with Example

Learn JQuery with Examples
December 29, 2016
0 (0 votes)
Element, ID and Class Selectors using JQuery with Example
0 out of 5 based on 0 user ratings
Publish with us | Our Do-Follow links are lifelong

As you know Jquery is the advanced version of JavaScript. The library we use to implement Jquery is developed using pure JavaScript. Did you remember those days when Jquery in not introduced in Web Technology? During that period to do a Client-Side operation we depend upon JavaScript. Here if I will ask you to select an element from a HTML page using JavaScript, Then I know in replay you will show me those JS methods like GetElementByID or GetElementByName. Yes you are correct using these methods we can select HTML page element for Scripting.

The next generation of JavaScript, Jquery made simple the way to select an element from a HTML page. This technique in Jquery is called “Jquery Selectors”. Jquery Selectors are used to select HTML elements based on their name, id, classes, types, attributes and values of attributes. Looking into the structure of Document Object Model (DOM) Jquery Selectors are categories into 3 types.

  • The element Selector
  • #ID Selector
  • .Class Selector

Before Jump to discus more about the types of Jquery Selectors first let you know all selectors in Jquery start with a dollar sign followed by parentheses. Like $().

The element Selector

Element Selector in Jquery selects elements from a HTML document using the element name. For an example if in your HTML page there are 2 or more paragraphs you want to apply background-color for them, then this Selector is the best option. You can do like the below.

$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});

#ID Selector

As you know in a HTML page elements ID is unique for each. During development we use ID to identify an element. The similar concept Jquery uses here. Using Jquery ID Selector you can select any single or unique element from a HTML page. To find an element with a specific ID, write a hash character, followed by the element ID as below.

$(document).ready(function(){
$("button").click(function(){
$("#myDiv").show();
});
});

Here myDiv is a Div declared inside the body tag of HTML.

.Class Selector

To maintain better look and feel CSS plays an Classical role over HTML. That’s why Class. A CSS Class is nothing but a block of Code which defines various styles for a HTML element. Let’s assume in my HTML page I have 10 div’s which are using same CSS Class. What the Customer wants is all those div’s with same Class name need to Fill red background Color. In such scenario Jquery Class Selectors are useful. To select an element from a HTML document Jquery Class Selector uses the Class name. To find an element with a specific Class, write a dot character, followed by the element CSS Class as below.

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

Here myDiv is a Div declared inside the body tag of HTML.

Examples of jQuery Selectors

$(“*”) – Used to select all elements of a HTML page.

$(this) – Used to select the Current element.

$(“p.intro”) – Used to select all the paragraphs with Class name intro.

$(“p:first”) – Used to select only the first paragraph.

$(“[href]”) – Used to select all elements with an href attribute.

$(“a[target=’_blank’]”) – Used to select all <a> elements with target attribute value equal to “_blank”.

$(“:button”) – Used to select all <button> elements and elements of type=”button”.

$(“tr:even”) – Used to select all even <tr> elements.

$(“tr:odd”) – Used to select all odd <tr> elements.

Tags:, , ,