DIV CSS 佈局教程網

jQ的Click事件
編輯:JQuery常見問題     
定義和用法
當點擊元素時,會發生 click 事件。
當鼠標指針停留在元素上方,然後按下並松開鼠標左鍵時,就會發生一次 click。
click() 方法觸發 click 事件,或規定當發生 click 事件時運行的函數。

例子:

<html>
<head>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ke"+"leyibutton").click(function(){
$("#ke"+"leyiparagraph").slideToggle();
});
});
</script>
</head>
<body>
<div style="border:1px solid silver">
<p id="keleyiparagraph">這是一個段落。</p>
<button id="keleyibutton">切換</button>
</div>
</body>
</html>


上面代碼的功能:當點擊按鈕時,隱藏或顯示元素(這裡是一個段落)。

效果如下:

這是一個段落。本文網址:http:///a/bjac/e9qcsill.htm




觸發click事件的語法
$(selector).click()
例子:
<html>
<head>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
$("p").dblclick(function(){
$("button").click();
});
});
</script>
</head>
<body>
<button>點擊這裡進行切換</button>
<p>雙擊本段落會觸發上面這個按鈕的 click 事件。</p>
</body>
</html>


將函數綁定到 click 事件的語法
$(selector).click(function)
其中function可選。指定當發生 click 事件時運行的函數。

例子:

<html>
<head>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<button>切換</button>
</body>
</html>



移除click事件:
unbind() 方法移除被選元素的事件處理程序。
該方法能夠移除所有的或被選的事件處理程序,或者當事件發生時終止指定函數的運行。
ubind() 適用於任何通過 jQuery 附加的事件處理程序。

綁定事件:
$(function () {
$("#btn").bind("click", function () {
$("#test").append("

綁定的函數1

");
}).bind("click", function () {
$("#test").append("

綁定的函數2

");
}).bind("click", function () {
$("#test").append("

綁定的函數3

");
})
})
移除IDbtn的元素的所有綁定的事件(可能包括dbclick、mouseover等等事件)
$("#dellall").click(function () {
$("#btn").unbind();
})


綁定事件(為這些匿名處理函數指定一個變量):
$(function () {
$("#btn").bind("click", myfun1 = function () {
$("#test").append("

綁定的函數1

");
}).bind("click", myfun2 = function () {
$("#test").append("

綁定的函數2

");
}).bind("click", myfun3 = function () {
$("#test").append("

綁定的函數3

");
})
})

然後就可以單獨刪除某一個事件了,jQuery代碼如下:
$("#deltwo").click(function () {
$("#btn").unbind("click", myfun2); //刪除“綁定函數2”
})
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved