摘要：這章內容總結：對DOM對象進行讀寫操作，并通過監(jiān)聽事件，實現(xiàn)人機交互。操作的形式總結為：object.method(參數，參數...)jquery還支持鏈式操作，也即：obj.method().method().....<!DOCTYPE html> <html> <head> <meta&nbs
這章內容總結：
對DOM對象進行讀寫操作，并通過監(jiān)聽事件，實現(xiàn)人機交互。
操作的形式總結為：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區(qū)塊）改變li區(qū)塊顏色
$('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簡單很多，多練習。繼續(xù)加油。