4.8 練習
建立 jquery/practice/4_8_practice.html
,
提供 html:
<h1 id="h1_title">這是標題</h1>
<button type="button" id="change_title">標題加上 title1 樣式</button>
<hr>
<p id="p1" class="title1">這是段落</p>
<button type="button" class="btn_para">段落移除 title1 樣式,然後加上 para 樣式</button>
<hr>
<a href="https://tw.yahoo.com" target="_blank" class="link">這是連結</a>
<button type="button" class="btn_link">將「這是連結」文字,改成「Yahoo! 網站」</button>
<hr>
<div>
項目名稱:<input type="text" id="item_add">
</div>
<ul class="list">
<li>項目一<button type="button" class="btn_del">移除</button></li>
</ul>
提供 CSS:
* {
box-sizing: border-box;
}
.title1{
color: red;
}
.para{
font-weight: bold;
text-decoration: underline;
}
事件綁定的範例(以 click 為例):
$("#item_add").on("click", function(){
// 點擊後執行的程式碼
});
註:HTML 、CSS 部份,都不用在做任何更新,主要撰寫 jQuery 程式。
初始狀態示意:
然後撰寫 jQuery 程式,完成以下:
透過按鈕,將 h1 標題部份,加上 title1 這個 class。
透過按鈕,將 p 段落部份,移除 title1 這個 class ,並加上 para 這個 class。
透過按鈕,將 a 連結裡面的文字內容,換成「Yahoo! 網站
」。
在文字框欄位,觸發 blur
事件時,將文字框的文字,放在 ul.list 裡面的最前面。也就是新增新的一項 li,文字放在 li 裡。然後文字框欄位要清空。如果使用者沒有輸入任何文字,就不新增。
「移除」按鈕按下去時(click),該項的 li 移除。
完成示意:
參考作法: