自定義類級別插件—— twoaddresult
通過調用自定義插件twoaddresult中的不同方法,可以實現(xiàn)對兩個數(shù)值進行相加和相減的運算,導入插件后,調用格式分別為:
$.addNum(p1,p2)
和 $.subNum(p1,p2)
上述調用格式分別為計算兩數(shù)值相加和相減的結果,p1和p2為任意數(shù)值。
例如,在頁面的兩個文本框中輸入任意數(shù)值,點擊“計算”按鈕調用自定義插件中$.addNum()
方法,計算兩數(shù)值的和并將結果顯示在另一文本框中,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,當點擊“計算”按鈕時,調用了自定義插件中的$.addNum()
方法計算兩個文本框中輸入數(shù)值的和,并將該值顯示在另一文本框中。
任務
我來試試,親自調用自定義的類級別插件計算兩個輸入數(shù)值的差
在下列代碼的第32行,調用自定義插件中的$.subNum()
方法計算兩個文本框中輸入數(shù)值的差。

- ?不會了怎么辦
-
- 首先,由于自定義的是類級別插件,可以使用
$.subNum()
方式調用插件中自定義的方法名,此外,$.subNum()
方法中的參數(shù)分別為兩個文本框的值。
$.subNum()
調用時,中間使用了逗號隔開。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自定義類級別插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://yifanck.cn/data/jquery-1.8.2.min.js"></script>
<script src="http://yifanck.cn/data/jquery.twoaddresult.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定義類級別插件</span>
<span class="fr">
<input id="btnCount" type="button" value="計算" />
</span>
</div>
<div class="content">
兩數(shù)相減:
<input id="Text1" type="text" class="txt" />
-
<input id="Text2" type="text" class="txt" />
=
<input id="Text3" type="text" class="txt" />
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
?
);
});
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
.txt
{
border: #666 1px solid;
padding: 2px;
width: 40px;
margin-right: 3px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求