Event hiding display and object array example of jquerydom object_jquery

1. Event processing

1.1. Event binding

bind(type,fn);

Example:

Copy code The code is as follows:

$(function(){

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

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

1.2. Abbreviation of binding method

Copy code The code is as follows:

click(function(){
});

1.3. Synthetic events

hover(enter,leave): simulate cursor hover event
toggle(fn1,fn2...): Simulate continuous mouse click events

Example 1:

Copy code The code is as follows:

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

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

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

Example 2:

Copy code The code is as follows:

$(function(){
$('#a1') .toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide('slow' ; >1.4.1. Obtain the event object // Just add an arbitrary variable to the event processing function, such as e
// e is not a real event object, but a package of the underlying event object

click(function(e){

});

Example 1:




Copy code


The code is as follows:

$(function(){ $('a').click(function(e){ //e:jQuery object, inside Contains an event object. //The target attribute returns a DOM object, which is the event source. var srcObject = e.target; alert(srcObject.innerHTML);

});

});


1.4.2. Stop bubbling

event.stopPropagation();

Example 2:

Copy code


The code is as follows:

$(function(){ $('a').click(function(e){ alert('You clicked a link'); //Stop Bubblee.stopPropagation(); });

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


1.4.3. Stop default behavior

event.preventDefault();//For example, form submission

Example 3:

Copy code


The code is as follows:

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

}

});
});



1.5. Attributes of event objects

event .type: event type
event.target: return the event source (it is a dom object!!!)
event.pageX/pageY: the coordinates of the clicked point

Example 4:




Copy code


The code is as follows:

$(function(){ $('a'). click(function(e){ alert(e.type); //Get the event type alert(e.pageX ' ' e.pageY);

} );
});


1.6. Simulation operation // Such as.$('xxx').mouseenter();

$('xxx').trigger ('Simulated event');//You can also simplify

Example 5:

Copy code


code As follows:

$(function(){ $('#b1').click(function(){ //Let the text input box corresponding to username get focus$('#username').trigger('focus'); //In addition, you can also simplify $('#username').focus();

});

});


2. 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]);

You can use "normal", "fast", "slow" for speed, or you can use milliseconds

callback The function will be executed after the entire animation is executed

2.2. slideUp() / slideDown()

//Function: Display and hide by changing the height of the element
Usage is the same as above.


Example:

Copy code The code is as follows:

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

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

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

},function(){

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

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

});
});

2.3.fadeIn() / fadeOut()//Fade in, fade out

//Function: Show and hide by changing the opacity of the element
Usage is the same as above.

Example:

Copy code The code is as follows:

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

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

},function( ){

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

});
});

2.4.Since Define animation

animate(params,speed,[callback])

params: //It is a javascript object that describes the style when the animation execution ends.

speed: //Speed, unit is milliseconds.

callback: //Callback function will be executed after the animation is completed.


Example:

Copy code The code is as follows:

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

3. Array-like operations

//Array-like: refers to the jQuery selector that will encapsulate all found DOM objects into a jQuery object,
//will These DOM objects are called array-like objects.

3.1.length property: //Get the number of DOM objects contained in the jQuery object.

3.2.each(fun(i)): //Loop through each element, this represents the dom object being iterated,
//$(this) represents the jquery object being iterated.

3.3.eq(index): //Return the jquery object at index 1

3.4.index(obj): //Return the subscript, where obj can be a dom object or jquery object.

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

3.6.get(index): //Returns index 1 dom object.

Example:

Copy code The code is as follows:

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

$obj.each(function(i){
//i: Indicates the subscript of the DOM object being accessed,
//The subscript starts from 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);
});
});