jQuery Tutorial Reading Notes Part II (CSS, DOM, Events)
This is a reading note for jQuery Tutorial on TutorialsPoint.com, including useful functions/concepts for web development using jQuery. Please note I only pick parts of core concept which I will use most often.
This reading note is based on jQuery 1.3.2
.
Note: All tips that is written by book will has a sign near it.
All code example in this post comes from offical documents.
CSS Methods
- Apply CSS Properties:
XX.css(PropertyName, PropertyValue);
. For example,$("#testId").css("display","none");
- Apply Multiple CSS Properties:
.css({key:value, key:value...})
:
|
|
Apply Width and Height:
.width(Number)
and.height(Number)
can be used directlyjQuery CSS Methods:
DOM Manipulation Methods
Content Manipulation:
.html()
. Please refer Reading Note I for usage.DOM Element Replacement:
XXX.replaceWith(content)
. XXX DOM element is replaced by content.DOM Remove:
XXX.empty()
remove all child elements from XXX elements.XXX.remove(selector)
remove all matched elemetns from DOM.DOM Insert:
XXX.before(content)
orXXX.after(content)
.Other DOM Manipulation Methods:
Event Handling
Binding Event Handlers
selector.bind(eventType, handler)
orselector.bind(eventTpe, eventData, handler)
eventType
is the action, such asclick
orsubmit
eventData
is optional.handler
is the function trriger for this event.
Remove Event Handlers
selector.unbind(eventType, handler)
orselector.unbind(eventType)
eventType
: same as abovehandler
: the handler that you want to remove
Event Types
Event Object and Attributes
event
can be used as a parameter in handler callback function. There are several attributes that can be retrived by usingevent.attributeName
. These attribute name returns useful values.Example:
|
|
- List of Attributes:
Event Methods
event
parameter can also run some methods to perform specific function. To use it, just doevent.XXX();
in callback function. Here is a list of event methods:- Please note
preventDefault()
is to prevent current function function working on current element, butstopPropagation()
is to prevent parent element’s function working on current element.
Event Manipulation Methods
There are other methods besides
bind()
, which can be used for jQuery events. Here is a list of them:hover(over, out)
:over
andout
can be replaced by two functions that you want to perform.
Event Helper Methods
To trigger an event function YY on XX element, just use
XX.YY();
There are some already defined methods that you can use
XX.YY()
format to add event to XX element. For example,$("#testId").click(function(){ ... });
. Here is a list: