jQuery操作事件完整例項分析
阿新 • • 發佈：2020-01-11
本文例項講述了jQuery操作事件。分享給大家供大家參考，具體如下：
<html>
<head>
<title>jQuery操作事件</title>
<meta charset="UTF-8"/>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//點選事件
//js操作事件
function testJs(){
//獲取物件
var btn=document.getElementById("btn");
//設定其onclick屬性
btn.onclick=function(){alert("這是js操作事件")}; //僅需要觸發一次就可以無限次的點選觸發按鈕的點選事件
}
function testBind(){
//獲取物件
var btn=$("#jq");
//利用jQuery進行事件的繫結
btn.bind("click",function(){alert("jQuery繫結實現")}); //對onclick屬性進行繫結，當觸發事件後，執行後觸發函式，其中click算是一個屬性，所以用“”連結，而後面的函式則是內容，沒用“”
btn.bind("click",function(){alert("繫結第二個呢")}); //可以連續點選幾次來在點選一次時觸發幾次函式
}
function testUnbind(){
//獲取物件
var btn=$("#jq");
//利用jQuery進行事件的解綁
btn.unbind("click"); //解綁jQuery的事件，無論點選了幾次
// $("#jq").unbind("click");
}
function testOne(){
//獲取物件
var btn=$("#one");
//利用jQuery的one方法進行事件的繫結
btn.one("click",function(){alert("jQuery利用one實現繫結")}); //只會繫結一次，當事件觸發後就會失效
}
//點選頁面載入事件
window.onload=function testLoad(){
alert("JS方法進行頁面載入");
}
window.onload=function testLoad(){
alert("JS方法進行頁面載入,替換了嗎"); //js的操作有覆蓋操作，不會連續操作
}
$(document).ready(alert("jQuery實現的頁面操作"));
$(document).ready(alert("jQuery實現的頁面操作,這個還有嗎")); //jQuery不會進行覆蓋，其全部都會顯示
</script>
</head>
<body>
<h3 align="center">jQuery操作事件</h3>
<hr />
<input type="button" name="" id="" value="測試js操作事件" onclick="testJs()"/> <!--先點選下面的按鈕不會觸發事件，其還沒有onclick屬性，但是當點選了這個按鈕，呼叫了函式，給物件設定了onclick屬性，再次點選下面的按鈕就會觸發事件-->
<input type="button" name="" id="" value="測試jQuery繫結操作事件-bind" onclick="testBind()"/>
<input type="button" name="" id="" value="測試jQuery解綁操作事件" onclick="testUnbind()"/>
<input type="button" name="" id="" value="測試jQuery繫結操作事件-one" onclick="testOne()"/>
<!--<input type="button" name="" id="" value="測試js頁面載入操作事件" onclick="testLoad()"/>-->
<hr />
<input type="button" name="btn" id="btn" value="測試js" /> <!-- 其沒有onclick操作，所以其不會有點選觸發事件-->
<input type="button" name="jq" id="jq" value="測試jQuery" />
<input type="button" name="one" id="one" value="測試one" />
</body>
</html>感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。