jquerydom物件的事件隱藏顯示和物件陣列範例_jquery

1.事件處理

1.1.事件綁訂

bind(type,fn);

例子:

複製程式碼 程式碼如下:

$(function(){

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

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

1.2.綁定方式的簡寫形式

複製碼 代碼如下:

click(function(){

});


1.3.合成事件

hover(enter,leave) : 模擬遊標懸停事件
toggle(fn1,fn2...) : 模擬鼠標連續單擊事件

例子1:

複製代碼 程式碼如下:

$(function(){

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

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

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


範例2:

複製程式碼 程式碼如下:

$(function(){

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

1.4.事件冒泡//子節點產生的事件會依序向上拋給父節點

1.4.1.取得事件對象//只需要為事件處理函數新增一個任意變數即可，例如e
//e不是真正的事件對象，而是對底層的事件對象的一個封裝

click(function(e){

});

例子1:

複製代碼 程式碼如下:

$(function(){
$('a').click(function(e){
//e:jQuery對象，裡面包含了一個事件物件。
//target屬性傳回的是dom對象，即事件來源。
var srcObject = e.target;
alert(srcObject.innerHTML);
});
});

1.4.2.停止冒泡


1.4.2.停止冒泡

1.4.2.停止冒泡 1.4.2.停止冒泡 1.4.2.停止冒泡

event.stopPropagation();

範例2:




複製程式碼



複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製程式碼

程式碼如下:

$(function(){
$('a').click(function(e){
alert('你點擊了一個連結');
//停止冒泡
e.stopPropagation();
});

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


1.4.3.停止預設行為

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

範例3: 複製程式碼

程式碼如下:


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

});



1.5.事件物件的屬性

event

event .type : 事件類型event.target : 傳回事件來源（是dom物件!!!） event.pageX/pageY : 點選的點的座標範例4:

複製程式碼


程式碼如下:


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

alert(e.type); //取得事件類型alert(e.pageX ' ' e.pageY); } ); }); 1.6.模擬操作//如.$('xxx').mouseenter(); $('xxx').trigger ('被模擬的事件');//也可以簡化範例5: 複製程式碼 程式碼如下: $(function(){ $('#b1').click(function(){ //讓username對應的文字輸入框獲得焦點$('#username').trigger('focus'); //另外，也可以簡化$('#username').focus(); }); });
2.動畫

2.1.show() / hide()//顯示/ 隱藏
//作用:透過同時改變元素的寬度和高度來實現顯示和隱藏

用法:
show(速度,[回呼函數]);

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

回調函數會在整個動畫執行完畢之後執行

2.2.slideUp() / slideDown()

//作用：透過改變元素的高度來實現顯示和隱藏
用法同上。


範例:

複製程式碼 程式碼如下:

程式碼如下:
(function(){
$('#a1').toggle(function(){

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

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

},function(){

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

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

});

});



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

//作用：透過改變元素的不透明度來實現顯示和隱藏
用法同上。

範例: 複製程式碼

程式碼如下:



程式碼如下:


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

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

},function( ){

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

});
});


2.4.自定義動畫

animate(params,speed,[callback])

params : //是一個javascript對象，描述的是動畫執行結束時的樣式。

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

callback : //回呼函數，會在動畫執行完畢之後執行。 範例:

複製程式碼


程式碼如下:



程式碼如下:

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



3.類別數組的操作

//類別數組：指的是jQuery選擇器會將查找到的所有的dom對象封裝成一個jQuery對象，
//將這些dom物件稱為類別數組。

3.1.length屬性 : //取得jQuery物件所包含的dom物件的數量。

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

3.3.eq(index) : //傳回index 1位置的jquery物件

3.4.index(obj) : //回傳下標，其中obj可以是dom物件或jquery對象。 3.5.get() : //傳回由dom物件組成的陣列 3.6.get(index) : //傳回index 1個dom物件。 範例:

複製程式碼


程式碼如下:



程式碼如下:


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

$obj.each(function(i){
//i:表示正在被存取的那個dom物件的下標,
//下標從0開始。
//this:表示正在被存取的那個dom物件
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); }); });