iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0

將使用這的要求轉化成實際的專案需求是實作專案以及節省時間的重要技巧。

var pts = 250;

var => 宣告變數
pts => 變數名稱
250 => 變數的值

串接

var msg ="High score: <strong>"+pts+"</strong>";

設定文字跟HTML的值要用雙引號""包起來
串接or結合數字、文字、變數要用+串起來
參照變數(pts)時,直接使用變數名稱,不用加雙引號

顯示文字

var disconut_msg ="<p> Your Discount is" + discount + "%</P>";

使用<p>來顯示訊息

插入內容

$("guess_box").append(discount_msg);
//在guess_box之後插入discount_msg內的文字

把特定內容插入呼叫它的任何元素的後面

繫結事件

當我們為元素添加事件時,我們稱之為把事件繫結(bind)到元素。
有兩種方式把元素繫結起來。

方法1

使用此方法,在頁面被載入時將事件添加到元素,這常被稱作便捷方法(convenience method)。

$("#myElement").click(function(){
    alert($(this).text());
});

方法2

就像用方法1一般使用這個方法,但是我們也能夠使用它針對載入頁面後才被增加到頁面上的元素添加事件,就像建立新的DOM元素那樣。

$("myElement").bind('click',function(){
    alert($(this).text());
});

方法1的便捷方法只是方法2的捷徑,但是只能夠用在DOM元素已經存在時。


上一篇
Day23::從零開始的jQuery 學習紀錄
下一篇
Day25::從零開始的jQuery 學習紀錄 -3-
系列文
三十哩路,我的前端學習路程30

1 則留言

1
Kuro Hsu
iT邦新手 4 級 ‧ 2017-12-27 18:56:07

綁定事件更推薦用 .on 來處理喔,可以少打一些字。 XD

另外,在 HTML 只有一個 .btn 元素,而新元素 .btn2 是在後來才 append 的情況下,像這樣

<button class="btn">Button</button>

<script>
$('.btn2').on('click', function(){
  console.log('btn2');
});

$('.btn').on('click', function(){
  console.log('btn');
  $('body').append('<button class="btn2">Button2</button>');
});
</script>

要注意的是,.btn2 是在點擊了 .btn 之後才產生,這時先前綁在 .btn2 的事件反而不會被觸發。

看更多先前的回應...收起先前的回應...

原來還有這樣的方法...!!
那假如我希望.btn2能夠觸發

$('.btn2').on('click', function(){
  console.log('btn2');
});

我可以像這樣子寫嗎?

<button class="btn">Button</button>

<script>
$('.btn').on('click', function(){
  console.log('btn');
  $('body').append('<button class="btn2">Button2</button>');
});

$('.btn2').on('click', function(){
  console.log('btn2');
});
</script>
Kuro Hsu iT邦新手 4 級 ‧ 2017-12-27 22:50:56 檢舉

這樣不行,因為執行到

$('.btn2').on('click', function(){ ... });

的時候, .btn2 的按鈕還沒長出來,自然也綁不到 click 事件。

但是如果換成把事件綁在上一層,假設是 body 上的話,就可以:

$('body').on('click', '.btn2', function(){
  console.log('btn2');
});

body 接收到事件的時候,再去判斷 click 的對象是不是 .btn2。 如果是,才去執行對應的 callback function。

像這樣的做法,叫做「事件指派」(Event Delegation)。

感覺有點複雜,我需要點時間吸收QQ

不能執行的原因我可以想像成是

$('.btn').on('click', function(){

$('.btn2').on('click', function(){

是同一層的關係所以執行上其實是會一起執行,所以才會抓不到在.btn裡面的東西?

Kuro Hsu iT邦新手 4 級 ‧ 2017-12-27 23:15:44 檢舉

之所以 $('.btn2').on('click', function(){ ... }); 綁不到事件的原因在於 $('.btn2') 在綁事件的時候, <button class="btn2">Button2</button> 根本還沒生成。

也就是說,當程式執行到

$('.btn2').on('click', function(){ ... });

這行的時候,其實 $('.btn2') 是空的 XD

我、我懂了!謝謝 Kuro大大的細心講解

Kuro Hsu iT邦新手 4 級 ‧ 2017-12-27 23:41:41 檢舉

/images/emoticon/emoticon07.gif

我要留言

立即登入留言