All in one JQuery

Jquery loading

jquery usage

Jquery effects

STRIDE (security)

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};