An example of an event hiding display and an array of objects for the jquerydom object

1. Event handling

1.1. Event binding

Bind (type, fn);

Example:

 
$(function(){ 

//Formal writing
$('#d1').bind('click',function(){ 
$(this).css('font-size','80px'); 
}); 

//shorthand
$('#d1').click(function(){ 
$(this).css('font-size','80px'); 
}); 
}); 

1.2. Short form of binding method

 
click(function(){ 
}); 

1.3. Composite events

Hover (enter,leave) : simulates cursor hover events
Toggle (fn1, fn2...). : simulates a continuous mouse click event

Example 1:

 
$(function(){ 
//Separate events
$('.s1').mouseenter(function(){ 
$(this).addClass('s2'); 
}); 

$('.s1').mouseleave(function(){ 
$(this).removeClass('s2'); 
}); 

//Synthetic events
$('.s1').hover(function(){ 
$(this).addClass('s2'); 
},function(){ 
$(this).removeClass('s2'); 
}); 
}); 

Example 2:

 
$(function(){ 
$('#a1').toggle(function(){ 
$('#d1').show('slow'); 
},function(){ 
$('#d1').hide('slow'); 
}); 
}); 

1.4. The events generated by the event bubbling // child node will be thrown up to the parent node in turn

1.4.1. To get the event object // simply add an arbitrary variable to the event handler, such as e
//e is not a real event object, but a wrapper around the underlying event object

Click (function (e) {

});

Example 1:

 
$(function(){ 
$('a').click(function(e){ 
//E :jQuery object, which contains an event object.
//The target property returns a dom object, the event source.
var srcObject = e.target; 
alert(srcObject.innerHTML); 
}); 
}); 

1.4.2. Stop bubbling

Event. StopPropagation ();

Example 2:

 
$(function(){ 
$('a').click(function(e){ 
alert(' You click on a link '); 
//Stop the bubbling
e.stopPropagation(); 
}); 

$('#d1').click(function(e){ 
alert(' You click on one div'); 
}); 
}); 

1.4.3. Stop default behavior

Event. The preventDefault (); // such as form submission

Example 3:

 
$(function(){ 
$('a').click(function(e){ 
var flag = confirm(' Whether to delete ?'); 
if(!flag){ 
//Stop default behavior
e.preventDefault(); 
} 
}); 
}); 

1.5. Properties of the event object

Event.type: event type
Event.target: returns the event source (which is a dom object!!)
Event.pagex /pageY: the coordinates of the point clicked

Example 4:

 
$(function(){ 
$('a').click(function(e){ 

alert(e.type); //Get the event type

alert(e.pageX + ' ' +e.pageY); 

}); 
}); 

$(' XXX ').mouseenter();

$(' XXX ').trigger(' emulated event '); // can also be simplified

Example 5:

 
$(function(){ 
$('#b1').click(function(){ 
//Let the text field corresponding to username get the focus
$('#username').trigger('focus'); 
//Also, you can simplify it
$('#username').focus(); 
}); 
}); 

2. The animation

2.1. Show ()/ hide()// show/hide
// function: display and hide by changing the width and height of the element at the same time

Usage:
Show (speed,[callback function]);

Speed can be "normal","fast","slow", or the number of milliseconds

The callback function is executed after the entire animation is completed

2.2. SlideUp ()/slideDown ()

// effect: display and hide by changing the height of the element
The usage is the same as above.


Example:

 
$(function(){ 
$('#a1').toggle(function(){ 

$('#d1').show('slow'); 

$('#d1').slideDown('slow'); 

},function(){ 

$('#d1').hide('slow'); 

$('#d1').slideUp('slow'); 

}); 
}); 

2.3.fadeIn()/fadeOut()// fadeIn and out

// effect: show and hide by changing the opacity of the element
The usage is the same as above.

Example:

 
$(function(){ 
$('#b1').toggle(function(){ 

$('#d1').fadeOut('slow'); 

},function(){ 

$('#d1').fadeIn('slow'); 

}); 
}); 

2.4. Custom animation

The animate (params, speed, [callback])

Params: // is a javascript object that describes the style at the end of the animation.

Speed: // speed, in milliseconds.

Callback: // callback function, which is executed after the animation completes.


Example:

 
$(function(){ 
$('#d1').click(function(){ 
//The animation queue
$(this).animate({'left':'400px'},3000); 
$(this).animate({'top':'250'},2000).fadeOut('slow'); 
}); 
}); 

3. Operation of class array

// class array: refers to the jQuery selector will find all the dom objects wrapped into a jQuery object,
// these dom objects are called class arrays.

3.1.length property: // gets the number of dom objects that the jQuery object contains.

3.2. Each (fun(I)) : // loops through each element,this represents the dom object to be iterated over,
//$(this) represents the jquery object to be iterated.

Eq (index) : // returns the jquery object at the index+1 position

3.4. Index (obj) : // returns a subscript, where obj can be a dom object or a jquery object.

3.5.get() : // returns an array of dom objects

3.6.get(index) : // returns index+1 dom objects.

Example:

 
$(function(){ 
$('#b1').click(function(){ 
//var $obj = $('ul li'); 
alert($obj.length); 

$obj.each(function(i){ 
//I: represents the index of the dom object being accessed,
//The index starts at 0.
//This: represents the dom object being accessed
if(i==0){ 
$(this).css('font-size','60px'); 
}else if(i==1){ 
$(this).css('font-style','italic'); 
}else{ 
$(this).css('color','red'); 
} 
}); 

//var $obj = $('ul li'); 
var $o = $obj.eq(1); 
//$o.css('font-size','60px'); 
var index = $obj.index($o); 
//alert(index); 

//var $obj = $('ul li'); 
var arr = $obj.get(); 
//alert(arr[1].innerHTML); 

var $obj = $('ul li'); 
var obj = $obj.get(1); 
alert(obj.innerHTML); 
}); 
});