JQ事件调用方法

Original 2018-10-28 21:09:04 262
abstract:依旧上图 粘代码提交没反应<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ事件函数</title> <script type="text/javascript" sr

依旧上图 粘代码提交没反应

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ事件函数</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 在Jquery中是以调用事件函数的形式来触发事件的,如js中的onclick事件,在JQuery中则用click()来替代简单的理解:事件方法会触发匹配元素的事件,或者将函数绑定到所有匹配元素的某个事件
//  ready()当我们的dom已经加载,页面已经加载完,触发的事件==js的onload
//  语法:$(document).ready(function(){

//  })
// *不能与<body onload="">一起使用
// blur()当元素失去焦点 == onblur()
// focus()当元素获得焦点 ==onfocus
// change()当元素的值发生改变的时候
// dblclick()双击事件
// mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
// mouseenter() 当鼠标穿过元素时会发生mouseenter事件
// mousemove() 当鼠标在指定的元素中移动时,就会发生该事件
// mouseleave()当鼠标指针离开元素时
// mouseout() 当鼠标指针从元素上移开时
// mouseup() 当在元素上松开鼠标按键时
// resize() 当调整当前浏览器窗口大小时
// pageX 属性是鼠标指针的位置,相对于文档左边缘  event.pageX   event:必须  参数来自事件绑定函数
//pageY 属性是鼠标指针的位置,相对于文档上边缘  event.pageX   event:必须  参数来自事件绑定函数
$(document).ready(function(){
// $('input').blur(function(){
//  $(this).css('background','red');
// });
// $('input').focus(function(){
//  $(this).css('background','blue');
// // })
// $('input').change(function(){
//  $('input').css('background','pink');
// })
// $('button').click(function(){
//  $('div').css('background','blue')
// });
// $('div').dblclick(function(){
//  $(this).css('background','red')
// });
$(document).mousemove(function(aa){
$('span').text('x:'+aa.pageX+'y:'+aa.pageY);
})
a = 0;
$(window).resize(function(){
$('b').text(a+=1);
})
})

</script>
<input type="text" name="">
<button>改变</button>
<div style="width:100px;height:100px;background:#f0f"></div>
<div> 当前鼠标的位置是<span></span></div>
<div> 页面调整大小次数<b></b></div>
</body>
</html>


Release Notes

Popular Entries