jquery采用oop模式class类的使用示例
更新时间：2016年01月22日 14:26:28 作者：张映
这篇文章主要介绍了jquery采用oop模式class类的使用方法,结合实例形式分析了jQuery模拟oop模式定义class类与方法的技巧,需要的朋友可以参考下
本文实例讲述了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="https://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>
二、建一个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实现可编辑的表格实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
这篇文章主要介绍了60个很实用的jQuery代码开发技巧收集,使用jquery的朋友可以参考下核心代码的使用，需要的朋友可以参考下2014-12-12
json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它2011-12-12
jQuery创建插件的代码分析，需要的朋友可以参考下。2011-04-04
这篇文章主要为大家详细介绍了jQuery实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中，有时需要根据需要显示不同的列，例如，在权限管理中，不同的用户登录后只能查看自己权限范围内的列表字段，这就需要DataGird动态组合列，下面介绍EasyUI中DataGird动态生成列的方法2016-04-04
这篇文章主要介绍了jQuery获取某天的农历日期并判断是否除夕或新年的方法,涉及jQuery针对日期与时间的相关操作技巧,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了基于jquery.page.js实现的分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了jQuer输入框插件封装方法，这样可以提高程序员的开发效率，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
判断jquery对象是否存在的方法有很多，在本文将为大家详细介绍下，通过length属性是如何判断的2013-10-10
最新评论