JQuery Selectors

JQuery selectors are the parts of the jQuery library. The jQuery selectors are used to select and manipulate HTML elements as a single element or as a group. JQuery selectors are needed at every step while using jQuery. The selector’s permits to extract the exact element/attribute you want from your HTML document. JQuery supports the existing CSS Selectors. The CSS selectors are,

1)   .class:- It selects all elements with class. This property is defined in CSS1 version.

Eg: – .intro:- It selects all elements with class=“intro”.

2)  #id: – It selects the element with id. This property is defined in CSS1 version.

Eg: – #firstname: – It selects the element with id=“firstname”.

3)  *:- This selector selects all elements. This property is defined in CSS2 version.

4)  element: – It selects all <p> elements. This property is defined in CSS1 version.

Eg: – p

5)  element,element: – This property is defined in CSS1 version.

Eg: – div, p: – It selects all <div> elements and all <p> elements.

6)  element element: – This property is defined in CSS1 version.

Eg: – div p: – It selects all <p> elements inside <div> elements.

7)  element>element: – This property is defined in CSS2 version.

Eg: – div>p: – It selects all <p> elements where the parent is a <div> element.

8)  element+element: – This property is defined in CSS2 version.

Eg: – div+p: – It selects all <p> elements that are placed immediately after <div> elements.

9)  [attribute]:- This property is defined in CSS2 version.

Eg: – [target]:- It selects all elements with a target attribute.

10)  [attribute=value]:- This property is defined in CSS2 version.

Eg: – [target=_blank]:- It selects all elements with target=“_blank”.

11)  [attribute~=value]:- This property is defined in CSS2 version.

Eg: – [title~=flower]:- It selects all elements with a title attribute containing the word “flower”.

12)  [attribute|=value]:- This property is defined in CSS2 version.

Eg: – [lang|=en]:- It Selects all elements with a lang attribute value starting with “en”.

13)  :link: – This property is defined in CSS1 version.

Eg: – a:link: – It selects all unvisited links.

14)  :visited: – This property is defined in CSS1 version.

Eg: – a:visited:-It selects all visited links.

15)  :active: – This property is defined in CSS1 version.

Eg: – a:active: – It selects the active link.

16)  :hover: – This property is defined in CSS1 version.

Eg: – a:hover: – It selects links on mouse over.

17)  :focus: – This property is defined in CSS2 version.

Eg: – input:focus:-It selects the input element which has focus.

18)  :first-letter: – This property is defined in CSS1 version.

Eg:- It selects the first letter of every <p> element.

19)  :first-line: – This property is defined in CSS1 version.

Eg: – p:first-line: – It selects the first line of every <p> element.

20)  :first-child: – This property is defined in CSS2 version.

Eg: – p:first-child: – It selects every <p> element that is the first child of its parent.

21)  :before: – This property is defined in CSS2 version.

Eg: – p:before: – It insert content before the content of every <p> element.

22)  :after: – This property is defined in CSS2 version.

Eg: – p:after: – It insert content after every <p> element.

23)  :lang(language):- This property is defined in CSS2 version.

Eg: – p:lang(it):- It selects every <p> element with a lang attribute value starting with “it”.

24)  element1~element2:- This property is defined in CSS3 version.

Eg: – p~ul: – It selects every <ul> element that are preceded by a <p> element.

25)  [attribute^=value]:- This property is defined in CSS3 version.

Eg: – a[src^=“https”]:- It selects every <a> element whose src attribute value begins with “https”.

26)  [attribute$=value]:- This property is defined in CSS3 version.

Eg: – a[src$=“.pdf”]:-It selects every <a> element whose src attribute value ends with “.pdf”.

27)  [attribute*=value]:- This property is defined in CSS3 version.

Eg: – a[src*=“w3schools”]:- It selects every <a> element whose src attribute value contains the substring “w3schools”.

28)  :first-of-type: – This property is defined in CSS3 version.

Eg: – p:first-of-type: – It selects every <p> element that is the first <p> element of its parent.

29)  :last-of-type: – This property is defined in CSS3 version.

Eg: – p:last-of-type: – It selects every <p> element that is the last <p> element of its parent.

30)  : only-of-type: – This property is defined in CSS3 version.

Eg: – p:only-of-type: – It selects every <p> element that is the only <p> element of its parent.

31)  : only-child: – This property is defined in CSS3 version.

Eg: – p:only-child: – It selects every <p> element that is the only child of its parent.

32)  :nth-child(n):- This property is defined in CSS3 version.

Eg: – p:nth-child(2):- It selects every <p> element that is the second child of its parent.

33)  :nth-last-child(n):- This property is defined in CSS3 version.

Eg: – p:nth-last-child(2):- It selects every <p> element that is the second child of its parent, counting from the last child.

34)  :nth-of-type(n):- This property is defined in CSS3 version.

Eg: – p:nth-of-type(2):- It selects every <p> element that is the second <p> element of its parent.

35)  :nth-last-of-type(n):- This property is defined in CSS3 version.

Eg: – p:nth-last-of-type(2):-It selects every <p> element that is the second <p> element of its parent, counting from the last child

36)  :last-child: – This property is defined in CSS3 version.

Eg: – p:last-child: – It selects every <p> element that is the last child of its parent

37)  :root: – This property is defined in CSS3 version.

Eg: – :root: – It selects the document’s root element.

38)  :empty: – This property is defined in CSS3 version.

Eg: – p:empty: – It selects every <p> element that has no children (including text nodes).

39)  :target: – This property is defined in CSS3 version.

Eg: – #news:target:-It selects the current active #news element (clicked on a URL containing that anchor name).

40)  :enabled: – This property is defined in CSS3 version.

Eg: – input:enabled: – The selector selects every enabled <input> element.

41)  :disabled:- This property is defined in CSS3 version

Eg:-. input:disabled:-It selects every disabled <input> element.

42)  :checked: – This property is defined in CSS3 version.

Eg: – input:checked:-It selects every checked <input> element

43)  :not(selector):- This property is defined in CSS3 version.

Eg: – :not(p):- It selects every element that is not a <p> element

44)  ::selection: – It selects the portion of an element that is selected by a user. This property is defined in CSS3 version.

Eg: –  ::selection

The selectors in jQuery, start with the dollar sign and parentheses: $(). The jQuery selectors are,

1)     $(“*”):- It selects all elements.

2)     $(“p”):- It selects all <p> elements.

3)     $(“p.intro”):- It selects all <p> elements with class=“intro”.

4)     $(“p#intro”):- It selects the first <p> elements with id=“intro”.

5)     $(“:animated”):- It selects all elements that are currently animated.

6)     $(“:button”):- It selects all <button> elements and <input> elements of type=“button”.

7)     $(“:even”):- It selects even elements.

8)     $(“:odd”):- It selects odd elements.

9)     $(this):- It selects the current HTML element.

10)  $(“p#intro:first”):- It selects the first <p> element with id=“intro”.

11)  $(“.intro”):- It selects all elements with class=“intro”.

12)  $(“#intro”):- It selects the first element with id=“intro”.

13)  $(“ul li:first”):- It selects the first <li> element of the first <ul>.

14)  $(“ul li:first-child”):- It selects the first <li> element of every <ul>.

15)  $(“[href]”):-   It selects all elements with a href attribute.

16)  $(“[href$=’.jpg’]”):- It selects all elements with a href attribute that ends with “.jpg”.

17)  $(“[href=’#’]”):- It selects all elements with a href value equal to “#”.

18)  $(“[href!=’#’]”):- It selects all elements with an href value NOT equal to “#”.

19)  $(“div#intro .head”):- It selects all elements with class=“head” inside a <div> element with id=“intro”.