abstract：這章內(nèi)容總結(jié)：對(duì)DOM對(duì)象進(jìn)行讀寫(xiě)操作，并通過(guò)監(jiān)聽(tīng)事件，實(shí)現(xiàn)人機(jī)交互。操作的形式總結(jié)為：object.method(參數(shù)，參數(shù)...)jquery還支持鏈?zhǔn)讲僮?，也即：obj.method().method().....<!DOCTYPE html> <html> <head> <meta&nbs
這章內(nèi)容總結(jié)：
對(duì)DOM對(duì)象進(jìn)行讀寫(xiě)操作，并通過(guò)監(jiān)聽(tīng)事件，實(shí)現(xiàn)人機(jī)交互。
操作的形式總結(jié)為：object.method(參數(shù)，參數(shù)...)
jquery還支持鏈?zhǔn)讲僮鳎布矗簅bj.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事件，簡(jiǎn)寫(xiě)為$(function(){});
$(function () {
//click事件改變li標(biāo)簽內(nèi)容
$('li').click(function(){
$('li').text("");
$(this).text("我被單擊，雙擊加邊框");
});
//事件切換（鼠標(biāo)進(jìn)出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>效果圖
Correcting teacher：查無(wú)此人Correction time：2019-06-17 09:32:16
Teacher's summary：完成的不錯(cuò)。jq比js簡(jiǎn)單很多，多練習(xí)。繼續(xù)加油。