DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 使用JQuery庫提供的擴展功能實現自定義方法
使用JQuery庫提供的擴展功能實現自定義方法
編輯:JavaScript綜合知識     

 JQuery包裝器提供了大量的方法,可以再頁面中直接使用。但是,沒有任何一個庫可以滿足所有的需求,所以,JQuery庫提供了豐富的擴展功能。以禁用一組表單元素為例,看看怎麼簡單有效的在JQuery庫中添加自定義的功能擴展。(JQuery沒有禁用表單元素的方法哦)

上代碼:

01 <!DOCTYPE>  02    03 <html lang="en">  04    05 <head>  06    07 <title>Custom Method!</title>  08    09 <meta http-equiv="content-type" content="text/html;charset=utf-8">  10    11 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>  12    13 <script type="text/javascript">  14    15 jQuery(function()  16    17 {  18    19 $("form input").disable();  20    21 });  22    23 </script>  24    25 </head>  26    27 <body>  28    29 <p>測試自定義方法禁用表單元素</p>  30    31 <form>  32    33 <input type="text" value="test"><br/>  34    35 <input type="button" value="confirm" class="test">  36    37 </form>  38    39 </body>  40    41 </html>

文本框和按鈕已經被禁用:


使用JQuery庫提供的擴展功能實現自定義方法

若只禁用按鈕,添加一個css類即可;

1 jQuery(function()  2 { 3 $("form input.test").disable();  4 });

看看是不是禁用了按鈕:

實現也很簡單,打開jquery-2.1.1.js源碼,沒有壓縮的,比較容易,我引入的是jquery-2.1.1.js,然後添加下列代碼

01 jQuery.fn.disable=function () {  02    03 return this.each(function()  04    05 {  06    07 if(this.disabled != null) this.disabled=true;  08    09 });  10    11 }

在按照上述案例的方式調用即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved