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


Posted in Javascript onSeptember 09, 2014

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>

文本框和按钮已经被禁用:
使用JQuery库提供的扩展功能实现自定义方法

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

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

看看是不是禁用了按钮:

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

实现也很简单,打开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),我测试过,没有实现禁用。错误之处,还望指正。

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
node.js中的require使用详解
Dec 15 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
点击button获取text内容并改变样式的js实现
Sep 09 #Javascript
js 数组去重的四种实用方法
Sep 09 #Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python采集百度百科的方法
2015/06/05 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Django数据库表反向生成实例解析
2018/02/06 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python3实现绘制二维点图
2019/12/04 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
人力资源主管岗位职责
2014/01/29 职场文书
保险公司晨会主持词
2014/03/22 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Python实现简单的猜单词
2021/06/15 Python
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python