JQuery事件与JavaScript事件相似，只是把其中的on去掉

1.click，dblclick事件

案例1：点击缩略图换背景

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="scripts/jquery-1.7.1.min.js"></script>

    <script language="javascript">

        $(document).ready(function () {

            $(".tt").click(function () {

                var aa = $(this).css("background-image");

                $("body").css("background-image",aa);

            });

        })

    </script>

    <style type="text/css">

        .tt {

        width:80px;

        height:80px;

        float:left;

        margin:10px;

        background-size:80px 80px;

        border:1px solid gray;

        }

        #t1 {

        background-image:url("images/01.jpg")

        }

         #t2 {

        background-image:url("images/02.jpg")

        }

          #t3{

        background-image:url("images/03.jpg")

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div class="tt" id="t1"></div>

        <div class="tt" id="t2"></div>

        <div class="tt" id="t3"></div>

    </div>

    </form>

</body>

</html>

案例2:单击轮换背景（简便方法：使用toggle(function(){},function(){}....function(){})来切换样式）

将上述<script></script>中的代码更换成下列代码（鼠标点击一次执行一次toogle）

$(document).ready(function () {

            $(this).toggle(function () {

                $(document).find("body").css("background-image", "url(images/01.jpg)");

            }, function () {

                $(document).find("body").css("background-image", "url(images/02.jpg)");

            }, function () {

                $(document).find("body").css("background-image", "url(images/03.jpg)");

            });

        });

2.mousedown，mouseup事件

案例：图片被单击后产生一种按下去又弹起来的效果

$(document).ready(function () {

            $(".tt").mousedown(function () {

                $(this).css("margin", "11px 11px 11px 11px").css("height","78px").css("width","78px").css("border", "1px solid black");

            }).mouseup(function () {

                $(this).css("margin", "10px 10px 10px 10px").css("height", "80px").css("width", "80px").css("border", "1px solid gray");

            });

        });

3.mouseover，mouseout事件——可以合成为hover(function(){},function(){})

案例：奇偶行不同色的光棒效果

法一：最原始的方法：直接操作样式表的background-color样式

 <script language="javascript">

        $(document).ready(function () {

            $("#GridView1 tr:gt(0):odd").css("background-color", "pink");

            var bg = "white";

            $("#GridView1 tr:gt(0)").mouseover(function () {

                bg = $(this).css("background-color");

                $(this).css("background-color","yellow");

            }).mouseout(function () {

                $(this).css("background-color", bg);

            });

        });

    </script>

法二：通过增与删样式表选择器来实现。toggleClass

<script language="javascript">

        $(document).ready(function () {

            $("#GridView1 tr:gt(0):odd").addClass("odd");

            $("#GridView1 tr:gt(0)").mouseover(function () {

                $(this).toggleClass("mover");  //没有该样式就添加

            }).mouseout(function () {

                $(this).toggleClass("mover");  //有该样式就删除

            });

        });

    </script>

4.focus，blur事件

案例：文本框（必填）效果

<script language="javascript">

        $(document).ready(function () {

            $("#TextBox1").focus(function () {

                $(this).css("color", "black");

                if ($(this).val() == "(必填)") {

                    $(this).val("");

                }

            }).blur(function () {

                if ($(this).val().length == ) {

                    $(this).css("color","#aaaaaa").val("(必填)");

                }

            });

        });

    </script>

JQuery 事件及案例的更多相关文章

  1. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  2. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

  3. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  4. 第77天：jQuery事件绑定触发

    一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...

  5. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  6. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  7. JQuery选择器JQuery 事件

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

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

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

  9. jquery事件核心源码分析

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

随机推荐

  1. OCP-1Z0-053-V13.02-712新题

       Why does the number of blocks for the table remain the sale after the shrink operation? A.Because ...

  2. HTML5 总结-Web存储-7

    HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...

  3. 升级到iis7 的web.config配置

    经典模式或集成模式都识别system.webServers节点 aspnet的isapi分32位和64位 不存在时会报404或403

  4. jsp小商城

    一个小商城,当然,没淘宝那么厉害,只是那时学完j2ee后,发现java原来也可以做网站,学了数据库,servlet,jsp,当时是很惊喜的,可以直接做个这样的东西.而放到今天,学了更多之后,发现可以用 ...

  5. leetcode先刷_Search in Rotated Sorted Array II

    上一页下一页,找到相同的旋转阵列的问题.假设数组元素一再怎么办呢?会发生什么? 我给大家举一个极端的例子.如果是这样的阵列中的元件.1,1,2,1,1,1,1,我们想看看这个数组2,刚开始A[midd ...

  6. linux命令sysctl使用

    以前没有注意过这个命令,直到有次在单位安装greenplum的时候,在没有配置系统参数的情况下,出现了设备空间不足的报错信息. 当然,安装的不是我的本机,而是公用的服务器,编辑修改系统参数后,仍然出现 ...

  7. java.lang.ClassNotFoundException: org.apache.commons.dbcp.BasicDataSource解决方法

    java.lang.ClassNotFoundException: org.apache.commons.dbcp.BasicDataSource解决方法 只需把这三个commons-pool.jar ...

  8. Handler没法取出消息队列中的数据的一个原因

    主线程发送消息到工作线程,工作线程的步骤是固定为3步的. Looper.prepare();//步骤1,线程里使用handler必须这样写, handler = new Handler(){//步骤2 ...

  9. Android存储之SQLiteDatbase

    SQLiteDatabase的方式会生成一个数据库文件,每个应用最多只对应一个数据库文件,即.db文件. 可以使用很多第三方工具进行打开,查看数据库里的内容. 昨晚试了好几种工具,如navicat,s ...

  10. ［转］如何在本地安装 Homebrew

    作者:shede333 主页:http://my.oschina.net/shede333  官网:http://brew.sh/index_zh-cn.html 安装方式见 官网,在shell里执行 ...