jQuery : or $ use to defined jQuery Function
selecor : use to indentify the HTML element
method : used to generate an action for an elememt.
$('document').ready()
excute after DOM structure is fully loaded
just look for dom but dosen't wait for images to be loaded.
$(windows).load()
executes after the complete page is loaded.
Wait until all the images controls are to be loaded.
Basic Selectors
elememt : $('p')
id : $('#idName')
class : $('.className')
universal : $('*')
multiple : $(.className,#id,.asca)
Hierarchy Selectors
child : $('parent > child') // immediate children of parent
descendant : $('parent child') // all child inside parent
Next Adjacent : $('element + next adjacent')
next sibling : $(h1 ~ h2)
Attribute Selector
$('[attribute]')
$('[attribute=value]')
$('[attribute!=value]')
$('[attribute^=value]') //name start with "value"
$('[attribute$=value]') // name end with "value"
$('[attribute*=value]') // name contain with "value"
$( "input[name^='news']" ).val( "news here!" );
<input name="newsboy">
Basic Dom
.addClass("clsass1 class2") // use to add a style class to a specific element
.hassClass('class1') // use to check wether the given class exist or not
.removeClass('class2') // use to remove a style class to a specific element
Replace Meythods
1.ReplaceAll : used to replace the new content to all the selected element
$(content).replaceAll(selector)
2.Replace With
$(selector).replaceWith(content)
Insert Inside DOM Method
Append
$('targetelement').append('content')
append To
$('content').appendTo('targetelement')
Prepend
$('targetelement').prepend('content')
Prepend To
$('content').prependTo('targetelement')
Html
$('targetelement').html('content')
Text
$('targetelement').textl('text')
Val
$('targetelement').val('val text')
Insert Around DOM Method
.wrap()
.unWrap()
.wrapAll()
.wrapInner()
insert Outside DOM Method
$('selector').after('content')
$('selector').before('content')
$('content').insertAfter('selector')
$('content').insertBefore('selector')
Clone
$('selector').clone()
CSS Methods
.css() // $(selector).css('propoerty':'value')
.width()
.innerWidth() // width padding
.outerWidth() // with + padding + border
.outerWidth(true) // with + padding + border + margin
.height()
.innerHeight()
.outerHeight()
.offSet({top:value,left:value})
JQuery Event
.click()
.dblClick()
.mouseEnter()
.mouseLeave()
.mouseOver()