jQuery事件、$().css、$('p').each

Cheat Sheet

https://oscarotero.com/jquery/

---

$().css

$().css 其實是修改 inline style

---

$('p').each

$('p').each 方法可經過 return false 終止

$('*').each 實際上每輪並非用 jQuery Dom Element 去調用方法

運行

function numberAddr() {
    console.log(this);
    console.log($(this));
}

$('p').each(numberAddr);

會獲得

---

Event Listening

monitorEvents

Chrome Dev Tool 提供了一個monitorEvents方法

var imgage = $('img')
monitorEvents(image)

$(target).on(targetEvent,function)

示例

/*
Use jQuery to set up an event listener. Your event listener must:
    1. listen to the #my-button element
    2. listen for a `click` event
    3. perform the following actions when the button is clicked:
        a. remove the #my-button element from the DOM
        b. add the `success` class to the body
*/

$('#mu-button').on('click',function() {
    $(this).detach();
    $('body').addClass('success');
});

可寫爲 ('#mu-button').click(function(){})

更多：
jQuery Event Api

---

事件代理

上面說到的 on 方法能夠有三個參數
好比 $( '.container' ).on( 'click', 'article', function() { … });
給 .container 添加click事件的監聽器，被點擊時檢查 target element 是不是 article

下面這段代碼，當爲 article 添加監聽器時，article 並未被建立，因此添加失敗。這時就應用事件代理的方法。

$( 'article' ).on( 'click', function() {
    $( 'body' ).addClass( 'selected' );   
});

$( 'body' ).append( '<article> <h1>Appended Article</h1> <p>Content for the new article </p> </article>' );

或者一個 ul 中有不少的 li 時，使用事件代理的方法就不須要爲每個 li 都專門設置一個監聽器

<ul id="rooms">
    <li>Room 1</li>
    <li>Room 2</li>
            .
            .
            .
    <li>Room 999</li>
    <li>Room 1000</li>
</ul>

---

Event Object

$( '#myAnchor' ).on( 'click', function( evt ) {
    evt.preventDefault();
    console.log( 'You clicked a link!' );
});

可經過 preventDefault 方法來告訴瀏覽器不執行默認的行爲。好比在這裏點擊錨點將不會跳轉到指定位置。（大概是先執行自定義的行爲後執行默認行爲）

event.keyCode 能得知按下的哪一個鍵 - 若是監聽一個特定的鍵則沒有價值
event.pageX 和 event.pageY 能得知被點擊的座標
event.type 能得知事件類型 - 當監聽多個事件的時候頗有用

更多：
jQuery's Event Object
event.target property