事件2的练习总结

Original 2018-11-29 19:21:20 279
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">   .move{widt
<!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>


Release Notes

Popular Entries