用户名变灰

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  <html>
  3.    <head>
  4.      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.      <style type="text/css">
  6.          .myClass{
  7.              color:#c0c0c0
  8.          }
  9.      </style>
  10.    <script type="text/javascript" src="../js/jquery-1.6.js"></script></head>
  11.    <body>
  12.      <table border="1" align="center">
  13.          <tr>
  14.              <th>用户名</th>
  15.              <td>
  16.                  <input type="text" value="输入用户名"/>
  17.              </td>
  18.          </tr>
  19.      </table>
  20.      <script type="text/javascript">
  21.      $(function(){
  22.          $("input").addClass("myClass");
  23.          $("input").focus(function(){
  24.              $(this).removeClass("myClass");
  25.              $(this).val("");
  26.          })
  27.      });
  28.      </script>
  29.    </body>
  30.  </html>

坦克上下左右移动

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  <html>
  3.    <head>
  4.      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  6.    </head>
  7.    <body>
  8.      <img src="../images/zgl.jpg"/>
  9.      <script type="text/javascript">
  10.          //初始化
  11.          $(function(){
  12.              //定位图片
  13.              var $img = $("img");
  14.              //将图片定位于指定的位置
  15.              $img.offset({top:200,left:400});
  16.              $img.width(100);
  17.              $img.height(200);
  18.              //为图片添加事件
  19.              $(document).keydown(function(){
  20.                  //获取按钮的code码
  21.                  var code = event.keyCode;
  22.                  //判断
  23.                  if(code == 38){//上
  24.                      $img.offset({top:y-=15});
  25.                  }else if(code == 40){//下
  26.                      $img.offset({top:y+=15});
  27.                  }else if(code == 37 ){//左
  28.                      $img.offset({left:x-=15});
  29.                  }else if(code == 39){//右
  30.                      $img.offset({left:x+=15});
  31.                  }
  32.              });
  33.          });
  34.          //全局变量
  35.          var y = 200;
  36.          var x = 400;
  37.      </script>
  38.    </body>
  39.  </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. ubuntu上minigui调试环境的建立

    minigui一共有两个版本:商业版()和GPL版(),问了一下飞漫软件,使用商业版前期的费用是9万,有技术支持,包括5000个licenses的费用,后期10K的量的话,每个licenses要6块, ...

  2. C结构体

    什么是结构体? 简单的来说,结构体就是个能够包含不同数据类型的一个结构,他是一种能够自己定义的数据类型,他的特点和数组主要有两点不同,首先结构体能够在一个结构中声明不同的数据类型,第二相同结构的结构体 ...

  3. uva 10618 Tango Tango Insurrection 解题报告

    Tango Tango Insurrection Time Limit: 3000MS     64bit IO Format: %lld & %llu Submit Status uDebu ...

  4. 定义和使用EL函数

    EL为表达式语言,在EL中,允许定义和使用函数.下面将介绍如何定义和使用EL的函数. 1. 定义和使用函数 函数的定义和使用分为以下3个步骤: (1)编写一个Java类,并在该类中编写公用的静态方法, ...

  5. Furure的简单介绍和使用

    引子:

  6. 第一章 mac下开发环境的配置

    mac系统与Linux系统差不多,但是与windows系统版本非常不同. 1.jdk 安装与卸载:https://docs.oracle.com/javase/8/docs/technotes/gui ...

  7. 简单MapReduce思维导图

  8. 把表单转成json,并且name为key,value为值

    http://jsfiddle.net/sxGtM/3/http://stackoverflow.com/questions/1184624/convert-form-data-to-js-objec ...

  9. 基于json的jquery地区联动探索

    贴一个基于jquery联动的代码,相信这样的代码有一大把,就当是jquery的练手吧, 写这个东西的初衷是来之于新浪微博,在新浪微博帐号设置里面有个地区的选项,使用js写的,想把它的代码给截获下来,可 ...

  10. Spark Streaming updateStateByKey案例实战和内幕源码解密

    本节课程主要分二个部分: 一.Spark Streaming updateStateByKey案例实战二.Spark Streaming updateStateByKey源码解密 第一部分: upda ...