Jade是一種模板引擎，它能夠快速構(gòu)建HTML頁(yè)面。在實(shí)際開(kāi)發(fā)中，我們經(jīng)常需要用到j(luò)Query庫(kù)來(lái)實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果。下面我們就來(lái)了解一下在Jade中如何使用jQuery。

script.
$(document).ready(function(){
// 在這里編寫你的jQuery代碼
});

在Jade中使用jQuery需要在script標(biāo)簽中引入jQuery庫(kù)，并編寫jQuery代碼。在以上代碼中，我們通過(guò)$(document).ready()函數(shù)來(lái)確保頁(yè)面的DOM元素已經(jīng)加載完畢，再執(zhí)行jQuery代碼。

#btn.btn
| 點(diǎn)擊我
script.
$(document).ready(function(){
$("#btn").click(function(){
alert("你點(diǎn)擊了按鈕！");
});
});

以上代碼實(shí)現(xiàn)了一個(gè)在頁(yè)面上展示一個(gè)按鈕，并且當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)彈出一個(gè)對(duì)話框的功能。同樣的，在Jade中使用jQuery庫(kù)時(shí)，我們可以通過(guò)在DOM元素上添加jQuery事件，來(lái)實(shí)現(xiàn)頁(yè)面的交互效果。

p 提交數(shù)據(jù):
input#username(type="text", placeholder="請(qǐng)輸入用戶名")
input#password(type="password", placeholder="請(qǐng)輸入密碼")
button#submit(type="button") 提交
script.
$(document).ready(function(){
$("#submit").click(function(){
var username = $("#username").val();
var password = $("#password").val();
alert("用戶名：" + username + "，密碼：" + password);
});
});

以上代碼實(shí)現(xiàn)了一個(gè)表單提交的功能，并在提交按鈕點(diǎn)擊后獲取表單中的用戶名和密碼，并彈出對(duì)話框顯示這兩個(gè)數(shù)據(jù)。在以上代碼中，我們除了添加了click事件外，還使用了jQuery的val()函數(shù)來(lái)獲取表單值。

總的來(lái)說(shuō)，在Jade中使用jQuery來(lái)實(shí)現(xiàn)頁(yè)面效果，需要在script標(biāo)簽中引入jQuery庫(kù)，并通過(guò)綁定DOM元素事件，來(lái)實(shí)現(xiàn)交互效果。當(dāng)然，這只是jQuery的基礎(chǔ)應(yīng)用，還有更多更高級(jí)功能等待你去探索。