字符串操作函數(shù)
調(diào)用名為$.trim
的工具函數(shù),能刪除字符串中左右兩邊的空格符,但該函數(shù)不能刪除字符串中間的空格,調(diào)用格式為:
$.trim (str);
參數(shù)str表示需要?jiǎng)h除左右兩邊空格符的字符串。
例如,通過$.trim()
函數(shù),除掉一個(gè)兩邊均有空格符的字符串,并將其執(zhí)行前后的字符長(zhǎng)度都顯示在頁面中,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,由于文本框中的字符串前后分別有一個(gè)空格字符,因此,它的字符長(zhǎng)度為13,調(diào)用trim()
函數(shù)刪除字符串前后空格之后,字符串長(zhǎng)度則變?yōu)?1。
任務(wù)
我來試試,親自調(diào)用trim()
函數(shù)刪除字符串前后的空格。
在下列代碼的第29行,調(diào)用trim()
工具函數(shù),刪除文本輸入框中字符串的前后空格。

- ?不會(huì)了怎么辦
-
- 由于
trim()
在jQuery中是全局性的工具函數(shù),因此,可以通過$或jQuery再加逗點(diǎn)的形式直接訪問。
trim()
函數(shù)中的參數(shù)為被刪除左右空格的字符串,本示例中為輸入文本框的內(nèi)容值,即變量strOld保存的值。
<!DOCTYPE html>
<html>
<head>
<title>字符串操作函數(shù)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">字符串操作函數(shù)</span>
<span class="fr">
<input id="btnShow" name="btnShow" type="button" value="計(jì)算" />
</span>
</div>
<div class="content">
<input id="txtName" name="txtName" type="text" />
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "內(nèi)容:";
var strOld = $("#txtName").val();
var strNew =?;
strTmp += strOld;
strTmp += "<br/><br>除掉空格符前的長(zhǎng)度:"
strTmp += strOld.length;
strTmp += "<br/><br>除掉空格符后的長(zhǎng)度:"
strTmp += strNew.length;
$(".tip").show().append(strTmp);
});
});
</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;
background-color: #fff;
font-size: 13px;
}
#divtest .content .tip
{
border: solid 1px #ccc;
background-color: #eee;
margin: 20px 0px;
padding: 8px;
display: none;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求