JQuery 事件及案例

时间：2022-08-27 16:02:45

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. AES 加密工具类

    /** * AES 是一种可逆加密算法,对用户的敏感信息加密处理 对原始数据进行AES加密后,在进行Base64编码转化: */public class AESOperator { /* * 加密用的 ...

  2. Json-遍历

    1.js遍历 var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13} ...

  3. Python 爬虫学习 网页图片下载

    使用正则表达式匹配 # coding:utf-8 import re import urllib def get_content(url): """ Evilxr, &q ...

  4. 工作踩坑记录：JavaScript跳转被缓存

    起因:业务想要一个固定二维码来每周扫码跳转到不同的页面上去,我用JS写了个跳转,却发现被缓存了,虽然被具体被缓存多久不清楚,但是被缓存了很不爽,不符合业务实时更改这个二维码跳转页面的需求. 经过:既然 ...

  5. ArcGis for WPF&lpar;1&rpar;

    这篇文章主要是讲窗体中怎么加载一张在线地图. 第一步:首先引用ESRI.ArcGIS.Client.dll类库. 第二步:在XAML中添加如下代码: <Window x:Class=" ...

  6. Oracle误删恢复

    query deleted datarows: select * from 表名 as of timestamp to_timestamp('删除时间点','yyyy-mm-dd hh24:mi:ss ...

  7. awk之NR&equals;&equals;FNR问题

    NR,表示awk开始执行程序后所读取的数据行数. FNR,与NR功用类似,不同的是awk每打开一个新文件,FNR便从0重新累计. 下面看两个例子: 1,对于单个文件NR 和FNR 的 输出结果一样的 ...

  8. 用node&period;js做cluster，监听异常的邮件提醒服务

    __ __ __ _ __ ____ ____ ____/ /__ _____/ /_ _______/ /____ _____ ___ ____ ___ ____ _(_) / / __ \/ __ ...

  9. 【C&num;】Using的一个比较好的语言文字解释

    其实很早就开始使用using了.但是对这个语法糖我自己一直没有总结也没有一个很好的文字描述解释.今天看其他的博文的时候发现有人对其做了简单的解释我觉得很好,很适合一种讲解.于是抄录下来 using ( ...

  10. linux 文件处理大杂烩

    1.对文件某行进行统计排序 awk  '{ printf "%-40s \n",$4}' /var/log/yum.log | sort | uniq -c | sort -nk ...

相关文章