第一大部分 提纲

事件与动画
一、事件
1.在JavaScript语法中的事件，把onxxxxx中的on去掉，就是JQuery中的事件。
onclick - click
ondblclick - dblclick
 
onmouseover - mouseover
onmouseout - mouseout
 
onfocus - focus
onblur - blur
 
onchange - change
 
onkeydown - keydown
onkeyup - keyup
onkeypress - keypress
 
2.特有事件：
hover(function(){},function(){})：相当于把mouseover和mouseout结合起来了
toggle(function(){},function(){},...function(){})：每点击一下执行下一个function,如执行到末尾，会再返回第一个执行
 
 
3.JQuery中的事件，需要事件的小括号中写function(){}
$("#Button1").click(function(){
//事件处理代码
});
 
案例：
1.光棒效果：mouseover,mouseout
2.展开面板：click
 
二、动画
hide(),show()
fadeIn(),fadeOut()
slideUp(),slideDown()
 
slideUp([毫秒数],[回调函数])
slideUp(3000,function(){xxx();})
 
animate({left:"500px"},3000,function(){/*回调函数*/})
stop(bool,bool);
第一个参数：是否清空之前的动画序列。
第二个参数：直接走到最后的状态。

第二大部分 例题

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

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #ss{
            border:1px solid blue;
           
            width:300px;
            height:300px;
            position:absolute;
        }
        ul{
            list-style-type:none;
            width:400px;
            border:1px  ;
        }
        .titlebar{
            padding:5px;
           
            color:white;
            margin-top:1px;
        }
        .spanbar{
            padding:5px;
           
            display:none;
        }
        #aa{
            padding:5px;
            border:1px solid blue;
        }
    </style>
    <script src="新文件夹1/jquery-1.8.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            //$(".titlebar").click(function () {   //click  鼠标点击事件
                //var s = $(this).next().css("display");
                //if(s == "none")//如果display ==none
                //{
                //    $(this).next().css("display","block");//如果把点击标题 那么把下面展开
                //}
                //else {
                //    $(this).next().css("display","none");//如果把点击标题 那么把下面隐藏
                      //}
              //});
            //$(".titlebar").hover(function(){        //hover鼠标移动到上面的事件   
            //    //$(this).next().css("display", "block");  //移动上去显示隐藏部分 
            //},function(){
            //    $(this).next().css("display", "none");//鼠标离开  隐藏
            //})
            //$(".titlebar").hover(function () { //hover 鼠标移动事件
            //    $(this).toggleClass("mover");  //toggleClass 如果没有 就添加上  如果有 就移除
            //}, function () {
            //    $(this).toggleClass("mover");
            //})
            //$("#aa").toggle(function () {  //toggle 里面可以放无数个 每次点击执行下一个 执行到最后一个就在执行第一个
            //    $(this).css("background-color","#ffff00");//
            //}, function () {
            //    $(this).css("background-color","#ff00ff");
            //}, function () {
            //    $(this).css("background-color","#00ffff");
            //}, function () {
            //    $(this).css("background-color","#ffffcc");
            //});
            //动画效果
            $(".titlebar").click(function () {
                var s = $(this).next().css("display");
                if (s == "none")
                {
                    //$(this).next().show();//点击显示
                    //$(this).next().fadeIn();//渐变显示 fadein(3000)括号里面放秒数 3秒    
                    $(this).next().slideDown();//slideDown()拉下来括号里面放秒数
                }
                else
                {
                    //$(this).next().hide();点击隐藏
                    //$(this).next().fadeOut();//fadeOut渐变隐藏
                    $(this).next().slideUp();//slideUp()拉上去 括号里面也是放时间
                }
            })
            
                $("#ss").click(function () {
                    //hideDiv();//点击回调函数  自动来回 拉上来拉下去
                    // $("#ss").animate({width:"500px",height:"500px"},3000)  //自定义动画用animate({},秒数) 自定义的在{}里面写
                    //$("#ss").animate({ width: "500px" }, 3000).animate({height:"500px"},3000)//先宽度拉伸500px 再高度增长500px
                    $("#ss").animate({ left: "500px" }, 3000).animate({ top: "200px" }, 3000).animate({ width: "500px" }, 3000).animate({ height: "500px" }, 3000);//跑到中间位置
                })
           
        });
        //定义显示毁回调函数
        function showDiv() {
            $("#ss").slideDown(3000, function () { hideDiv(); });
        }
        function hideDiv() {
            $("#ss").slideUp(3000, function () { showDiv(); });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
            <ItemTemplate>
                <li>
                    <div class="titlebar">
                        <%#Eval("Name") %>-<%#Eval("Price") %>
                    </div>
                    <div class="spanbar">
                        
                        代号：<%#Eval("Code") %>
                            <br/>
                        名称：<%#Eval("Name") %>
                            <br/>
                        系列: <%#Eval("Brand") %>
                            <br/>
                        油耗：<%#Eval("Oil") %>
                            <br/>
                        排量：<%#Eval("Exhaust") %>
                           <br/>
                        功率：<%#Eval("Powers") %>
                           <br/>
                        上市时间：<%#Eval("Time") %>
                           <br/>
                        价格：<%#Eval("PRice") %>
                           <br/>
                        
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
        <div>
            <span id="aa">
                点击变化颜色
            </span>
        </div>
        <div id="ss">
 
        </div>
    
    </div>
    </form>
</body>
</html>

JQuery 事件与动画的更多相关文章

  1. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  2. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  3. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  6. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  7. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  8. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  9. jQuery事件和动画

    1.toggle事件 <!DOCTYPE html>   <html>   <head lang="en">   <meta charse ...

随机推荐

  1. 《音乐商店》第4集：自动生成StoreManager控制器

    一.自动生成StoreManager控制器 二.查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 1.访问数据 ...

  2. [置顶] 小白学习KM算法详细总结--附上模板题hdu2255

    KM算法是基于匈牙利算法求最大或最小权值的完备匹配 关于KM不知道看了多久,每次都不能完全理解,今天花了很久的时间做个总结,归纳以及结合别人的总结给出自己的理解,希望自己以后来看能一目了然,也希望对刚 ...

  3. Net MVC轻量级分页控件

    JPager.Net MVC超好用轻量级分页控件   JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现 ...

  4. spring mvc 与 jquery ajax

    在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...

  5. 【milonga】什么意思_英语milonga在线翻译_有道词典

    [milonga]什么意思_英语milonga在线翻译_有道词典 milonga 网络释义英英释义   米隆加 本届探戈艺术节表演最受观众欢迎的是热情欢快的米隆加(Milonga)舞曲探戈,为了吸引年 ...

  6. HDU 3966 Aragorn&#39;s Story（树链剖分）

    HDU Aragorn's Story 题目链接 树抛入门裸题,这题是区间改动单点查询,于是套树状数组就OK了 代码: #include <cstdio> #include <cst ...

  7. WinFrom - DataGridView控件右键选中记录并弹出菜单

    dataGridView右键菜单并选中该行 程序代码: private void dataGridView1_CellMouseDown(object sender, DataGridViewCell ...

  8. linux命令:scp

    有时候ftp被禁用了, 就用scp替代; 命令行: scp from to_user@to_ip:dir_to/file_name 执行该命令之后,按照提示输入to_host的登陆密码即可. scp ...

  9. Windows Azure入门教学系列 (三)：创建第一个Worker Role程序

    在开始本教学之前,请确保你从Windows Azure 平台下载下载并安装了最新的Windows Azure开发工具.本教学使用Visual Studio 2010作为开发工具. 步骤一:创建解决方案 ...

  10. ajax表单提交全路径

    //ajax提交form表单的方式 $(document).ready(function() { $('#shopping-submit').click(function() { alert(&quo ...