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 移除。

完成示意：

參考作法：