使用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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 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获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python中的类与类型示例详解
2019/07/10 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
出纳岗位职责
2013/11/09 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
团日活动总结怎么写
2014/06/25 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
博士生专家推荐信
2015/03/25 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技