使用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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
javascrip关于继承的小例子
May 10 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 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
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php操作redis缓存方法分享
2015/06/03 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
Python中字典映射类型的学习教程
2015/08/20 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python dumps和loads区别详解
2020/02/04 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
python中判断文件结束符的具体方法
2020/08/04 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
学校后勤岗位职责
2014/02/19 职场文书
数控专业自荐书范文
2014/03/16 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript