使用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 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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中常用的预定义变量小结
2012/05/09 PHP
基于php缓存的详解
2013/05/15 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
JSONP之我见
2015/03/24 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
服装厂厂长职责
2013/12/16 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
小学信息技术教学反思
2014/02/10 职场文书
大二学生自我检讨书
2014/10/23 职场文书
《颐和园》教学反思
2016/02/19 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js