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);
});
});