摘要:<!DOCTYPE html> <html> <head> <title>jquery的事件函数he事件切换</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></sc
<!DOCTYPE html>
<html>
<head>
<title>jquery的事件函数he事件切换</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: #ccc;border: 1px solid yellow}
</style>
</head>
<body>
blur();当元素失去焦点 (也就是鼠标移上或移下)<br>
focus();当元素获得焦点;<br>
change();当元素值发生改变;<br>
click()点击事件;<br>
dblclick();双击事件;<br>
hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br>
toggle()元素可见就切换隐藏,否则相反;<br>
<input type="text" name="">
<div>请叫我鲁先生</div>
<div class="like"></div>
<button>点击</button>
<script>
$(document).ready(function(){
// blur();当元素失去焦点 (也就是鼠标移上或移下)
// $('input').blur(function(){
// $('input').css('background','red')
// })
// focus();当元素获得焦点;
$('input').focus(function(){
$('input').css('background','red')
})
// change();当元素值发生改变;
// $('input').change(function(){
// $('input').css('background','red')
// })
// hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br>
// $('div').hover(
// function(){
// $(this).css('background','blue')
// },
// function(){
// $(this).css('color','#fff')
// }
// )
$('button').click(function(){
$('.like').toggle()
})
})
</script>
</body>
</html>
批改老师:查无此人批改时间:2019-04-08 16:06:41
老师总结:完成的不错。jq和js每行结束后面增加;号。继续加油