摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery</title>
<link rel="stylesheet" href="css/php.css" type="text/css">
<script src="js/php.js" type="text/javascript
"></script>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;font-size: 22px;}
div{width: 80%;margin: 0 auto;}
ul,li{list-style: none;margin: 10px;}
.con3{width: 100px;height: 100px;border: 1px solid #ccc;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#con').css('border','5px solid pink');
$('.con1').css('box-shadow','5px 5px 10px #888');
$('.con1').css('border','5px solid #ea5404');
$('#con > p').css('color','green');
$('#con p').css('color','orange');
//匹配.con_li后面的所有兄弟li
$('.con_li ~ li').css('background','#ccc');
$('p:contains(www.php.cn)').css('font-weight','blod');
$('div:empty').css('background','#ea5404');
$('div:empty').css('color','red');
$('input[name=jinggege]').css('background','green');
$('input[name=btn]').css('background','green');
$(':selected').css('background','red');
$(':checked').parent().css('background','pink');
})
</script>
</head>
<body>
<div>
php zhongwen wang !
</div>
<hr>
<h1></h1>
<div></div>
<h3>jquery动画效果</h3>
<style>
h3{margin-bottom: 20px;}
.jq1,.jq2,.jq3,.jq4{width: 150px;height: 150px;float: left;margin-right: 20px;background: #ea5404;margin-bottom: 20px;}
#dianji3,#dianji,#dianji2,#dianji4,#dianji5,#dianji6,#dianji7,#dianji8{border: 0px;width: 70px;height: 50px;color: brown;}
.clear{clear:both;}
</style>
<script>
$(document).ready(function(){
$('#dianji').click(function(){
$('.jq1').show(2000,"swing",function(){
$('.jq1').css('background','#ccc');
})
})
$('#dianji2').click(function(){
$('.jq1').hide("slow",function(){
$('#dianji2').css({'background':'green'});
})
})
$('#dianji4').click(function(){
$('.jq3').slideUp("slow",function(){
console.log("slide UP!!!");
})
})
$('#dianji5').click(function(){
$('.jq3').slideDown(2000,function(){
console.log("Slide Down!!");
})
})
$('#dianji3').click(function(){
$('.jq3').slideToggle("slow",function(){
console.log("this is SlideToggle!!");
})
})
$('#dianji6').click(function(){
$('.jq4').css('position','relative');
$('.jq4').animate({'left':'+200px','opacity':'0.5','fontSize':'30px'},"slow",function(){
console.log("this is animate!");
})
})
$('#dianji7').click(function(){
$('.jq4').stop();
})
$('#dianji8').click(function(){
$('html,body').animate({scrollTop:0},'slow');
console.log($('#dianji8').length);
$(window).scroll(function(){
if($(this).scrollTop()<300){
$('#dianji8').fadeOut('slow');
}
else{
$('#dianji8').fadeIn('slow');
}
})
})
})
</script>
<div>show</div>
<div></div>
<div>slideup<br>slidedown<br>slidetoggle</div>
<div>animate</div>
<br>
<div></div>
<input type="button" id='dianji' value="显示">
<input type="button" id='dianji2' value="隐藏">
<input type="button" id='dianji4' value="向上滑动">
<input type="button" id='dianji5' value="向下滑动">
<input type="button" id='dianji3' value="Toggle">
<input type="button" id='dianji6' value="Animate">
<input type="button" id='dianji7' value="Stop">
<input type="button" id='dianji8' value="ScrollTop">
</body>
</html>
批改老师：韦小宝批改时间：2019-01-02 15:08:39
老师总结：写的很不错！jQuery来实现动画效果比JavaScript简单多了吧！课后记得要多练习哦！
