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. Eclipse环境问题集合

    1. XDoclet错误:Missing library: xdoclet-1.2.1.jar 从http://sourceforge.net/projects/xdoclet/files/xdocl ...

  2. Python之美[从菜鸟到高手]--urlparse源码分析

    urlparse是用来解析url格式的,url格式如下:protocol :// hostname[:port] / path / [;parameters][?query]#fragment,其中; ...

  3. CentOS6.5安装MySQL5.7详细教程

    注:文中所写的安装过程均在CentOS6.5 x86下通过测试 主要参考博文: https://segmentfault.com/a/1190000003049498 http://www.th7.c ...

  4. phpcms v9附件上传后显示链接名称如何改为附件名称？

    使用phpcms v9的朋友都知道,v9在后台添加内容的时候上传附件显示的是一个链接,这样太不人性化了,那怎么显示文件名称呢 ?小编以前发布文章的时候都是上传后复制链接在给文字加上超链接的,这样非常的 ...

  5. Python每日一练(2):找出html中的所有链接（Xpath、正则两个版本）

    要在hrml文件中找出特定的内容,首先需要观察该内容是什么东西,在什么位置,这样才能找出来. 假设html的文件名称是:"1.html".href属性全都在a标签里. 正则版: # ...

  6. 一些安全相关的HTTP响应头

    转:http://www.2cto.com/Article/201307/230740.html 现代浏览器提供了一些安全相关的响应头,使用这些响应头一般只需要修改服务器配置即可,不需要修改程序代码, ...

  7. Xamarin.Android开发实践（一）

    原文:Xamarin.Android开发实践(一) 一.准备工作 1.创建一个空的解决方案,并命名为Phoneword 2.右击解决方案 新建->新建项目 并命名为Phoneword_Droid ...

  8. c++继承构造子类调用父类构造函数的问题及关于容器指针的问题及当容器里储存指针时，记得要手动释放

    看下面的一个问题: class Person { private: string name; public: Person(const string& s=""){ nam ...

  9. Part Acquisition(spfa输出路径)

    Part Acquisition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4080   Accepted: 1742 ...

  10. leetcode_question_62 Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...