javascript第5章

来源：互联网发布：apache服务器搭建编辑：程序博客网时间：2024/06/05 10:41

. jQuery中典型的事件方法：         事件                  jQuery中的对应方法                 说明       单击事件                      click()             单击鼠标时发生，fn表示绑定的函数     按下键盘触发事件               keydown()            按下键盘时发生，fn表示绑定的函数       失去焦点事件                  blur()              失去焦点时发生，fn表示绑定的函数
绑定事件与移除事件：    1》绑定事件:       语法：  bind（type，[data]，fn）     bind（）方法有3个参数，其中参数data不是必须的，      bind()方法的参数说明    type():   事件类型     主要包括blur，focus，click，mouseover等基础事件，此外，还可以是自定义事件    [data]:   可选参数     作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的    fn：    处理函数         用来绑定的处理函数

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <style type="text/css">              </style>    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript">       $(function(){          $("[type=text]").keyup(function(event){              alert(event.keyCode);           });       });    </script>  </head>    <body>       <input type="text"/>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <style type="text/css">              </style>    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript">       $(function(){          $("[type=text]").keyup(function(event){              alert(event.keyCode);           });       });    </script>  </head>    <body>       <input type="text"/>  </body></html>

  </body></html>

、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">           <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>    <script type="text/javascript">       $(function(){                     $("[type=button]").bind("click",function(){             alert('呵呵，开玩笑的，随便点');           });           //我写个光棒效果           /* $("li").bind({            mouseover:function(){                $(this).css("background","pink");            },            mouseout:function(){                $(this).css("background","");            }           }); */                      //用hover实现光棒           $("li").hover(function(){           $(this).css("background","pink");           },function(){            $(this).css("background","");           });                      //卸载单个  事件           //$("li").unbind("mouseout mouseover");                                                 });    </script>  </head>    <body>   <h1>bind</h1>       <input type="button" value="点我"/>       <ul>          <li>5.1 吃土</li>          <li>5.1 吃草</li>          <li>5.1 吃番薯</li>       </ul>  </body></html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">           <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>    <script type="text/javascript">       $(function(){          $("[type=button]").toggle(function(){               $("body").css("background","pink");          },function(){                 $("body").css("background","#ee11aa");          },function(){                $("body").css("background","#7E11AA");          });                   });    </script>  </head>    <body>   <h1>bind</h1>       <input type="button" value="点我"/>       <ul>          <li>5.1 吃土</li>          <li>5.1 吃草</li>          <li>5.1 吃番薯</li>       </ul>  </body></html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">       <style type="text/css">          div{             width:300px;             height:300px;             border-color:blue;             border-style: dashed;          }       </style>    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>    <script type="text/javascript">       $(function(){                  /*  $("[value=show]").bind("click",function(){              $("ul").show(3000);           });                      $("[value=hide]").bind("click",function(){              $("ul").hide(3000);           }); */                                 /*            $("[type=button]").toggle(function(){              $("ul").hide();              $(this).val("show");           },function(){               $("ul").show();              $(this).val("hide");           }); */                      $("#mybtn").bind("click",function(){               $("div").animate({"font-size":"35px"}, 3000)               .animate( { width: "90%"}, { queue: false, duration:3000 } )               .animate( { borderWidth: 100 }, { queue: false, duration:3000 });           });                  });    </script>  </head>    <body>   <h1>bind</h1>     <div>人生入戏</div>     <input type="button" id="mybtn" value="自定义动画"/>       <input type="button" value="hide"/>        <!-- <input type="button" value="hide"/> -->        <hr/>               <ul>          <li>5.1 吃土</li>          <li>5.1 吃草</li>          <li>5.1 吃番薯</li>       </ul>  </body>

</html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <style type="text/css">           div{          width:300px;          height:300px;          border:1px solid red;       }    </style>    <script type="text/javascript" src="js/jQuery1.11.1.js"></script>    <script type="text/javascript">       $(function(){          $("div").mouseover(function(){             $(this).css("background","pink");          });                    $("div").mouseout(function(){             $(this).css("background","");          });                    $("div").click(function(){             var value= $(this).text();             alert(value);          });       });    </script>  </head>    <body>       <div>我是div</div>  </body></html>

0 0