jquery verwendet den Oop-Modus, die Klassenverwendung example

jquery verwendet den Oop-Modus, die Klassenverwendung example_jquery

WBOY

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

Original

1386 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie die Oop-Modus-Klassenklasse in jquery verwendet wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich finde es sehr praktisch, hier Klassen zu verwenden, um verschiedene Funktionen von jquery zu verwalten, und der Code ist auch sehr gut lesbar. Früher habe ich gerne eine Datei erstellt, eine Funktion geschrieben und dann die Datei eingebunden, aber später wurde es schwieriger, eine Funktion zu finden. Es ist nicht so praktisch, Klassen zum Verwalten von Funktionen zu verwenden. Keine Worte mehr zu sagen.

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>

Nach dem Login kopieren

2. Erstellen Sie eine 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());
      }
    });
  }
}

Nach dem Login kopieren

Wenn Sie interessiert sind, probieren Sie es selbst aus

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.