jQuery中实现自定义方法的扩展
JQuery包装器提供了大量的方法,可以再页面中直接使用。但是,没有
任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能
。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定
义的功能扩展。(JQuery没有禁用表单元素的方法哦)
上代码:
1: <!DOCTYPE>
2: <html lang="en">
3: <head>
4: <title>Custom Method!</title>
5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
6: <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
7: <script type="text/javascript">
8: jQuery(function()
9: {
10: $("form input").disable();
11: });
12: </script>
13: </head>
14: <body>
15: <p>测试自定义方法禁用表单元素</p>
16: <form>
17: <input type="text" value="test"><br/>
18: <input type="button" value="confirm" class="test">
19: </form>
20: </body>
21: </html>
文本框和按钮已经被禁用:
![]()
若只禁用按钮,添加一个css类即可;
1: jQuery(function()
2: {
3: $("form input.test").disable();
4: });
看看是不是禁用了按钮:
![]()
实现也很简单,打开jquery-2.1.1.js源码,没有压缩的,比较容易,我引入
的是jquery-2.1.1.js,然后添加下列代码
1: jQuery.fn.disable=function () {
2: return this.each(function()
3: {
4: if(this.disabled != null) this.disabled=true;
5: });
6: }
在按照上述案例的方式调用即可。
在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我
测试过,没有实现禁用。错误之处,还望指正。
更多相关文章,去看看
jQuery中实现自定义方法的扩展的更多相关文章
- JavaScript jQuery 事件、动画、扩展
事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
- jQuery中的事件——《锋利的JQuery》
虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力. 1.加载DOM 在Ja ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- jQuery中的100个技巧
1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记(四)jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- jquery中的DOM事件绑定与解绑
在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...
- jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...
- 深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
随机推荐
- [笨木头FireFly 02]入门篇2_客户端发送请求,服务器处理请求
原地址:http://www.9miao.com/question-15-53940.html 好,经过上一篇不权威的讲解,大家已经能轻易地让客户端和服务端连接起来了. 但是,仅仅是连接了,可它们俩不 ...
- js获取fck值的代码方法
引入js文件 <script type="text/javascript" src="${basePath}/FCKeditor/fckeditor.js" ...
- Nagios的安装配置与应用之五监控远程Linux服务器
本文出自 “曹坏水” 博客,请务必保留此出处http://cao2012.blog.51cto.com/366908/1132113 NRPE是Nagios的一个功能扩展,它可在远程Linux和UNI ...
- [java线段树]2015上海邀请赛 D Doom
题意:n个数 m个询问 每个询问[l, r]的和, 再把[l, r]之间所有的数变为平方(模为9223372034707292160LL) 很明显的线段树 看到这个模(LLONG_MAX为922337 ...
- cocos2d-x3.9 NDK android 环境搭建过程中遇到的错误
编译环境:Mac OS, NDK r9d 错误:arm-linux-androideabi-gcc: error trying to exec '/media/Project/adt-bundle-l ...
- 202. Happy Number
题目: Write an algorithm to determine if a number is "happy". A happy number is a number def ...
- CentOS7安装mysql-server
安装ossec时需要使用到mysql-server,直接安装报错: [root@ossec-server ~]# yum install mysql-server Loaded plugins: fa ...
- Android 动态Tab分页效果
当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4 个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在 ...
- node.js 异步式I/O 与事件驱动
Node.js 最大的特点就是异步式 I/O(或者非阻塞 I/O)与事件紧密结合的编程模式.这种模式与传统的同步式 I/O 线性的编程思路有很大的不同,因为控制流很大程度上要靠事件和回调函数来组织,一 ...
- 【转】奇异值分解(We Recommend a Singular Value Decomposition)
文章转自:奇异值分解(We Recommend a Singular Value Decomposition) 文章写的浅显易懂,很有意思.但是没找到转载方式,所以复制了过来.一个是备忘,一个是分享给 ...