Jquery supports many different ways to select an
element or elements that should meet all
but the most awkward requirements.
The following table shows the lists example of other
selection methods you might want to use:
Example selection methods:
|
Selector
|
Selected
|
|
$(“#div”)
|
Select a div with ID of div1
|
|
$(“#div.standardDiv”)
|
Select all divs with a class of
standardDiv.
|
|
$(“.standardDiv”)
|
Select all elements with a class of
standardDiv
|
|
$(“#div4 #div5”)
|
Select a div with ID of div5 nested
inside a div with id of div4
|
|
$(“#div”)
|
Select all divs.
|
|
$(“.standardDiv”)[0].innerHTML=”hello Naresh”;
|
Select the first element of a group of
divs with class of standardDiv and set innerHTML property to “hello Naresh”.
|
CSS Selectors:
In addition to the previous standard selectors, more modern
selectors are also available.
The following table shows the lists example of CSS selection
methods you might want to use:
CSS Selectors:
|
Selector
|
Selected
|
|
$(“div:first”)
|
First div
|
|
$(“div:last”)
|
Last div
|
|
$(“div:even”)
|
Even-numbered divs
|
|
$(“div:odd”)
|
Odd-numbered divs
|
|
$(“div:first-child”)
|
First child element
|
|
$(“div:last-child”)
|
Last
child element
|
|
$(“div:nth-child(3)”)
|
Third child element
|
|
$(“a[href^=http://]”)
|
Any hyperlink starting with the text
http://
|
|
$(“a[href$=.zip/]”)
|
Any hyperlink ending with .zip
|
|
$(“a[href*=dotnet”)
|
Any hyperlink with the text dotnet in it
|
|
$(“input[type=button]”)[0].innerText=”hello Naresh”
|
Selects first input element of type
button and changes innerText property to “hello Naresh”
|
|
$(“:checked”)
|
Gets all check boxes that are checked
|
|
$(“:disabled”)
|
All disabled elements
|
|
$(“:enabled”)
|
All enabled elements
|
jQuery also has provides some inbuilt selectors of its own:
jquery selectors:
|
Selector
|
Effect
|
|
$(“:button”)[0].innerText=”hello naresh”;
|
Change inner Text property of first
button element.
|
|
$(“:contains(naresh)”)
|
All elements containing text naresh
|
|
$(“:hidden”)
|
All hidden elements
|
|
$(“:selected”)
|
All selected elements
|
|
$(“:visible”)
|
All visible elements
|
|
$(“div:not(.standardDiv)”)
|
Select all div elements that do not have
a class of standardDiv
|
0 comments:
Post a Comment