首頁 > web前端 > js教程 > 使用JQuery庫提供的擴充功能實作自訂方法_jquery

使用JQuery庫提供的擴充功能實作自訂方法_jquery

WBOY
發布: 2016-05-16 16:36:46
原創
1143 人瀏覽過

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),我測試過,沒有實作停用。錯誤之處,還望指正。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板