//JQuery 事件
//满足了很多浏览器的兼容性问题
//ready的三种写法
//等待页面加载完毕后加载
//1)
$(document).ready(function() {
console.log('ready1');
});
//2)
$().ready(function() {
console.log('ready2');
});
//3)
$(function() {
console.log('ready3');
$('div:first').click(function() { // 单击
console.log('div click');
});
$('div:first').dblclick(function() { // 双击
console.log('div dblclick');
});
$('div:first').mouseenter(function() { // 鼠标进入
console.log('div mouse enter');
});
$('div:first').mouseleave(function() { // 鼠标离开
console.log('div mouse leave');
});
$('div:first').hover(
function() { // 鼠标进入悬停
$(this).css('background-color', 'green');
},
function() { // 鼠标离开后
$(this).css('background-color', 'blue');
}
);
//focus：用tab健切换后进入
$(':button:first').focus(function() { // 选中
$(this).css('background-color', 'red');
});
//blur：用tab健切换后离开
$(':button:first').blur(function() { // 未选中
$(this).css('background-color', 'white');
});
//bind：可以用更加优雅的方式绑定给一个元素多个事件，以object的方式
$(':button:eq(1)').bind({ // 对象（key-value对），key为事件，value为函数表达式
focus: function() {
$(this).css('background-color', 'red');
},
blur: function() {
$(this).css('background-color', 'white');
}
});
//bind：可以用于传递参数
function handler(e) {
console.log(e.data.msg);
}
$(':button:eq(2)').bind('focus', {msg: 'hello'}, handler);
//key事件
$(':button:eq(3)').keydown(function(e) {
var key = e.which; // 获取事件key码
console.log('keydown' + key);
});
$(':button:eq(3)').keyup(function(e) {
var key = e.which; // 获取事件key码
console.log('keyup' + key);
});
$(':button:eq(3)').keypress(function(e) {
var key = e.which; // 获取事件key码
console.log('keypress' + key);
});
//delegate事件（冒泡）
$('div:eq(1)').delegate('p', 'click', function() { // 找到'p'的'click'事件
//三个参数为：选择器（可以为*），事件类型，事件响应
console.log($(this));
console.log(event.target); // event.target 事件源
});
//on -> 代替bind，delagate
//绑定多个事件用来代替bind，直接替换
$(':button:eq(4)').bind({ // 对象（key-value对），key为事件，value为函数表达式
focus: function() {
$(this).css('background-color', 'red');
},
blur: function() {
$(this).css('background-color', 'white');
}
});
//传递参数代替bind
$(':button:eq(5)').on('focus', {msg: 'hello'}, handler);
//代替delegate
$('div:last').on('click', 'p', function() { // 和delegate中前两个参数位置互换，将delegate直接替换为on
//三个参数为：事件类型，选择器（可以为*），事件响应
console.log($(this));
console.log(event.target);
});
});
// live/die/size/toggle已经不使用了
对应html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>div 1
<p>p1</p>
<p>p2</p>
</div>
<div>div 2
<p>p1</p>
<p>p2</p>
</div>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<button>button5</button>
<button>button6</button>
<div>div 3
<p>p1</p>
<p>p2</p>
</div>
<script src="s54.js"></script>
</body>
</html>
![CSS：class选择器的使用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)