jquery採用oop模式class類的使用樣本，jqueryoop

最後更新：2016-01-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了jquery採用oop模式class類的使用方法。分享給大家供大家參考，具體如下：

這裡用class來管理jquery的各個function，我覺得很方便，並且代碼可讀性也很強。以前我喜歡建檔案寫function，再包括檔案，到後來找一個function就比較麻煩了。沒有用class來管理function方便。費話不多說了。

一、oop.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ooptest</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="oop.js"></script> </head> <body> <br><br> <center> 訪問<a href="http://www.bkjia.com">幫客之家</a> </center> <br><br> <div> 名字： <input name="Name" id="Name" type="text" value="請輸入中文名字" notice="請輸入中文名字" > </div> <div></div> 地區選取項目： <select name="RegionId" id="RegionId" > <option value="0" selected="selected">行政區選擇</option> <option value="12">浦東新區</option> <option value="42">松江區</option> <option value="41">金山區</option> <option value="40">崇明區</option> <option value="39">青浦區</option> <option value="37">靜安區</option> <option value="36">徐匯區</option> <option value="35">長寧區</option> <option value="34">虹口區</option> <option value="33">閘北區</option> <option value="32">寶山區</option> <option value="31">嘉定區</option> <option value="30">閔行區</option> <option value="29">普陀區</option> <option value="28">盧灣區</option> <option value="27">黃浦區</option> <option value="26">楊浦區</option> <option value="43">奉賢區</option> </select> </body> <html> <script type="text/javascript"> $(document).ready(function(){ //執行個體化一個jquery的CLASS new oop().init(); }); </script>

二、建一個oop.js

function oop(){  //定義變數  var aaa = this;  //初始化  this.init = function(){    aaa.addnotice();    aaa.unchange();    return aaa;  }  //添加function  this.addnotice = function(){    $("input[type='text']").each(function(){      $(this)      .focus(function(){        if($(this).val() == $(this).attr('notice')){          $(this).val("");        }      })      .blur(function(){        if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){          $(this).val($(this).attr('notice'));        }      });    });  }  //添加function  this.cleannotice = function(){    $("input[type='text']").each(function(){      if($(this).val() == $(this).attr('notice')){        $(this).val("");      }    });  }  //添加function  this.unchange = function(){    $(".select").bind('change',function(){      if($(this).val() == '0'){        alert('noselect');      }else{        alert($(this).val());      }    });  }}

感興趣的自己測試一下吧

希望本文所述對大家jQuery程式設計有所協助。

您可能感興趣的文章:

jquery方法+js一般方法+js物件導向方法實現拖拽效果
jquery中object對象迴圈遍曆的方法
jquery解析json格式資料的方法(對象、字串)
使用jQuery在對象中緩衝選取器的簡單方法
jquery操作angularjs對象
JS/Jquery判斷對象為空白的方法
jquery表單對象屬性過濾選取器執行個體分析

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More