Jquery needs to load basic library.
After page is ready after data ... we can run a simple command as below...
$(document).ready(function() { $('#mainheader').css("color", "red"); });
following is breakdown
$ is shortcut of jquery method Jquery(??) that return a htmlelement or array of htmlelements
If you are already using $ for some other purpose...use following method to use some other method
var jq = jQuery.noConflict(); // now on you can use "jq" as your jquery shortcut
Let us talk about how to select elements $('SELECTOR')
in pure javascript we would have used follwing methods
What for?
What you get
getElementById(<id>)
HTMLElement
getElementsByClassName(<class>)
HTMLElement[]
getElementsByTagName(<tag>)
$(#<id> ) select an id element
$(.<class> ) select a class elements
$( [attr] )
irrespective of val
$( [attr="val"])
equals
$( [attr^="val"] )
starts with the string val
$( [attr$="val"] )
ends with the string val
$( [attr*="val"] )
contains the string val
$( [attr~="val"] )
contains multiple values, one of which is val
select by multiple conditions
<selector> <selector>
second selector are descendants of the elements matched by the first selector
Space needed
<selector> > <selector>
second selector and that are children of the elements matched by the first selector
>
<selector> + <selector>
second selector and are the next sibling to an element that matches the first selector
plus
<selector> ~ <selector>
Granchildren of first match
<selector> > *
All children
select by state
:active
Who gets the event when mouse clicked?
:checked
elements that are in a checked state.
:default
default elements.
:disabled
Selects elements that are in their disabled state.
:empty
elements that contain no child elements.
:enabled
elements that are in their enabled state.
:focus
the element that has the focus.
:hover
elements that occupy the position on-screen under the mouse pointer.
:link
Selects link elements.
:first-child
elements that are the first children of their parent.
:first-letter
Selects the first letter of a block of text.
:first-line
Selects the first line of a block of text.
:in-range
:out-of-range
constrained input elements that are within or outside the specified range.
:lang(<language>)
elements based on the value of the lang attribute.
:last-child
elements that are the last children of their parent.
:nth-child(n)
that are the nth child of their parent.
:nth-last-child(n)
elements that are the nth from last child of their parent.
:nth-last-of-type(n)
elements that are the nth from last child of their type defined by their parent.
:nth-of-type(n)
elements that are the nth child of their type defined by their parent.
:only-child
elements that are the sole element defined by their parent.
:only-of-type
:required
based on the presence of the required attribute.
:optional
:root
element in the document.
:target
element referred to by the URL fragment identifier.
:valid
:invalid
input elements that are valid or invalid based on input validation in forms.
:visited
elements that the user has visited.
!important
Override the cascade order
Ex: p {color: red !important};
Jquery needs to load basic library.
After page is ready after data ... we can run a simple command as below...
$(document).ready(function() {
$('#mainheader').css("color", "red");
});
following is breakdown
$ is shortcut of jquery method Jquery(??) that return a htmlelement or array of htmlelements
If you are already using $ for some other purpose...use following method to use some other method
var jq = jQuery.noConflict(); // now on you can use "jq" as your jquery shortcut
Let us talk about how to select elements $('SELECTOR')
in pure javascript we would have used follwing methods
What for?
What you get
getElementById(<id>)
HTMLElement
getElementsByClassName(<class>)
HTMLElement[]
getElementsByTagName(<tag>)
HTMLElement[]
What for?
What you get
$(#<id> ) select an id element
HTMLElement
$(.<class> ) select a class elements
HTMLElement[]
$( [attr] )
irrespective of val
$( [attr="val"])
equals
$( [attr^="val"] )
starts with the string val
$( [attr$="val"] )
ends with the string val
$( [attr*="val"] )
contains the string val
$( [attr~="val"] )
contains multiple values, one of which is val
HTMLElement[]
select by multiple conditions
<selector> <selector>
second selector are descendants of the elements matched by the first selector
Space needed
<selector> > <selector>
second selector and that are children of the elements matched by the first selector
>
<selector> + <selector>
second selector and are the next sibling to an element that matches the first selector
plus
<selector> ~ <selector>
Granchildren of first match
<selector> > *
All children
select by state
:active
Who gets the event when mouse clicked?
:checked
elements that are in a checked state.
:default
default elements.
:disabled
Selects elements that are in their disabled state.
:empty
elements that contain no child elements.
:enabled
elements that are in their enabled state.
:focus
the element that has the focus.
:hover
elements that occupy the position on-screen under the mouse pointer.
:link
Selects link elements.
:first-child
elements that are the first children of their parent.
:first-letter
Selects the first letter of a block of text.
:first-line
Selects the first line of a block of text.
:in-range
:out-of-range
constrained input elements that are within or outside the specified range.
:lang(<language>)
elements based on the value of the lang attribute.
:last-child
elements that are the last children of their parent.
:nth-child(n)
that are the nth child of their parent.
:nth-last-child(n)
elements that are the nth from last child of their parent.
:nth-last-of-type(n)
elements that are the nth from last child of their type defined by their parent.
:nth-of-type(n)
elements that are the nth child of their type defined by their parent.
:only-child
elements that are the sole element defined by their parent.
:only-of-type
:required
based on the presence of the required attribute.
:optional
based on the presence of the required attribute.
:root
element in the document.
:target
element referred to by the URL fragment identifier.
:valid
:invalid
input elements that are valid or invalid based on input validation in forms.
:visited
elements that the user has visited.
!important
Override the cascade order
Ex: p {color: red !important};