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...}):
1
2
3
4
$('#testId').css({
	"color" : "red",
	"background-color": "blue"
});

  • Apply Width and Height: .width(Number) and .height(Number) can be used directly

  • jQuery 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) or XXX.after(content).

  • Other DOM Manipulation Methods:

Event Handling

Binding Event Handlers

  • selector.bind(eventType, handler) or selector.bind(eventTpe, eventData, handler)
  • eventType is the action, such as click or submit
  • eventData is optional.
  • handler is the function trriger for this event.

Remove Event Handlers

  • selector.unbind(eventType, handler) or selector.unbind(eventType)
  • eventType: same as above
  • handler: 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 using event.attributeName. These attribute name returns useful values.

  • Example:

1
2
3
4
$('#testId').bind('click',function(event){
	alert(event.type); //here event parameter means the 'click' object
	alert(event.pageX); //type and pageX are attributes for event object
});
  • List of Attributes:

Event Methods

  • event parameter can also run some methods to perform specific function. To use it, just do event.XXX(); in callback function. Here is a list of event methods:
  • Please note preventDefault() is to prevent current function function working on current element, but stopPropagation() 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 and out 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: