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

本文實(shí)例講述了jQuery操作事件。分享給大家供大家參考，具體如下：

公司主營(yíng)業(yè)務(wù)：做網(wǎng)站、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出興業(yè)免費(fèi)做網(wǎng)站回饋大家。

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

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

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

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

本文標(biāo)題：jQuery操作事件完整實(shí)例分析
文章源于：http://muchs.cn/article6/ieggog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、Google、、定制網(wǎng)站、電子商務(wù)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司