用户名变灰

  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. MySQL面试题集锦

    1. 如何设计一个高并发的系统 ① 数据库的优化,包括合理的事务隔离级别.SQL语句优化.索引的优化 ② 使用缓存,尽量减少数据库 IO ③ 分布式数据库.分布式缓存 ④ 服务器的负载均衡 2. 锁的 ...

  2. MAC之find与grep

    小白,新手.有错请指出. grep一般是搜指定文件中的内容:而find是搜对应的文件 find:1. 找出当前文件目录及其子目录含有开头a的文件.  “.”是当前目录   “-ls”显示详细信息fin ...

  3. 快速入门:十分钟学会PythonTutorial - Learn Python in 10 minutes

    This tutorial is available as a short ebook. The e-book features extra content from follow-up posts ...

  4. 用Java操纵HBase数据库(新建表,插入,删除,查找)

    java代码如下: package db.insert; /* * 创建一个students表,并进行相关操作 */ import java.io.IOException; import java.i ...

  5. Linux中Shell的执行流程

    Shell执行流程 1.Printthe info of reminding 打印提示信息 2.Waitinguser for input(wait) 等待用户输入 3.Acceptthe comma ...

  6. Python源码学习七 .py文件的解释

    Python源码太复杂了... 今天看了下对.py文件的parse, 云里雾里的 py文件是最简单的, 在python的交互式窗口 import这个模块 a = 10 print(a) 开始分析,堆栈 ...

  7. ubuntu14.04上编译安装python3.7.3

    首先先去python官网www.python.org下载python3.7.3的官方压缩包Python-3.7.3.tgz 一.先安装需要的包zlib1g,libffi apt-get update ...

  8. IOS开发之新浪微博OAuth2

    说明:微博开放接口的调用,如发微博.关注等,都是需要获取用户身份认证的.目前微博开放平台用户身份鉴权主要采用的是OAuth2.0.为了方便开发者开发.测试自己的应用. OAuth2.0较1.0相比,整 ...

  9. Intent跳转到系统应用中的拨号界面、联系人界面、短信界面及其他

    现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...

  10. Python面向对象编程 - 一个记事本程序范例(一)

    notebook.py import datetime last_id = 0 class Note: '''Represent a note in the notebook. Match again ...