事件2的练习总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.move{width: 100px;height: 100px;background: red;}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){ //文档就绪函数开始
// ----------------------------------------------------------------
// 事件函数：窗口发生大小变化或调整后发生的函数resize
// a = 1;
// //这是一个window方法，连接上resize函数事件，操作浏览器了所以叫window方法
// $(window).resize(function(){
// // 声明获取b标签把b标签的内容插入a的值，a用户计算用户乱动显示器的行为！
// $('b').text(a++)
// alert('亲，不要乱动显示器')
// })
// ----------------------------------------------------------------
// 鼠标事件mouseove： 获取鼠标移动事件 获取坐标值：pageX() pageY()
// $(document).mousemove(function(aa){
// // 获得x值加上y值坐标的结果插入到css属性
// $('.coord').text('x:'+aa.pageX+'y:'+aa.pageY);
// })
// coord：坐标
//-----------------------------------------------------------------
//双击事件 dbclick()
// 第一句语法和别的不太一样，是直接先获取元素，然后连接双击事件函数
// $('.move').dbclick(function(){
// // this是指向函数绑定的DOM元素本身
// $(this).css('background','blue')
// })
//-----------------------------------------------------------------
// 点击事件 click
// $('button').click(function(){
// $('#box').css('background','yellow')
// })
//-----------------------------------------------------------------
// focus() 当元素获取到焦点
// $('.input1').focus(function(){
// $('.input1').css('background','pink')
// })
//-----------------------------------------------------------------
// blur() 当元素失去焦点 例如：用户离开了input框执行此函数方法改变背景红色
// $('.input2').blur(function(){
// $('.input2').css('background','blue')
// })
//-----------------------------------------------------------------
}) //文档就绪函数 结束
</script>
</head>
<body>
当前坐标<span></span>
<input type="" name="">
<p>正在计算您已经调整窗口<b></b>次</p>
<div></div>
<div id="box"></div>
<button>变色</button>
<br>
<input>
<br>
<span>鼠标离开文本框变蓝</span><input>
<br>
</body>
</html>
