function()
function(),就是一連串的動作,後面一定要接()
$(this),係指function的母事件所指定的元素
點擊觸發,與紀錄購買狀態(click)
.buybtn 點擊購買
.buybtn
border: 1px solid #000
display: inline-block
padding: 10px 20px
cursor: pointer
.buyed
border: 1px solid #000
background-color: #f24
color: white
$(".buybtn").click(
function() {
$(this).text("已經購買");
$(this).addClass("buyed");
}
);
點擊購買
點擊購買
$(this)操作觸發的案件:請選擇物品
.selbtn(data-cata="tree") 選擇物品一
.selbtn(data-cata="sea") 選擇物品二
.selbtn(data-cata="flower") 選擇物品三
h4.show-info 已選擇物品:無
h4.show-cata 已選擇種類
.selbtn
border: 1px solid #000
display: inline-block
padding: 10px 20px
cursor: pointer
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
.show-info
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
.show-cata
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
$(".selbtn").click(
function() {
//.text包空的表示選取前面this的文字
$(".show-info").text($(this).text());
//.attr選取html裡面的屬性
$(".show-cata").text($(this).attr("data-cata"));
//等於要兩個等號
//事件用{}包住
//符合→條件式後面直接加符合事件
//不符合→else後面加不符合事件
if ($(this).attr("data-cata") == "flower") {
$(".show-cata").append(",他買的是花");
} else {
$(".show-cata").append(",NO他買的是不是花ˊˋ");
}
}
);
Display
選擇物品一
選擇物品二
選擇物品三
已選擇物品:無
已選擇種類
滑鼠的移入移出
.mbtn 使用者移入了嗎?
.mbtn
border: 2px solid #000
display: inline-block
padding: 10px 20px
cursor: pointer
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
$(".mbtn").mouseenter(
function() {
$(this).css("background-color", "#333");
$(this).css("color", "#fff");
$(this).text("使用者進入了!!");
}
);
$(".mbtn").mouseleave(
function() {
$(this).css("background-color", "#fff");
$(this).css("color", "#333");
$(this).text("使用者離開了 :(");
}
);
Display
使用者移入了嗎?
setTimeout:一定時間後的效果
.timerbox 10秒之後這裡變紅色
.timerbox
border: 2px solid #000
display: inline-block
padding: 10px 20px
cursor: pointer
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
//setTimeout(事件, 毫秒);→經過特定時間後執行
setTimeout(
function() {
$(".timerbox").css("background-color", "#f24");
}, 10000);
Display
10秒之後這裡變紅色
進階:倒數計時器製作
.countbox 經過了×××秒
.countbox
font-family: 微軟正黑體
letter-spacing: 1px
transition-duration: 1s
var nowtime = 0;
//setInterval(事件, 毎隔多少秒改變的秒數)→毎隔×秒後會出現的效果
setInterval(
function() {
nowtime = nowtime + 1
//.text("原本的文"+變數名稱+"字")→變數置入文字中
$(".countbox").text("已經經過" + nowtime + "秒");
}, 1000);
//表示毎經過一秒,會觸發兩個動作
//1 nowtime+1
//2 nowtime的値更新在文字上
Display