jQuery 彈出留言是一個(gè)經(jīng)常被使用的功能，在網(wǎng)頁(yè)開(kāi)發(fā)中極其常見(jiàn)，可以增加用戶體驗(yàn)。下面我們通過(guò)代碼分析來(lái)實(shí)現(xiàn)這個(gè)功能。

$(function(){
$('.message-btn').click(function(){
$('.message-box').addClass('show');
$('.message-content textarea').focus();
});
$('.message-content button').click(function(){
var content = $('.message-content textarea').val();
if(content !== '') {
alert('留言成功！');
$('.message-content textarea').val('');
$('.message-box').removeClass('show');
}else {
alert('請(qǐng)輸入留言內(nèi)容！');
}
});
});

上面是實(shí)現(xiàn)這個(gè)功能的代碼，我們可以將代碼分為兩部分，前半部分是點(diǎn)擊按鈕顯示留言框，后半部分是提交留言內(nèi)容。

首先，我們使用了選擇器找到了相關(guān)的元素，點(diǎn)擊留言按鈕顯示留言框，代碼如下：

$('.message-btn').click(function(){
$('.message-box').addClass('show');
$('.message-content textarea').focus();
});

其中，使用了click()方法來(lái)監(jiān)聽(tīng)留言按鈕的點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)，執(zhí)行回調(diào)函數(shù)，將留言框的類名由“message-box”變成“message-box show”，并將輸入框設(shè)置為焦點(diǎn)。

接下來(lái)我們需要提交留言，代碼如下：

$('.message-content button').click(function(){
var content = $('.message-content textarea').val();
if(content !== '') {
alert('留言成功！');
$('.message-content textarea').val('');
$('.message-box').removeClass('show');
}else {
alert('請(qǐng)輸入留言內(nèi)容！');
}
});

其中，我們利用click()方法監(jiān)聽(tīng)提交按鈕的點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)，執(zhí)行回調(diào)函數(shù)。我們獲取到輸入框中的留言內(nèi)容，并進(jìn)行非空判斷，如果不為空則 alert 彈出 “留言成功！” 的提示框，清空輸入框，并將留言框的類名由“message-box show”變成“message-box”，如果輸入為空則彈出 “請(qǐng)輸入留言內(nèi)容！” 的提示框。

至此，jQuery 彈出留言的功能實(shí)現(xiàn)完畢。相信大家不難發(fā)現(xiàn)，jQuery 封裝讓我們能夠在網(wǎng)頁(yè)開(kāi)發(fā)中非常方便地實(shí)現(xiàn)各種效果，尤其是在維護(hù)項(xiàng)目時(shí)有很大優(yōu)勢(shì)。