JavaScript - jQuery注意点

jQuery统一了不同浏览器之间的DOM操作的差异

1. jQuery === $ // true

1.1 $(x) //将x转换为jQuery对象，便于调用jQuery提供的API

1.2 方便操作DOM，支持链式写法，消除各浏览器差异性，一套代码即可

2. $(function () {...})的形式，是document对象的ready事件处理函数。

由于该事件在DOM初始化后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

演变如下: 2.1 - 2.3 越来越简化

2.1

        $(document).on('ready', function () {
            $('#testForm).on('submit', function () {
                alert('submit!');
            });
        });

2.2

$(document).ready(function () {
    // on('submit', function)也可以简化:
    $('#testForm).submit(function () {
        alert('submit!');
    });
});

2.3

$(function () {
    // init...
});

3. 事件参数

3.1 有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息

3.2 https://github.com/janetat/Front-end-toys/tree/master/4. Coordinate-when-mouse-moves

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

4. 取消事件绑定

4.1 off('click')一次性移除已绑定的click事件的所有处理函数。

4.2 无参数调用off()一次性移除已绑定的所有类型的事件处理函数。

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

以下的代码无法达到预期，两个匿名function是两个不同的对象

// 绑定事件:
a.click(function () {
    alert('hello!');
});

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

5. 事件触发条件

5.1 事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动，当用户在文本框中输入时，就会触发change事件

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});

5.2 果用JavaScript代码去改动文本框的值，将不会触发change事件：

var input = $('#test-input');
input.val('change it!'); // 无法触发change事件

5.3 有些时候，我们希望用手动触发change事件，可以直接调用无参数的change()方法来触发该事件：

input.change()相当于input.trigger('change')，它是trigger()方法的简写。

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

5.4 由于浏览器的限制，有些敏感的代码只能手动触发

// 无法弹出新窗口，将被浏览器屏蔽:
$(function () {
    window.open('/');
});

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');

function popupTestWindow() {
    window.open('/');
}

button1.click(function () {
    popupTestWindow();
});

button2.click(function () {
    // 不立刻执行popupTestWindow()，100毫秒后执行:
    setTimeout(popupTestWindow, 100);
});