使用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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 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+dbfile开发小型留言本
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python微信公众号开发简单流程
2018/03/23 Python
python算的上脚本语言吗
2020/06/22 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
销售工作决心书
2015/02/04 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
企业文化学习心得体会
2016/01/21 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
PHP遍历数组的6种方式总结
2021/11/17 PHP
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android