Date post: | 29-May-2018 |
Category: |
Documents |
Upload: | truongxuyen |
View: | 250 times |
Download: | 0 times |
SELECTORS - ATTRIBUTES CSS - MANIPULATION - TRAVERSING - EVENTS - EFFECTS - AJAX - CORE
JQUERY CSS
SELECTORSBasic
“ * ”
.class
element
#id
selector1, selectorN, ...
Hierarchy
parent > child
ancestor descendant
prev + next
prev ~ siblings
Basic Filters
:animated
:eq()
:even
:first
:gt()
:header
Content Filters
:contains()
:empty
:has()
:parent
Visibility Filters
:hidden
:visible
Attributes
[name|="value"]
[name*="value"]
[name~="value"]
[name$="value"]
[name="value"]
[name!="value"]
[name^="value"]
[name]
[name="value"][name2="value2"]
Child Filters
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type()
ATTRIBUTES \ CSS
Attributes
.attr()
.prop()
.removeAttr()
.removeProp()
.val()
Data
jQuery.data()
.data()
jQuery.hasData()
jQuery.removeData()
.removeData()
CSS
.addClass()
.css()
jQuery.cssHooks
.hasClass()
.removeClass()
.toggleClass()
Dimensions
.height()
.innerHeight()
.innerWidth()
.outerHeight()
.outerWidth()
.width()
Offset
.offset()
.offsetParent()
.position()
.scrollLeft()
.scrollTop()
Forms
:button
:checkbox
:checked
:disabled
:enabled
:focus
:file
:image
:input
:password
:radio
:rest
:selected
:submit
:text
:lang()
:last
:lt()
:not()
:odd
:root
:target
MANIPULATION
TRAVERSING
Copying
.clone()
Filtering
.eq()
.filter()
.first()
.has()
.is()
.last()
.map()
.not()
.slice()
Tree Traversal
.addBack()
.children()
.closest()
.find()
.next()
.nextAll()
.nextUntil()
Miscellaneous Traversing
.add()
.andSelf()
.contents()
.each()
.end()
DOM Removal
.detach()
.empty()
.remove()
.unwrap()
DOM Insertion, Around
.wrap()
.wrapAll()
.wrapInner()
DOM Insertion, Outside
.after()
.before()
.insertAfter()
.insertBefore()
DOM Replacement
.replaceAll()
.replaceWith()
DOM Insertion, Inside
.append()
.appendTo()
.html()
.prepend()
.prependTo()
.text()
.parent()
.parents()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
EVENTS
Browser Events
.error()
.resize()
.scroll()
Form Events
.blur()
.change()
.focus()
.select()
.submit() Mouse Events
.click()
.dblclick()
.focusin()
.focusout()
.hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
Mouse Events
event.currentTarget
event.data
event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()
event.namespace
event.pageX
event.pageY
event.preventDefault()
event.relatedTarget
event.result
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
Keyboard Events
.keydown()
.keypress()
.keyup()
Document Loading
.holdReady()
.load()
.ready()
.unload()
Event Handler Attachment
.bind()
.delegate()
.off()
.on()
.one()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
Basics
.hide()
.show()
.toggle()
Sliding
.slideDown()
.slideToggle()
.slideUp()
Custom
.animate()
.clearQueue()
.delay()
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop()
Fading
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
EFFECTS
Global Ajax Event Handlers
.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()
Helper Functions
jQuery.param()
.serialize()
.serializeArray()
Shorthand Methods
jQuery.get()
jQuery.getJSON()
jQuery.getScript()
.load()
jQuery.post()
Low-Level Interface
jQuery.ajax()
jQuery.ajaxSetup()
AJAX
CORE
jQuery Object
jQuery()
jQuery.noConflict()
jQuery.when()
Utilities
jQuery.contains()
jQuery.each()
jQuery.extend()
jQuery.globalEval()
jQuery.grep()
jQuery.inArray()
jQuery.isArray()
jQuery.isEmptyObject()
jQuery.isFunction()
jQuery.isNumeric()
jQuery.isPlainObject()
jQuery.isWindow()
jQuery.isXMLDoc()
jQuery.makeArray()
jQuery.map()
jQuery.merge()
jQuery.noop()
jQuery.now()
jQuery.parseHTML()
jQuery.parseJSON()
jQuery.parseXML()
jQuery.proxy()
jQuery.support
jQuery.trim()
jQuery.type()
jQuery.unique()
DOM Element Methods
.get()
.index()
.size()
.toArray()
Internals
.jquery
.context
jQuery.error()
.length
.pushStack()
.selector
Callbacks Object
jQuery.Callbacks()
callbacks.add()
callbacks.disable()
callbacks.empty()
callbacks.fire()
callbacks.fired()
callbacks.fireWith()
callbacks.has()
callbacks.lock()
callbacks.locked()
callbacks.remove()
Deferred Object
deferred.always()
deferred.done()
deferred.fail()
deferred.notify()
deferred.notifyWith()
deferred.pipe()
deferred.progress()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.state()
deferred.then()
.promise()
jQuery CSS - CSS
Get css property of element.
Set multiple properties.
Set single property.
$(“#elementid”).(cssproperty);
$(“#elementid”).css({‘border’:’1px
solid red’, ‘font-size’ : ‘12px’,
‘font-weight:bold’});
Set single property. $(“#elementid”).css(‘border’, ‘1px
solid red’);
CSS - POSITIONING - HEIGHT & WIDTH - STYLESHEETS - CLASS - ATTRIBUTES
jQuery CSS - Positioning
Get the offset (position
of element relative to
the page). Returned as
an object.
Get the position
(position of element
relative to parent).
Returned as object.
Get scrollbar vertical
position. Works on any
element with scrollbar.
Set scrollbar vertical position.
Get scrollbar horizontal position.
Set scrollbar horizontal position
var offset =
$(“#elementid”).offset();
alert(offset.left);
alert(offset.top);
var position =
$(“#elementid”).offset();
alert(position.left);
alert(position.top);
$(window).scrollTop();
$(window).scrollTop(700);
$(window).scrollLeft();
$(window).scrollLeft(400);
Stylesheets
Change single stylesheet.
Switch particular stylesheet.
Add a stylesheet.
$("link[rel=stylesheet]").attr({href :
"css/sheet_a.css"});
$("link[rel=stylesheet][href=css/sheet_c.css]").attr(
{href : "css/sheet_a.css"});
$("head").append('<link rel="stylesheet"
type="text/css" href="css/sheet_a.css" />');
jQuery CSS - Height & Width
Get the current height of element.
Set the current height of element.
Get the current width of element.
Set the current width of element.
Get the inner height (height of element
incl. padding excl. border) of element.
Get the inner width (width of element
incl. padding excl. border) of element.
Get the outer height (height of element
incl. padding and border) of element. If
true param passed in also includes
margin height.
Get the outer width of element
(see outer height notes above).
$(“#elementid”).height();
$(“#elementid”).height(120);
$(“#elementid”).width();
$(“#elementid”).width(170);
$(“#elementid”).innerHeight();
$(“#elementid”).innerWidth();
$(“#elementid”).outerHeight();
or
$(“#elementid”).outerHeight(true);
$(“#elementid”).outerWidth();
or
$(“#elementid”).outerWidth(true);
jQuery Attributes - Class
Add a class to an element.
Check element has a particular class.
Remove a class from an element.
Remove a class if element has it
otherwise add the class.
$(“#elementid").addClass(“class”);
$(“#elementid").hasClass(“class”);
$(“#elementid”).removeClass(“class”);
$(“#elementid").toggleClass(“class”);
jQuery Attributes - Attr
Get the ID of element.
Set the ID of element.
Remove the ID attribute
from an element.
e.g. $(“#elementid div:firstchild").attr("id");
e.g. $(“#elementid div:firstchild").attr("id",
“my_new_id”);
$(“#elementid”).removeAttr(“id”);