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);

});

巴特西

JavaScript - jQuery注意点

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

1. jQuery === $ // true

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

3. 事件参数

4. 取消事件绑定

5. 事件触发条件

最新文章

热门文章