1. 程式人生 > >jQuery中的時間和動畫

jQuery中的時間和動畫

1、載入DOM:以瀏覽器載入文件為例,在頁面載入完成後,瀏覽器會通過JavaScript為DOM事件新增事件,在jQuery紅使用$(document).ready()方法;

2、執行時機:jQuery中的$(document).ready()方法註冊的事件處理程式在DOM完全就緒時就可以被呼叫;

3、jQuery中的$(document).ready()方法註冊的事件,只要DOM完全就緒時就會被呼叫;

4、避免方法:為onload事件繫結一個處理函式

$(window).load(function() {
    //編寫程式碼
}

5、多次使用:

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

6、簡寫方式:$(doxument)可以簡寫成$()。因為當$()沒有引數時,預設引數就是“document”;

7、事件繫結:在文件載入完成後,如果打算為元素繫結事件來完成某些操作,可以使用bind()方法來對匹配元素來進行特定事件的繫結;

8、bind()有3個引數:(1)事件型別,可以使自定義名稱;(2)可選引數,作為event.data屬性值傳遞給事件物件的額外資料物件;(3)用來繫結的處理函式;

9、基本效果:

HTML程式碼:
<div id="panel">
    <h5 class="head">什麼是jQuery?</h5>
    <div class="content">
      jQuery是一個優秀的JavaScript庫。
    </div>
</div>


javascript程式碼:
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

10、加強效果:

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

11、改變繫結事件的型別:

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

12、簡寫繫結時間:

$(function() {
    $("#panel h5.head").mouseover(function() {
        $(this).next().show();
    }).mouseover(function() {
        $(this).next().hide();
    })
})

13、合成事件:有兩個,hover()方法和toggle()方法;

14、hover()方法:

$(function() {
    $("#panel h5.head").hover(function() {
        $(this).next().show();
    }.function() {
        $(this).next().hide();
    })
})

15、toogle方法:

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

16、再次加強事件:

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

17、事件冒泡:在頁面上可以有多個事件,也可以多個元素響應通一個事件:

HTML程式碼:
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>




JavaScript程式碼:
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>內層span元素被單擊.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外層div元素被單擊.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被單擊</p>.";
		$('#msg').html(txt);
	});
})

18、事件冒泡引發的問題:本來只想觸發最內層元素的click事件,然後這個元素外層的元素也會被觸發;

19、觸發自定義事件:

為元素繫結一個“myClick”事件:
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定義事件.</p>");
})


想要觸發:
$('#btn').trigger("myClick")

20、hide()方法:為一個元素呼叫hide()方法,會將該元素的display樣式改為"none";

21、當呼叫show()方法時,就會根據hide()方法記住display屬性值來顯示元素;