使用JQuery库提供的扩展功能实现自定义方法

使用JQuery库提供的扩展功能实现自定义方法_jquery

php中文网

发布： 2016-05-16 16:36:46

原创

1286人浏览过

jquery包装器提供了大量的方法，可以再页面中直接使用。但是，没有任何一个库可以满足所有的需求，所以，jquery库提供了丰富的扩展功能。以禁用一组表单元素为例，看看怎么简单有效的在jquery库中添加自定义的功能扩展。（jquery没有禁用表单元素的方法哦）

上代码：

<!DOCTYPE> 

<html lang="en"> 

<head> 

<title>Custom Method!</title> 

<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="js/jquery-2.1.1.js"></script> 

<script type="text/javascript"> 

jQuery(function() 

{ 

$("form input").disable(); 

}); 

</script> 

</head> 

<body> 

<p>测试自定义方法禁用表单元素</p> 

<form> 

<input type="text" value="test"><br/> 

<input type="button" value="confirm" class="test"> 

</form> 

</body> 

</html>

登录后复制

文本框和按钮已经被禁用：

若只禁用按钮，添加一个css类即可;

jQuery(function() 
{
$("form input.test").disable(); 
});

登录后复制

看看是不是禁用了按钮：

成新网络商城购物系统

使用模板与程序分离的方式构建，依靠专门设计的数据库操作类实现数据库存取，具有专有错误处理模块，通过 Email 实时报告数据库错误，除具有满足购物需要的全部功能外，成新商城购物系统还对购物系统体系做了丰富的扩展，全新设计的搜索功能，自定义成新商城购物系统代码功能代码已经全面优化，杜绝SQL注入漏洞前台测试用户名：admin密码：admin888后台管理员名：admin密码：admin888

查看详情

实现也很简单，打开jquery-2.1.1.js源码，没有压缩的，比较容易，我引入

的是jquery-2.1.1.js，然后添加下列代码

jQuery.fn.disable=function () { 

return this.each(function() 

{ 

if(this.disabled != null) this.disabled=true; 

}); 

}

登录后复制

在按照上述案例的方式调用即可。

在《JQuery In Action》一书中，提到以$.fn.方法名方式扩展（P12），我测试过，没有实现禁用。错误之处，还望指正。

大家都在看：

防止重复绑定：深入理解jQuery事件的on()与off()方法解决JavaScript/Web设置Cookie过期时间不生效的问题 jQuery事件绑定：深度解析on()与off()管理重复事件监听器理解 jQuery 中事件的解绑与绑定：避免重复监听器的最佳实践 jQuery Mask插件：为电话号码输入框添加不可移除的前导零