用户名变灰

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style type="text/css">

         .myClass{

             color:#c0c0c0

         }

     </style>

   <script type="text/javascript" src="../js/jquery-1.6.js"></script></head>

   <body>

     <table border="1" align="center">

         <tr>

             <th>用户名</th>

             <td>

                 <input type="text" value="输入用户名"/>

             </td>

         </tr>

     </table>

     <script type="text/javascript">

     $(function(){

         $("input").addClass("myClass");

         $("input").focus(function(){

             $(this).removeClass("myClass");

             $(this).val("");

         })

     });

     </script>

   </body>

 </html>

坦克上下左右移动

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

   </head>

   <body>

     <img src="../images/zgl.jpg"/>

     <script type="text/javascript">

         //初始化

         $(function(){

             //定位图片

             var $img = $("img");

             //将图片定位于指定的位置

             $img.offset({top:200,left:400});

             $img.width(100);

             $img.height(200);

             //为图片添加事件

             $(document).keydown(function(){

                 //获取按钮的code码

                 var code = event.keyCode;

                 //判断

                 if(code == 38){//上

                     $img.offset({top:y-=15});

                 }else if(code == 40){//下

                     $img.offset({top:y+=15});

                 }else if(code == 37 ){//左

                     $img.offset({left:x-=15});

                 }else if(code == 39){//右

                     $img.offset({left:x+=15});

                 }

             });

         });

         //全局变量

         var y = 200;

         var x = 400;

     </script>

   </body>

 </html>

jquery 事件小事例的更多相关文章

  1. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  2. JQuery事件的绑定

    关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...

  3. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  4. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  5. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  6. JQuery选择器JQuery 事件

    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  7. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  8. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  9. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

随机推荐

  1. [翻译] ObjectAL for iPhone and Mac（持续更新）

    ObjectAL for iPhone and Mac https://github.com/kstenerud/ObjectAL-for-iPhone 以后补上使用教程 Mac and iOS Au ...

  2. jquery 根据name获取元素的问题

    我要获取name属性为test的元素 但是这个test是赋值给变量的 如var name='test'; 即要获取name属性为变量name的元素 请问jquery怎么写? $("input ...

  3. Quartz调用大全

    Quartz调用大全 1.Quartz应用范围广泛,可单独执行也可在spring中嵌入执行. 类似的定时任务在linux下可以用crontab执行 2.实现代码: QuartzTest :主要执行类 ...

  4. 【BZOJ】【1876】【SDOI2009】SuperGCD

    高精度+GCD 唔……高精gcd其实可以这么算: \[ GCD(a,b)= \begin{cases} a & b=0 \\ 2*GCD(\frac{a}{2},\frac{b}{2}) &a ...

  5. 线程池的corePoolSize、maximumPoolSize和poolSize

    什么是线程池: 为了避免系统频繁的创建和销毁线程,我们可以将创建的线程进行复用.在线程池中总有那么几个活跃的线程,也有一定的最大值限制,一个业务使用完线程之后,不是立即销毁而是将其放入到线程池中,从而 ...

  6. @Java类加载器及双亲委派模型

    类与类加载器 虚拟机设计团队把类加载阶段的"通过一个类的全限定名来获取此类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个 ...

  7. C++类模板的声明和定义为什么要放在同一个文件

    不是只能放在.h里面,但是推荐放在.h里面.STL模板实现全部是放在.h里面的.------------------编译能通过.1)参与编译的只是.cpp文件,不会报错的原因,是因为它能在.h里面找到 ...

  8. fpga状态机详解

    什么是状态机:状态机通过不同的状态迁移来完成特定的逻辑操作 状态机的分类:Moore型状态机和Mealy型状态机 Moore型:状态机的变化只与当前的状态有关 Mealy型:状态机的变化不仅与当前的状 ...

  9. EventBus 事件总线 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. 怎么才能成为一名PHP专家？

    本文作者Bruno Skvorc是一名资深的Web开发者.在这篇文章里主要是讲述成为一名专业的PHP专家所要经历的过程,以及在这个过程里要如何学习掌握技巧和对工具的舍取.(以下为编译内容) 当阅读各种 ...