摘要：//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() {
//樣式多屬性調整
$('.abox1').css({
'background-color': 'red',
'border': '5px solid green',
'color':'blue'
});
//文檔處理：
// $('.abox1').append('<b>Hello world</b>');
//事件處理：光標懸停當前標簽顯示文本內容
$(".abox1").on("mouseover", function(){
if($(this).text() == 'Hello world'){
$('.abox1').empty();
}else{
$('.abox1').append('<b>Hello world</b>');
}
});
//事件處理：焦點失去當前標簽隱藏文本內容
$(".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;
}
//總結：學習jQuery，大大優(yōu)化了javascript選擇標簽的代碼效率，使用$(selector)代替了document.getElementById\document.getElementsByClassName等等，還有x.append("追加內容")改變文檔內容，empty("清空內容").有個問題想請教老師，jQuery代碼除了在html頁編寫，是不是還可以在jquery-3.4.0.min.js外部文件編寫。
批改老師：查無此人批改時間：2019-04-23 13:42:29
老師總結：完成的不錯。jq比js簡單很多，多練習，代替js。繼續(xù)加油。