jq的私人网站：http://jquery.cuishifeng.cn/
具体的查看上面的网站
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq事件操作</title>
<style>
.box,.box2 {
200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<input class="inp" type="text">
</body>
<script src="js/jq.js"></script>
<script>
//jq的弹出窗口事件有两种写法
//1、jq设置点击弹窗
var $box = $('.box');
$box.click(function () {
alert('这是jq事件')
});
//2、这是第二种
var $box1 = $('.box1');
$box1.on('click',function () {
alert('这是第二种事件写法')
});
//获取焦点
$('.inp').focus(function () {
console.log('获取焦点')
});
//失去焦点
$('.inp').blur(function () {
console.log('失去焦点')
});
//mouseover和mouseenter是一样的
$('.box').mouseenter(function () {
console.log('鼠标移入')
});
$('.box').mouseout(function () {
console.log('鼠标移出')
});
$('.box').mousemove(function () {
console.log('鼠标在区域内移动')
});
$('.box2').mouseenter(function () {
console.log('鼠标移入')
});
$('.box2').mouseout(function () {
console.log('鼠标移出')
});
$('.box2').mousemove(function () {
console.log('鼠标在区域内移动')
});
//事件转换成on状态
$('.box2').on('mouseover',function () {
console.log('事件转成on状态')
})
</script>
</html>