快捷導(dǎo)航

jQuery操作事件完整實(shí)例分析

更新時(shí)間：2020年01月10日 09:36:01 作者：qq_42412646

這篇文章主要介紹了jQuery操作事件,結(jié)合完整實(shí)例形式分析了jquery事件綁定、解綁、響應(yīng)、觸發(fā)等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了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">
//點(diǎn)擊事件  
  //js操作事件
  function testJs(){
  //獲取對象
  var btn=document.getElementById("btn");
  //設(shè)置其onclick屬性
  btn.onclick=function(){alert("這是js操作事件")};  //僅需要觸發(fā)一次就可以無限次的點(diǎn)擊觸發(fā)按鈕的點(diǎn)擊事件 
  }
  function testBind(){
  //獲取對象
  var btn=$("#jq");
  //利用jQuery進(jìn)行事件的綁定
  btn.bind("click",function(){alert("jQuery綁定實(shí)現(xiàn)")}); //對onclick屬性進(jìn)行綁定，當(dāng)觸發(fā)事件后，運(yùn)行后觸發(fā)函數(shù)，其中click算是一個(gè)屬性，所以用“”鏈接，而后面的函數(shù)則是內(nèi)容，沒用“”
  btn.bind("click",function(){alert("綁定第二個(gè)呢")});   //可以連續(xù)點(diǎn)擊幾次來在點(diǎn)擊一次時(shí)觸發(fā)幾次函數(shù)
  }
  function testUnbind(){
  //獲取對象
  var btn=$("#jq");
  //利用jQuery進(jìn)行事件的解綁
  btn.unbind("click");    //解綁jQuery的事件，無論點(diǎn)擊了幾次
//  $("#jq").unbind("click");
  }
  function testOne(){
  //獲取對象
  var btn=$("#one");
  //利用jQuery的one方法進(jìn)行事件的綁定
  btn.one("click",function(){alert("jQuery利用one實(shí)現(xiàn)綁定")});   //只會(huì)綁定一次，當(dāng)事件觸發(fā)后就會(huì)失效
  }
//點(diǎn)擊頁面加載事件
  window.onload=function testLoad(){
  alert("JS方法進(jìn)行頁面加載");
  }
  window.onload=function testLoad(){
  alert("JS方法進(jìn)行頁面加載,替換了嗎");    //js的操作有覆蓋操作，不會(huì)連續(xù)操作
  }
  $(document).ready(alert("jQuery實(shí)現(xiàn)的頁面操作"));
  $(document).ready(alert("jQuery實(shí)現(xiàn)的頁面操作,這個(gè)還有嗎"));  //jQuery不會(huì)進(jìn)行覆蓋，其全部都會(huì)顯示
 </script>
 </head>
 <body>
 <h3 align="center">jQuery操作事件</h3>
 <hr />
 <input type="button" name="" id="" value="測試js操作事件" onclick="testJs()"/>  <!--先點(diǎn)擊下面的按鈕不會(huì)觸發(fā)事件，其還沒有onclick屬性，但是當(dāng)點(diǎn)擊了這個(gè)按鈕，調(diào)用了函數(shù)，給對象設(shè)置了onclick屬性，再次點(diǎn)擊下面的按鈕就會(huì)觸發(fā)事件-->
 <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操作，所以其不會(huì)有點(diǎn)擊觸發(fā)事件-->
 <input type="button" name="jq" id="jq" value="測試jQuery" />
 <input type="button" name="one" id="one" value="測試one" />
 </body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: