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.
READ JQuery Ajax
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”.
READ JQuery Basics
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.
READ JQuery CSS
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”.
No comments:
Post a Comment