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. Linux 网络编程: gethostbyname( ), getservbyname( )

    前言 最近在学习网络编程,用到几个应该比较常用的网络编程函数,所以写篇博客来记录一下,毕竟学得快忘得也快.国庆节在宿舍写着博客看着各个景点人山人海倒也快哉~ gethostbyname( ) 这个函数 ...

  2. .NET参数化Oracle查询参数

    最近在做数据库移植工作(SqlServer 2008 -> Oracle 11g),遇到一些不兼容的问题,以下是一个参数化方面的区别,资料来自其他网友,在此整理了一下. public stati ...

  3. Iterator（迭代器）接口 --对象循环遍历

    <?php class MyIterator implements Iterator { private $var = array(); public function __construct ...

  4. KBMMW SampleService/SampleClient方式传输数据集

    马上周末了,趁着下午这会儿回顾一下这几天对旧项目的升级过程,一些重要但不常用的东西记录下来是很有必要的.其中一个项目中对KBMMW的远程数据通讯方式做了改进,利用SampleService/Sampl ...

  5. fedora audacious 不能播放音乐

    采用命令sudo dnf search audacious 可以看到 audacious-plugins-freeworld-mp3.x86_64 : MP3 playback plugin for ...

  6. QT 入门 -QApplication QPushButton QDialog Ui类型的手工使用

    QT 1.工具 assistant  帮助文档 qtconfig  QT配置工具 qmake     QT的make与项目文件智能创建工具 uic          UI界面的设计文件的编译工具 mo ...

  7. 【JavaScript】强制缓存刷新

    1.在js引用时加入时间戳. <script> document.write('<script src="xxx.js?_dc='+new Date().getTime() ...

  8. jQuery prop 全选和全不全

    $('#ckAll').click(function() { var value = $(this).is(':checked') ? true : false; $("input[name ...

  9. Struts2-ActionContext

    官方解释: The ActionContext is the context in which an {@link Action} is executed. Each context is basic ...

  10. 浙江工商大学15年校赛E题 无邪的飞行棋 【经典背包】

    无邪的飞行棋 Time Limit 1s Memory Limit 64KB Judge Program Standard Ratio(Solve/Submit) 15.38%(4/26) Descr ...