使用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 动态加载 css 方法总结
Jul 11 Javascript
ASP Json Parser修正版
Dec 06 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
PHP PDO操作总结
Nov 17 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
微信开发 微信授权详解
Oct 21 Javascript
JS出现失效的情况总结
Jan 20 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
原生javascript如何实现共享onload事件
Jul 03 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中数据的批量导入(csv文件)
2006/10/09 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
详解PHP队列的实现
2019/03/14 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Vue实现简单分页器
2018/12/29 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
python中Flask框架简单入门实例
2015/03/21 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
建筑工程质量通病防治方案
2014/06/08 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
MySQL创建管理RANGE分区
2022/04/13 MySQL