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),我

测试过,没有实现禁用。错误之处,还望指正。

更多相关文章,去看看

时间: 2024-10-12 04:35:52

jQuery中实现自定义方法的扩展的相关文章

给jquery对象添加自定义方法和扩展jquery类

http://blog.sina.com.cn/s/blog_944b24ef0101epr5.html 一.给jQuery对象添加自定义方法   方法一.$.fn.xxx 方法二.jQuery.fn.extend({ xxx:function(){ alert($(this).val()); } });       方法一示例: $.fn.setCursorPosition = function(position){            if(this.lengh == 0) return

JavaScript jQuery 事件、动画、扩展

事件 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143564690172894383ccd7ab64669b4971f4b03fa342d000 动画 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500456006abd6381dc3bb

JQuery中的$符号的作用----网摘

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的 完善,创建页面的DOM节点等... 1.选择器 在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了 更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来

jQuery中extend方法

$.extend 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 参数类型1:只传入一个对象就是对jQuery的工具方法进行扩展. 1 $(function(){ 2 $.extend({ 3 console: function(sMsg){ 4 console.log(sMsg); 5 } 6 }); 7 $.console('jQuery');// jQuery 8 }); 参数类型2:传入多个对象就是对第一个对象进行扩展. 1 $(function(){ 2 var oTarget

jQuery中的100个技巧

1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // Different ways to achieve the Document Ready event //

jQuery中的选择器深入浅出

随着JavaScript的不断发展,各种各样的为了方便给jQuery变成的库应运而 生,Prototype,YUI,Extjs,bindows,JSVM(国内的),而目前较为流行的是jQuery ,这是一个轻量级的JavaScript库,它的诸多的优点:开源,兼容各种浏览器,继承css ,html,javascript,ajax等,据统计,目前世界上前10000个访问量最高的网站中,有 超过60%都使用的是jQuery,不得不说,在现在的前端界,如果你说你不会jQuery, 那么估计很多人就会对

JQuery中的工具函数总结

前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 工具方法 ①获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.

jQuery中容易让人困惑的东西

前言:jqueryt很灵活,太灵活了,可以说是他一个优点,也是他一个缺点,达到一种效果,十个人也许会用十种不同的方法来实现这个过程,结果一样,过程不一样,这到底是好,还是坏呢. 一,什么是jquery jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.说白了,jquery就是javascript.只不过按照人的习惯思维把它封装了一个比较强大的框架.还有一点jquery能够把html和javas

jQuery 中 data 方法的实现原理

前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答不上来懊悔不已.现在终于下决心开始看 jQuery 的源码,就从 data 方法开始.本人也是前端新手,如果文章中有理解不当或者错误之处,欢迎留言指出,3Q~ jQuery 版本为 1.8.2 data() 的使用方法 // 向一个 dom 元素绑定数据 $("#header").data