js相关:jquery采用oop模式class类的使用示例

发布于 2020-11-22|标签javascript
复制链接
摘记: 本文实例讲述了jquery采用oop模式class类的使用方法。分享给大家供大家参考,具体如下:这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强。以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了。没有用class来管理function方便。费话不多说了。< ..
本文实例讲述了jquery采用oop模式class类的使用方法。分享给大家供大家参考,具体如下:这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强。以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了。没有用class来管理function方便。费话不多说了。一、oop.html ```xhtml ooptest 访问脚本之家 名字: 区域选择: 行政区选择 浦东新区 松江区 金山区 崇明区 青浦区 静安区 徐汇区 长宁区 虹口区 闸北区 宝山区 嘉定区 闵行区 普陀区 卢湾区 黄浦区 杨浦区 奉贤区 $(document).ready(function(){ //实例化一个jquery的CLASS new oop().init(); }); ``` 二、建一个oop.js ```javascript 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()); } }); } } ``` 感兴趣的自己测试一下吧
冀ICP备17029012号-4 | 版权所有©鲍亚龙 |免责声明  | GIF图库  | NUXT版