快捷導(dǎo)航

jquerydom對(duì)象的事件隱藏顯示和對(duì)象數(shù)組示例

更新時(shí)間：2013年12月10日 17:10:07 作者：

本文為大家介紹下jquery的dom對(duì)象的事件隱藏顯示和對(duì)象數(shù)組，感興趣的朋友可以參下

1.事件處理

1.1.事件綁訂

bind(type,fn);

例子:

 
$(function(){ 

//正式的寫法 
$('#d1').bind('click',function(){ 
$(this).css('font-size','80px'); 
}); 

//簡(jiǎn)寫形式 
$('#d1').click(function(){ 
$(this).css('font-size','80px'); 
}); 
}); 

1.2.綁訂方式的簡(jiǎn)寫形式

復(fù)制代碼代碼如下:

 
click(function(){ 
}); 

1.3.合成事件

hover(enter,leave) : 模擬光標(biāo)懸停事件
toggle(fn1,fn2...) : 模擬鼠標(biāo)連續(xù)單擊事件

例子1:

復(fù)制代碼代碼如下:

 
$(function(){ 
//分開的事件 
$('.s1').mouseenter(function(){ 
$(this).addClass('s2'); 
}); 

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

//合成事件 
$('.s1').hover(function(){ 
$(this).addClass('s2'); 
},function(){ 
$(this).removeClass('s2'); 
}); 
}); 

例子2:

復(fù)制代碼代碼如下:

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

1.4.事件冒泡//子節(jié)點(diǎn)產(chǎn)生的事件會(huì)依次向上拋給父節(jié)點(diǎn)

1.4.1.獲得事件對(duì)象//只需要給事件處理函數(shù)添加一個(gè)任意變量即可，比如e
//e不是真正的事件對(duì)象，而是對(duì)底層的事件對(duì)象的一個(gè)封裝

click(function(e){

});

例子1:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('a').click(function(e){ 
//e:jQuery對(duì)象，里面包含了一個(gè)事件對(duì)象。 
//target屬性返回的是一個(gè)dom對(duì)象，即事件源。 
var srcObject = e.target; 
alert(srcObject.innerHTML); 
}); 
}); 

1.4.2.停止冒泡

event.stopPropagation();

例子2:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('a').click(function(e){ 
alert('你點(diǎn)擊了一個(gè)鏈接'); 
//停止冒泡 
e.stopPropagation(); 
}); 

$('#d1').click(function(e){ 
alert('你點(diǎn)擊了一個(gè)div'); 
}); 
}); 

1.4.3.停止默認(rèn)行為

event.preventDefault();//比如表單提交

例子3:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('a').click(function(e){ 
var flag = confirm('是否確定刪除?'); 
if(!flag){ 
//停止默認(rèn)行為 
e.preventDefault(); 
} 
}); 
}); 

1.5.事件對(duì)象的屬性

event.type : 事件類型
event.target : 返回事件源（是dom對(duì)象!!!）
event.pageX/pageY : 點(diǎn)擊的點(diǎn)的坐標(biāo)

例子4:

復(fù)制代碼代碼如下:

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

alert(e.type); //獲得事件類型 

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

}); 
}); 

1.6.模擬操作//如.$('xxx').mouseenter();

$('xxx').trigger('被模擬的事件');//也可以簡(jiǎn)化

例子5:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('#b1').click(function(){ 
//讓username對(duì)應(yīng)的文本輸入框獲得焦點(diǎn) 
$('#username').trigger('focus'); 
//另外，也可以簡(jiǎn)化 
$('#username').focus(); 
}); 
}); 

2.動(dòng)畫

2.1.show() / hide()//顯示 / 隱藏
//作用:通過同時(shí)改變?cè)氐膶挾群透叨葋韺?shí)現(xiàn)顯示和隱藏

用法:
show(速度,[回調(diào)函數(shù)]);

速度可以使用"normal","fast","slow"，也可以使用毫秒數(shù)

回調(diào)函數(shù)會(huì)在整個(gè)動(dòng)畫執(zhí)行完畢之后執(zhí)行

2.2.slideUp() / slideDown()

//作用：通過改變?cè)氐母叨葋韺?shí)現(xiàn)顯示和隱藏
用法同上。

例子:

復(fù)制代碼代碼如下:

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

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

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

},function(){ 

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

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

}); 
});

2.3.fadeIn() / fadeOut()//淡入，淡出

//作用：通過改變?cè)氐牟煌该鞫葋韺?shí)現(xiàn)顯示和隱藏
用法同上。

例子:

復(fù)制代碼代碼如下:

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

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

},function(){ 

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

}); 
});

2.4.自定義動(dòng)畫

animate(params,speed,[callback])

params : //是一個(gè)javascript對(duì)象，描述的是動(dòng)畫執(zhí)行結(jié)束時(shí)的樣式。

speed : //速度，單位是毫秒。

callback : //回調(diào)函數(shù)，會(huì)在動(dòng)畫執(zhí)行完畢之后執(zhí)行。

例子:

復(fù)制代碼代碼如下:

 
$(function(){ 
$('#d1').click(function(){ 
//動(dòng)畫隊(duì)列 
$(this).animate({'left':'400px'},3000); 
$(this).animate({'top':'250'},2000).fadeOut('slow'); 
}); 
}); 

3.類數(shù)組的操作

//類數(shù)組：指的是jQuery選擇器會(huì)將查找到的所有的dom對(duì)象封裝成一個(gè)jQuery對(duì)象，
//將這些dom對(duì)象稱為類數(shù)組。

3.1.length屬性 : //獲得jQuery對(duì)象包含的dom對(duì)象的個(gè)數(shù)。

3.2.each(fun(i)) : //循環(huán)遍歷每一個(gè)元素,this代表被迭代的dom對(duì)象，
//$(this)代表被迭代的jquery對(duì)象。

3.3.eq(index) : //返回index+1位置處的jquery對(duì)象

3.4.index(obj) : //返回下標(biāo)，其中obj可以是dom對(duì)象或者jquery對(duì)象。

3.5.get() : //返回dom對(duì)象組成的數(shù)組

3.6.get(index) : //返回index+1個(gè)dom對(duì)象。

例子:

復(fù)制代碼代碼如下:

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

$obj.each(function(i){ 
//i:表示正在被訪問的那個(gè)dom對(duì)象的下標(biāo), 
//下標(biāo)從0開始。 
//this:表示正在被訪問的那個(gè)dom對(duì)象 
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); 
}); 
}); 