使用JQuery库提供的扩展功能实现自定义方法

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>

文本框和按钮已经被禁用：

若只禁用按钮，添加一个css类即可;

jQuery(function()
{
$("form input.test").disable();
});

看看是不是禁用了按钮：

实现也很简单，打开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），我测试过，没有实现禁用。错误之处，还望指正。

赞 (0)

相关推荐

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • Jquery中扩展方法extend使用技巧

    在使用Jquery开发的过程中,extend是常用的参数处理函数,特别是对默认值的使用. Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest. 但是在使用过程中,默认值往往是不能被改变的, 如下: var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolo

  • 文本域光标操作的jQuery扩展分享

    该针对文本域的扩展实现的功能及使用方法:1.获取光标位置:$(elem).iGetFieldPos():2.设置光标位置:$(elem).iSelectField(start):3.选中指定位置内的字符:$(elem).iSelectField(start,end):4.选中指定的字符:$(elem).iSelectStr(str):5.在光标之后插入字符串:$(elem).iAdd(str):6.删除光标前面(-n)或者后面(n)的n个字符:$(elem).iDel(n): jQuery扩展代

  • jQuery插件kinMaxShow扩展效果用法实例

    本文实例讲述了jQuery插件kinMaxShow扩展效果用法.分享给大家供大家参考.具体分析如下: 支付宝首页的焦点图就是用的kinMaxShow 扩展效果(前段时间支付宝使用的,不知道现在还是不是这种,另外支付宝的这个焦点图动画效果是分浏览器的,IE8及以下浏览器无动画纯静态,只是在谷歌.火狐等现代浏览器才会出现动画.) 这只是kinMaxShow扩展的一个小例子,更多效果你可以自己发挥. 代码如下: javascript 代码: <script src="js/jquery-1.10

  • 修改或扩展jQuery原生方法的代码实例

    修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery通过扩展实现抖动效果的方法

    本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {     this.each(function() {         var jqNode =

  • jquery通过扩展select控件实现支持enter或focus选择的方法

    本文实例讲述了jquery通过扩展select控件实现支持enter或focus选择的方法.分享给大家供大家参考,具体如下: /*************************************** * @ author jdkleo * @ date 2013/2/27 JQuery SelKeys USAGE: jQuery.selkeys.enter(jQuery("#selcon")); jQuery.selkeys.focus(jQuery("#selcon

  • jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • 使用JQuery库提供的扩展功能实现自定义方法

    使用JQuery库提供的扩展功能实现自定义方法

    JQuery包装器提供了大量的方法,可以再页面中直接使用.但是,没有任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能.以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定义的功能扩展.(JQuery没有禁用表单元素的方法哦) 上代码: <!DOCTYPE> <html lang="en"> <head> <title>Custom Method!</title> <meta http

  • 载入jQuery库的最佳方法详细说明及实现代码

    由于目前Google的不稳定,而国内没有好的同类服务,故这已不是最优方案.当然,你把Google库路径换成国内稳定且快速的路径(如果存在),依然可以受用此方法带来的各种好处.即便如此,综合考虑的话,还是Google的最合适. 网站开发的项目中使用Google CDN的jQuery库虽然加载速度很快,但调用本地服务器的库才可以确保万无一失.而使用Wordpress内置jQuery库的话,其末尾防止JS库 冲突而加入的jQuery.noConflict()使得主题中所有jQuery代码都要做一些小修

  • 详解webpack3如何正确引用并使用jQuery库

    经过百度.谷歌.SF.stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发展到3.5.5了,真正看其中一篇文章能解决问题的几乎没有,下面是webpack3的实现代码. 首先在配置页面中加入外部引用 externals: { jquery: "jQuery" //如果要全局引用jQuery,不管你的jQuery有没有支持模块化,

  • jquery库文件略庞大用纯js替换jquery的方法

    jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(

  • 如何解决Jquery库及其他库之间的$命名冲突

    首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的. 要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可. 一. jQuery库在其他库之前导入,直接使用jQuery(callback)方法如: 复制代码 代码如下:

  • javascript原生和jquery库实现iframe自适应高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh

  • 关于jQuery库冲突的完美解决办法

    关于jQuery库冲突的完美解决办法

    前言 一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq上. var myControl="jq"; (function(name){ var $=name ||"$"; //name存在$的值就是name的值,不存在或为null,$的值为字符串"$&q

  • 动态加载jquery库的方法

    有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库.好处不用我说,节省带宽,提高访问速度,因为用户可能不会点击这个按钮,也就不需要 Jquery .那么如何动态加载 Jquery 库呢?一般可以用 Document.write 来打印出,也可以用 Ajax ,也可以用我下面的这种方式: 复制代码 代码如下: <!DOCTYPE html PUBLIC "

  • 在JavaScript的jQuery库中操作AJAX的方法讲解

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码.   前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进

  • 使用jquery库实现电梯导航效果

    一般来说,一些大型的电商网站首页,页面内容很多,页面会很长,这时候大部分网站都选择使用电梯导航,使页面跳转到相应位置或者返回顶部. 下面使用jquery库来实现电梯导航 基本思路 电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果. 1.页面滚动到相应的位置,实现电梯导航的显示与隐藏2.页面滚动到相应的位置,电梯导航的按钮添加或者移出相应的类3.点击电梯导航按钮,实现页面的滚动和为按钮添加或者移出相应的类4.点击顶部按钮,返回

随机推荐