jQuery实例 · 前端学习笔记

# 1.点击搜索框出现宽度拉长的效果效果图 ![](https://i.loli.net/2019/03/09/5c832aa4a9498.gif) - 引入在线jQuery ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> ~~~ ~~~ <style> *{margin:0;padding: 0} //搜索框的修饰 form{ margin: 100px; width: 250px; height: 40px; position: relative; } button{ width: 23px; border: none; height: 22px; //在iconfont上下载的搜索图标 background: url('images/搜索.png') no-repeat center center; position: absolute; right:10px; top:9px; } input{ padding: 20px; box-sizing: border-box; width: 250px; height: 40px; border-radius: 20px; border: none; background-color: #eee; /* 去掉了点亮效果 */ outline: none; } </style> <body> //建立表单 <form> <input type="text" id="input"> <button></button> </form> //动效的关键 <script> $("#input").focus(function(){ $(this).animate({width:"300px"},1000) $("button").animate({right:"-47px"},1000) }).blur(function(){ $(this).animate({width:"250px"},1000); $("button").animate({right:"10px"},1000) }) </script> </body> ~~~ # 2.点击变色 ![](https://i.loli.net/2019/03/09/5c837da698d1f.gif) >引入在线jQuery ~~~ <style> div{ width:100px; height:100px; } .one{ background: yellow; } .two{ background: red; } </style> <body> <div class="one" id="div"> </div> <script> /* hasClass -->返回boolean addClass removeClass */ $("#div").click(function(){ if($(this).hasClass("one")){ $(this).removeClass("one").addClass("two") }else{ $(this).removeClass("two").addClass("one") } }) </script> </body> ~~~