Automation 4 absolute beginners - JQuery Selectors
JQuery-Selectors:
A JQuery selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.
How to use selectors:
The selectors are very usefull and would be required at every step while using JQuery. They get the exact element that you want from your HTML document.
JQuery Selectors:
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
Element $("p") All p elements
.class, .class $(".intro, .demo") All elements with the classes "intro" and "demo"
:first $("p:first") The first p element
:last $("p:last") The last p element
:even $("tr:even") All even tr elements
:odd $("tr:odd") All odd tr elements
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
:header $(":header") All header elements h1, h2..
:animated $(":animated") All animated elements
:contains(text) $(":contains(nit)") All elements which contains the text
:empty $(":empty") All elements with no child (elements) nodes
:hidden $("p:hidden") All hidden p elements
Visible $("table:visible") All visible tables
s1, s2, s3 $("th, td, .intro") All elements with matching selectors
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.html']") Allelements with value equal to"default.html"
[attribute!=value] $("[href!='default.html']") All elements with a href attribute value not equal to "default.html"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value endingwith ".jpg"
:input $(":input") All input elements
:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements
Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors:
. $('*'): This selector selects all elements in the document.
. $("p>*"): This selector selects all elements that are childern of a paragraph element.
. $("#specialID"): This selector function gets the element with id="specialID"
. $(".specialClass"): This selector gets all the elements that have the class of specialClass
. $("li:not(.myclass)"): Selects all elements matches by <li> that do not have class="myclass"
. $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
. $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements
. $("ul li:first"): This selector gets only the first <li> element of the <ul>
. $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
. $("li>ul"): Selects all elements matched by <ul> that are childer of an element matched by <li>
. $("strong+em"): Selects all elements matched by <em> that immediately followa sibling element matched by <strong>
. $("p~ul"): Selects all elements matched by <ul>that follow a sibling element matched by <p>
. $("code,em,strong"): Selects all elements matched by <code> or <em> or <strong>
. $("p strong,.myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
. $(".empty"): Selects all elements that have no children
. $("p:empty"): Selects all elements matched by <p> that have no children
. $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>
. $("p[.myclass]"): Slects all elements matched by <p> that contain an element with a class of myclass.
. $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
. $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname
. $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname
. $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar.
. $("a[@href*=domain.com]"): Selects all elemented matched by <a>that have an href value containing domain.com
. $("li:even"): Selects all elements matched by <li> that have an even index value
. $("tr:odd"): Selects all elements matched by <tr> that have an odd index value
. $("li:first"): Selects the first <li> element.
. $("li:last"): Selects the last <li> element.
. $("li:visible"): Selects all elements matched by <li> that are visible
. $("li:hidden"): Selects all elements matched by <li> that are hidden
. $(":radio"): Selects all radio buttons in the form
. $(":checked"): Selects all checked boxex in the form
. $(":input"): Selects only from elements(input,select,textarea,button)
. $(":text"): Selects only text elements(input[type=text])
. $("li:eq(2)"): Selects the third <li> element
. $("li:eq(4)"): Selects the fifth <li> element
. $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words,the first two <li> elements
. $("p:lt(3)"): Selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
. $("li%gt(1)"): Selects all elements matched by <li> after the second one
. $("p:gt(2)"): Selects all elements matched by <p> after the third one
. $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>
. $("div//code"): Selects all elements matched by <code> that are descendants of an element matched by <div>
. $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
. $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
. $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
. $(":parent"): Selects all elements that are the parent of aother element,including text.
. $("li:contains(second)"): Selects all elements matched by <li> that contains the text second.
A JQuery selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.
How to use selectors:
The selectors are very usefull and would be required at every step while using JQuery. They get the exact element that you want from your HTML document.
JQuery Selectors:
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
Element $("p") All p elements
.class, .class $(".intro, .demo") All elements with the classes "intro" and "demo"
:first $("p:first") The first p element
:last $("p:last") The last p element
:even $("tr:even") All even tr elements
:odd $("tr:odd") All odd tr elements
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
:header $(":header") All header elements h1, h2..
:animated $(":animated") All animated elements
:contains(text) $(":contains(nit)") All elements which contains the text
:empty $(":empty") All elements with no child (elements) nodes
:hidden $("p:hidden") All hidden p elements
Visible $("table:visible") All visible tables
s1, s2, s3 $("th, td, .intro") All elements with matching selectors
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.html']") Allelements with value equal to"default.html"
[attribute!=value] $("[href!='default.html']") All elements with a href attribute value not equal to "default.html"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value endingwith ".jpg"
:input $(":input") All input elements
:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements
Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors:
. $('*'): This selector selects all elements in the document.
. $("p>*"): This selector selects all elements that are childern of a paragraph element.
. $("#specialID"): This selector function gets the element with id="specialID"
. $(".specialClass"): This selector gets all the elements that have the class of specialClass
. $("li:not(.myclass)"): Selects all elements matches by <li> that do not have class="myclass"
. $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
. $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements
. $("ul li:first"): This selector gets only the first <li> element of the <ul>
. $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
. $("li>ul"): Selects all elements matched by <ul> that are childer of an element matched by <li>
. $("strong+em"): Selects all elements matched by <em> that immediately followa sibling element matched by <strong>
. $("p~ul"): Selects all elements matched by <ul>that follow a sibling element matched by <p>
. $("code,em,strong"): Selects all elements matched by <code> or <em> or <strong>
. $("p strong,.myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
. $(".empty"): Selects all elements that have no children
. $("p:empty"): Selects all elements matched by <p> that have no children
. $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>
. $("p[.myclass]"): Slects all elements matched by <p> that contain an element with a class of myclass.
. $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
. $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname
. $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname
. $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar.
. $("a[@href*=domain.com]"): Selects all elemented matched by <a>that have an href value containing domain.com
. $("li:even"): Selects all elements matched by <li> that have an even index value
. $("tr:odd"): Selects all elements matched by <tr> that have an odd index value
. $("li:first"): Selects the first <li> element.
. $("li:last"): Selects the last <li> element.
. $("li:visible"): Selects all elements matched by <li> that are visible
. $("li:hidden"): Selects all elements matched by <li> that are hidden
. $(":radio"): Selects all radio buttons in the form
. $(":checked"): Selects all checked boxex in the form
. $(":input"): Selects only from elements(input,select,textarea,button)
. $(":text"): Selects only text elements(input[type=text])
. $("li:eq(2)"): Selects the third <li> element
. $("li:eq(4)"): Selects the fifth <li> element
. $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words,the first two <li> elements
. $("p:lt(3)"): Selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
. $("li%gt(1)"): Selects all elements matched by <li> after the second one
. $("p:gt(2)"): Selects all elements matched by <p> after the third one
. $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>
. $("div//code"): Selects all elements matched by <code> that are descendants of an element matched by <div>
. $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
. $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
. $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
. $(":parent"): Selects all elements that are the parent of aother element,including text.
. $("li:contains(second)"): Selects all elements matched by <li> that contains the text second.
Comments
Post a Comment