jquery menggunakan mod oop penggunaan kelas kelas example

jquery menggunakan mod oop penggunaan kelas kelas example_jquery

WBOY

Lepaskan： 2016-05-16 15:18:41

asal

1382 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan kelas kelas mod oop dalam jquery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya rasa sangat mudah untuk menggunakan kelas di sini untuk menguruskan pelbagai fungsi jquery, dan kod itu juga sangat mudah dibaca. Pada masa lalu, saya suka mencipta fail, menulis fungsi, dan kemudian memasukkan fail itu, tetapi kemudian menjadi lebih menyusahkan untuk mencari fungsi. Ia tidak begitu mudah untuk menggunakan kelas untuk mengurus fungsi. Tiada lagi perkataan untuk diucapkan.

1. 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.jb51.net">脚本之家</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>

Salin selepas log masuk

2. Bina 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());
      }
    });
  }
}

Salin selepas log masuk

Jika anda berminat, cuba sendiri

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.