摘要:语法:$(document).ready(function(){ }) 不能和<body onload="">一起使用focus()当元素获得焦点change()当元素的值发生改变的时候click()点击事件dblclick()双击事件mouseover() 当鼠标指针位于元素上方时会发生mouseover事件mouseenter() 当鼠标指
语法:
$(document).ready(function(){
})
不能和<body onload="">一起使用
focus()当元素获得焦点
change()当元素的值发生改变的时候
click()点击事件
dblclick()双击事件
mouseover() 当鼠标指针位于元素上方时会发生mouseover事件
mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
mousemove() 当鼠标指针在指定的元素中移动时,就会发生该事件
mouseleave() 当鼠标指针离开元素时
mouseout() 当鼠标指针从元素上移开时
mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时
mouseup() 当在元素上松开鼠标按键时
resize() 当调整当前浏览器窗口大小时
pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必须 参数来自事件绑定函数
pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event: 必须 参数来自事件绑定函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件方法</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
/*$('input').blur(function(){
$('input').css('background','red')
})
$('input').focus(function(){
$('input').css('background','blue')
})*/
/*$('input').change(function(){
$('input').css('background','pink')
})
$('button').click(function(){
$('div').css('backgroundColor','blue')
})*/
/*$('button').dblclick(function(){
$('div').css('backgroundColor','blue')
})*/
/*$(document).mousemove(function(a){
$('span').text('x:'+a.pageX+'y:'+a.pageY)
})
n=0;
$(window).resize(function(){
$('b').text(n++)
})*/
/*$('div').mouseenter(function(){
$('div').css('backgroundColor','pink')
})
$('div').mouseleave(function(){
$('div').css('backgroundColor','blue')
})*/
/*$('div').mouseout(function(){
$('div').css('backgroundColor','blue')
})*/
/*$('div').mouseover(function(){
$('div').text('大家好,我是星辰')
})*/
$('div').mousedown(function(){
$('div').text('按下')
})
$('div').mouseup(function(){
$('div').text('松开')
})
})
</script>
<!-- <input type="text" name="">
<div style="width:100px;height:100px;background-color:red;margin-top: 20px;"></div>
<button>点击</button> -->
<!-- 鼠标位置:<span></span>
窗口大小被调整的次数:<b></b> -->
<div style="width:100px;height: 100px;margin:50px auto;background: red;"></div>
</body>
</html>