jQuery改變HTML與CSS

原生JavaScript版

使用:Settings→JavaScript→QuickAdd→jQuery

html() 更新元素内部html

.block.block1
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
$(".block1").html("更新公告");
Display
更新公告

css() 更新元素内部css

.block.block2
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
$(".block2").css("background-color","#f24")
$(".block2").css("border-radius","100%")
Display

addClass()/removeClass() 新增 / 移除class

.block.block3 add class
.block.block4.bigblock remove class
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block

.bigblock
 width: 150px
 height: 150px
$(".block3").addClass("bigblock")
$(".block4").removeClass("bigblock")
Display
add class
remove class

 

html() 動態新增元素

prepend→元素新增在.html()之前
append→元素新增在.html()之後

.block.block5.bigblock
.block
 width: 70px
 height: 70px
 border: 1px solid #000
 display: inline-block
 
.bigblock
 width: 150px
 height: 150px
$(".block5").html("<div class='block'>商品</div><div class='block'>商品</div>");
$(".block5").prepend("<p>商品列表</p>");
$(".block5").append("共有兩項");
Display

商品列表

共有兩項

text() 顯示純文字

.block.block6.bigblock
.block {
 width: 70px;
 height: 70px;
 border: 1px solid #000;
 display: inline-block;
}

.bigblock {
 width: 150px;
 height: 150px;
}
.text("<div class='block'></div><div class='block'></div>")
Display
<div class=’block’></div><div class=’block’></div>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *