JQuery Selectors and CSS Slectors in JQuery || Selecting Elements in JQuery


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