abstract：<!DOCTYPE html><html><head> <title>jQuery的DOM操作</title> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script type="text/ja
<!DOCTYPE html>
<html>
<head>
<title>jQuery的DOM操作</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. 当input获取焦点时
// $('#name').focus(function(){
// $(this).css('background','#ffffcc');
// });
// 2. 当input失去焦点时
// $('#name').blur(function(){
// $(this).css('background','#d6d6ff');
// });
// 3. 当input发生改变时
// $('#name').change(function(){
// $('[type]').css('background','red');
// });
// 4. 当点击切换按钮时
// $('button').click(function(){
// $('p').slideToggle();
// });
// 5. 当input按下按键时,改变文本域的颜色
// $('#name').keydown(function(){
// $(this).css('background','#FF6700');
// });
// 6. 当input按下按键松开时,改变文本域的颜色
// $('#name').keyup(function(){
// $(this).css('background','blue');
// });
// 7. 当按下鼠标按钮时,隐藏或显示元素
// $('#btn2').mousedown(function(){
// $('p').slideToggle();
// });
// 8. 当鼠标指针移入元素时, 改变元素的背景色
// $('p').mouseover(function(){
// $('p').css('background','#ff6700');
// });
// 9. 当鼠标指针离开元素时, 改变元素的背景色
// $('p').mouseleave(function(){
// $('p').css('background','blue');
// });
// 10. 当鼠标指针在页面中的位置
// $(document).mousemove(function(e){
// $('span').text(e.pageX + "," + e.pageY);
// });
// 11. 获取元素属性与改变属性
$('.bg1').click(function(){
var a = $('#box').attr('class');
console.log(a);
$('#box').attr('class','bg2');
});
});
</script>
<style type="text/css">
.bg1{width: 100px;height: 100px;background: red;}
.bg2{width: 100px;height: 100px;background: blue;border-radius: 50%;border: 4px solid red}
</style>
</head>
<body>
<input type="text" id="name">
<p>我们都是追梦人</p>
<button>切换</button>
<hr>
<button id="btn2">点击</button>
<hr>
<p>鼠标位于坐标: <span></span> </p>
<hr>
<div id="box" class="bg1"></div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-02-12 09:18:31
Teacher's summary：原生js中事件是属性,jQuery中,事件封装成一个方法,将执行函数做为参数回调, 这个要注意二者的区别
