Tag Archives: JQUERY SELECTORS :

Jquery

Jquery Selectors

Leave a comment

What is Selector??

As a name implies, selectors allow us to select the elements/properties like div, span., to performing actions on it.

What is use of it ??

A Selector identifies an HTML tag/element by using selector to manipulate(like apply css, delete the div…) with jQuery code.

Types of Selector :

  • ID/Tag ID Selector:

Represents a tag available with the given ID in the DOM. In simple, select the matched elements which has the same id.

Example : $(“#userid”)

<div id=”userid”></div>

  • Class/Tag Class Selector:

It represents a tag available with the given class in the DOM. In simple, select the matched elements which has the same class.

Example : $(“.userid”)

<div class=”userid”></div>

  • Tag Name/Element Selector :

It represents a tag name available in the DOM, In simple, select eh matched DOM/element
which has the same type

Example : $(“p”)

<p id=”userid”></p>

 

Jquery

JQuery Selector

Leave a comment

JQUERY SELECTORS :

1) selecting a particular element having a specific class

$(“.class1”).css(“border”, “1px solid red”);

2) select all elements of the page

$(“*”).css(“border”, “1px solid red”);

3) select an element that having a particular id

$(“#p1”).css(“border”, “1px solid red”);

4) select all specific elements type

$(“p”).css(“border”, “1px solid red”);

5) select multiple elements in a single selector

$(“div.class1, #div1”).css(“border”, “1px solid red”);

Note : From above the selector first select div having the class name with
            “.class1” and select element having id as “div1”  

 6) select a specific child of the parent element

$(“#div2 p:nth-child(2)”).css(“border”, “1px solid red”);

Note : select the 2nd paragraph (p) element that is inside the div
             element whose id is “div2” and apply the css on the element

7) select last child of the parent element

$(“#div2 p:last-child”).css(“border”, “1px solid red”);

8) select the first child of the parent element

$(“#div2 p:first-child”).css(“background”, “red”);

Note : select the first paragraph (p) element which is inside the
            div element whose id is “div2” and  apply the css on the element.

9) select an element based on its attribute

$(‘input[id$=”txtAddress”]’).val(‘Testing’);

Note : select the textboxes having id ending with “txtAddress” and set its value as “Testing”.