jquery的事件方法和总结

Original 2019-01-08 16:35:21 204
abstract:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery的事件方法</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

</head>


<body>

<script type="text/javascript">


$(function(){

// $('input').blur(function(){

// $('input').css('background','red')})


// $('input').focus(function(){


// $('input').css('background','green')

// })

//$('input').change(function(){


// $('input').css('background','blue')

// })


//$('button').click(function(){


//$('input').css('background','red')

//})


//$('button').dblclick(function(){


//$('input').css('background','pink')



//})


// $(document).mousemove(function(sbwz){


//$('span').text('x:'+sbwz.pageX+'Y:'+sbwz.pageY)


// })


//X和Y要为大写

// tzcs=0

//$(window).resize(function(){

//alert("窗口调整")

// $('p').text(tzcs++)


// })


//$('div').hover(function(){

//$(this).css('background','red')},

//函数间用,隔开

//function(){$(this).css('background','pink')}


//)


//$('button').click(function(){

// $('div').toggle().css('background','blue')

// })



$('div').mouseenter(function(){

$(this).css('background','pink')


}),


$('div').mouseleave(function(){

$(this).css('background','red')


}),


$('div').mouseup(function(){

$(this).css('background','green')


})



})




</script>

<input type="text" name="">

<button>点击测试</button>

<div style="width:200px; height:200px; border:1px solid #CCC; ">

  <!--当前鼠标的位置:<span> </span><br>

  当前调整次数:<p> </p> -->

测试内容

  

</div>

</body>

</html>



<!--jquery事件方法总结


$(document).ready(function(){})

简洁:$(function(){})


$('p').click()


dblclick() 双击


mouseenter() 鼠标穿过


mouseleave()  鼠标离开


mousedown()  移到上方


mouseup()     松开鼠标


hover()  移上移开


focus()  获得焦点

blur()   失去焦点


toggle()  隐藏或可见


 -->


Correcting teacher:灭绝师太Correction time:2019-01-08 16:56:42
Teacher's summary:完成的不错,基本都是测试,下次作业最好带上案例奥!

Release Notes

Popular Entries