E-JAMBON bio photo

E-JAMBON

Ce qui se conçoit bien s'exprime clairement.

Email Twitter Github

JQuery notes

Fonctions de Jquery

La fonction principale :

jquery( document);   	/* That's how to acess the DOM */
jquery( "h1" ); 		/* equivalent to $("h1"); */
jquery( "p");   		/* equivalent to $("p"); */

To modify the h1’s text, for example one would proceed like this :

$("h1").text("Job title : In charge of the big door" );

To make sure DOM is loaded when we start playing with it, we’ll always start with a document ready.

$(document).ready(function(){
	$("h1").text("Job title : In charge of the big door" );
});

Using css-path to select elements

$(“p”); -> select p elements
$(“#container”); -> select elements with container id
$(“.articles”); -> select elements with class articles
$(“#destination li”); -> select all li descendants within
  the element with id “destination”
$(“destination > li”); -> select only direct li descendants of
  the element with id “destination”
$(“.promo , #france”) -> select those wich have the class element
  within the id france
$(“#destination li:first”); -> First li element within the #destination element
$(“#destination li:last”); -> Last li element within the #destination element
$(“#destination li:even”); -> even li element (by index) within the #destination element
$(“#destination li:odd”); -> event li element (by index) within the #destination element

Traversing

$(“li”).first(); -> first li element in the dom
$(“li”).first().next(); -> second li element in the dom
$(“li”).first().next(); -> first li element in the dom
$(“li”).first().parent(); -> parent of the first li element in the dom
$(“#destinations”).children(“li”); -> li direct childrens in the #destination.

Create a node and append to document

  • Select an item and use one of the following methods append() ,prepend(), before() ,after().
$document.ready( function(){
	var character_name = $( "<p>sneakypop</p> "); /* creating the node */
	$("ul").first().append(character_name); /* puts character_name at the end of the first ul content */
	$("h1").first().before(character_name); /* puts the character name before the first h1 tag */
	$("h1").first().after(character_name); /* puts the character name after the first h1 tag */
	$("ul").first().prepend(character_name); /* puts the character name at the beginning of the first ul's content */
});
  • Create a node and use on of the following methods onto it : appendTo(),prependTo();insertBefore();insertAfter();
$document.ready( function(){
	var character_name = $( "<p>sneakypop</p> "); /* creating the node */
	character_name.appendTo($("ul").first()) /* puts character_name at the end of the first ul content */
	character_name.insertBefore( $("h1").first()); /* puts the character name before the first h1 tag */
	character_name.insertAfter($("h1").first());; /* puts the character name after the first h1 tag */
	character_name.prependTo($("ul").first()); /* puts the character name at the beginning of the first ul's content */
});

Removing from the DOM

$document.ready( function(){
	$("ul").first().remove(); /* removes the first ul node. */
});

Event triggered function

When one wants to trigger something on an event, we must first select the element on which the event is taking place, then attach an event handler. One can use on() to attach an event handler. And it is possible to use off() to remove an event handler.

Here are the main event handlers :

method description
bind() Attach a handler to an event for the elements.
blur() Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
change() Bind an event handler to the “change” JavaScript event, or trigger that event on an element.
click() Bind an event handler to the “click” JavaScript event, or trigger that event on an element.
dblclick() Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.
delegate() Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
die() Remove event handlers previously attached using .live() from the elements.
error() Bind an event handler to the “error” JavaScript event.
focus() Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.
focusin() Bind an event handler to the “focusin” event.
focusout() Bind an event handler to the “focusout” JavaScript event.
hover() Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
keydown() Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.
keypress() Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.
keyup() Attach an event handler for all elements which match the current selector, now and in the future.
live() Attach an event handler for all elements which match the current selector, now and in the future.
load() Bind an event handler to the “load” JavaScript event.
mousedown() Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.
mouseenter() Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
mouseleave() Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
mousemove() Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.
mouseout() Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.
mouseover() Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.
mouseup() Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.
off() Remove an event handler.
ready() Specify a function to execute when the DOM is fully loaded.
resize() Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.
scroll() Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.
select() Bind an event handler to the “select” JavaScript event, or trigger that event on an element.
submit() Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.
toggle() Bind two or more handlers to the matched elements, to be executed on alternate clicks.
trigger() Execute all handlers and behaviors attached to the matched elements for the given event type.
triggerHandler() Execute all handlers attached to an element for an event.
unbind() <Remove a previously-attached event handler from the elements.
undelegate() Remove a handler from the event for all elements which match the current selector, based upon aspecific set of root elements.
unload() Bind an event handler to the “unload” JavaScript event.
$(document).ready(function() {
   $('button').on('click', function() {
     var price = $('<p>From $399.99</p>');
     $('.vacation').append(price);
     $('button').remove();
});