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() {
//样式多属性调整
$('.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，大大优化了javascript选择标签的代码效率，使用$(selector)代替了document.getElementById\document.getElementsByClassName等等，还有x.append("追加内容")改变文档内容，empty("清空内容").有个问题想请教老师，jQuery代码除了在html页编写，是不是还可以在jquery-3.4.0.min.js外部文件编写。
Correcting teacher：查无此人Correction time：2019-04-23 13:42:29
Teacher's summary：完成的不错。jq比js简单很多，多练习，代替js。继续加油。