jQuery中实现自定义方法的扩展
JQuery包装器提供了大量的方法,可以再页面中直接使用。但是,没有
任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能
。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定
义的功能扩展。(JQuery没有禁用表单元素的方法哦)前端Ui资源
上代码:
- 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>
文本框和按钮已经被禁用:
前端Ui资源
若只禁用按钮,添加一个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: }
在按照上述案例的方式调用即可。
前端Ui资源
在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我
测试过,没有实现禁用。错误之处,还望指正。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17