Jquery / jquery動態改變css外觀與html內容

My tip

如果看不到codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<h4>使用:->Settings -> Javascript -> Quickadd "jquery"</h4>
<h3>1. 更新元素內部html $(選擇條件).html(...)</h3>
<div class="block block1"></div>
<hr/>
<h3>2. 更新css $(選擇條件).css(...)</h3>
<div class="block block2"></div>
<hr/>
<h3>3. 新增/移除css class $(選擇條件).addClass/removeClass(...)</h3>
<div class="block block3"></div>
<div class="block block4 bigblock"></div>
<hr/>
<h3>4. 使用html()動態新增元素</h3>
<div class="block block5 bigblock"></div>
<hr/>
<h3>5. 使用text()顯示純文字</h3>
<div class="block block6 bigblock"></div>
<hr/>

style.sass

*
  font-family: 微軟正黑體
  letter-spacing: 1px
.block
  width: 70px
  height: 70px
  border: solid 2px
  display: inline-block
.bigblock
  width: 153px
  height: 153px

script.js

$(".block1").html("更新公告");
$(".block2").css("background-color","#f24");
$(".block2").css("border-radius","100%");
$(".block3").addClass("bigblock");
$(".block4").removeClass("bigblock");
$(".block5").html("<div class='block'>商品</div> <div class='block'>商品</div>");
$(".block5").prepend("商品列表:");
$(".block5").append("共有兩項");
$(".block6").text("<div class='block'>商品</div> <div class='block'>商品</div>")

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程