abstract：//HTML: <!-- jquery使用 $(document).ready(function() {}就緒 = windwo.onload = function(){} --> <script type='text/javascript'> <div class="abox1"></div> <div c
//HTML:
<!-- jquery使用 $(document).ready(function() {}就緒 = windwo.onload = function(){} -->
<script type='text/javascript'>
<div class="abox1"></div>
<div class="abox1"></div>
$(document).ready(function() {
//樣式多屬性調(diào)整
$('.abox1').css({
'background-color': 'red',
'border': '5px solid green',
'color':'blue'
});
//文檔處理：
// $('.abox1').append('<b>Hello world</b>');
//事件處理：光標(biāo)懸停當(dāng)前標(biāo)簽顯示文本內(nèi)容
$(".abox1").on("mouseover", function(){
if($(this).text() == 'Hello world'){
$('.abox1').empty();
}else{
$('.abox1').append('<b>Hello world</b>');
}
});
//事件處理：焦點(diǎn)失去當(dāng)前標(biāo)簽隱藏文本內(nèi)容
$(".abox1").on("mouseout", function(){
if($(this).text() == 'Hello world'){
$('.abox1').empty();
}else{
$('.abox1').append('<b>Hello world</b>');
}
});
}); //end
</script>
//CSS:
.abox1{
width: 200px;
height:200px;
border:1px solid red;
margin-bottom:10px;
text-align: center;
line-height: 200px;
}
.abox2{
width: 200px;
height:200px;
border:1px solid green;
}
//總結(jié)：學(xué)習(xí)jQuery，大大優(yōu)化了javascript選擇標(biāo)簽的代碼效率，使用$(selector)代替了document.getElementById\document.getElementsByClassName等等，還有x.append("追加內(nèi)容")改變文檔內(nèi)容，empty("清空內(nèi)容").有個(gè)問(wèn)題想請(qǐng)教老師，jQuery代碼除了在html頁(yè)編寫(xiě)，是不是還可以在jquery-3.4.0.min.js外部文件編寫(xiě)。
Correcting teacher：查無(wú)此人Correction time：2019-04-23 13:42:29
Teacher's summary：完成的不錯(cuò)。jq比js簡(jiǎn)單很多，多練習(xí)，代替js。繼續(xù)加油。