摘要：这章内容总结：对DOM对象进行读写操作，并通过监听事件，实现人机交互。操作的形式总结为：object.method(参数，参数...)jquery还支持链式操作，也即：obj.method().method().....<!DOCTYPE html> <html> <head> <meta&nbs
这章内容总结：
对DOM对象进行读写操作，并通过监听事件，实现人机交互。
操作的形式总结为：object.method(参数，参数...)
jquery还支持链式操作，也即：obj.method().method().....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
li{width:200px;height:100px;background: lightblue;margin:20px auto;border-radius: 10px;}
.border{
border:1px solid darkslategrey;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//ready事件，简写为$(function(){});
$(function () {
//click事件改变li标签内容
$('li').click(function(){
$('li').text("");
$(this).text("我被单击，双击加边框");
});
//事件切换（鼠标进出li区块）改变li区块颜色
$('li').hover(
function () {
$(this).css('background','green');
},
function () {
$(this).css('background','lightblue');
}
);
//双击新增class，显示边框
$('li').dblclick(function () {
$(this).addClass('border');
})
});
</script>
</html>效果图
批改老师：查无此人批改时间：2019-06-17 09:32:16
老师总结：完成的不错。jq比js简单很多，多练习。继续加油。
