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