java script第5章

来源：互联网发布：故宫淘宝有没有app 编辑：程序博客网时间：2024/05/20 23:37
<!DOCTYPE html><html>  <head>    <title>shangji1.html</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script  type="text/javascript"> //day-05  事件和动画 事件：1.鼠标 click mouseover mouseout   光棒效果              2.键盘 keyup  keypress(过程)  keydown   $(function() {$("input").keydown(function() {$("span").append("keydown");}).keypress(function() {$("span").append("keypress");}).keyup(function() {$("span").append("keypup");});});      3.表单事件 focus blur 移入/移出$(function() {$("input").focus(function() {$(this).addClass("mycolor");}).blur(function() {$(this).removeClass("mycolor");});});  4.复合事件 hover 移入/移出  $(function(){   $("li").hover(   function(){   $(this).css("background-color","pink");   }   ,function(){    $(this).css("background-color","");   });});          绑定和移除事件  bind() unbind()   $(function(){$("li").bind("mouseover",function(){  (this).css("background","pink");}).bind("mouseout",function(){(this).css("background","");});$("li").unbind("mouseout","mouseover");});on off live toggle() 三连击  动画：         简单 显示和隐藏  show() hide()      淡入淡出   fadeIn() fadeOut()  改变元素高度  slideUp() slideDwon()  $(function(){  $("#butOut").click(function()  {    $("img").hide("");  });   $("#butIn").click(function()  {    $("img").show("slow");  });  });            复杂 animate({})     </script>  </head><body>3.   用户名<input type="text"></input>密码  <input type="password"></input>4.<ul>  <li>熊大</li>   <li>熊二</li>    <li>光头强</li></ul> </body></html>
0 0