使用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 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Python算法之图的遍历
2017/11/16 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python实现视频读取和转化图片
2019/12/10 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
农村婚礼证婚词
2014/01/10 职场文书
给物业的表扬信
2014/01/21 职场文书
留学推荐信怎么写
2014/01/25 职场文书
个人股份合作协议书
2014/10/24 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
出纳岗位职责范本
2015/03/31 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Javascript webpack动态import
2022/04/19 Javascript