<!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>