今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!!

1.事件

1.window事件

ready   准备就绪

2.鼠标事件

方法                        执行时机

click(fn)                单击鼠标

$(document).ready(function(){
$("dd>img").click(function(){
$("dt>img").show();
});

mouseover(fn)     鼠标指针移过时

mouseout(fn)       鼠标指针移出时

 $("#nav .navsBox ul li").mouseover(function(){
$(this).addClass("onbg"); //为该元素添加类样式.onbg
}).mouseout(function(){
$(this).removeClass("onbg");//为该元素移除类样式.onbg
});

hover()

     

 $(".top").hover(function(){
$(this).addClass('bgreen');
},function(){
$(this).removeClass('bgreen');
});

3.键盘事件

keydown()        按下键盘时

keyup()             释放按键时

keypress()        产生可打印的字符时


$(function(){
   $("[type=password]").keyup(function(){
    $("#e").append("keyup");
   }).keydown(function(){
     $("#e").append("keydown");
   }).keypress(function(){
      $("#e").append("keypress");
   });
  
   $(document).keydown(function(event){
     if(event.keyCode=="13"){
        alert("确认要提交么???");
     }
   });
});
 

4.表单事件

focus()             获得焦点

blur()                失去焦点

 $(function(){

       $("input").focus(function(){

          $(this).next().css("color","red");
//alert("1123");
}); $("input").blur(function(){
$(this).next().css("color","");
});
});

绑定事件与移除事件

bind(type,[data],fn)   (绑定)

type     主要包括blur,focus,click,mouseout等基础事件,此外,还可以是自定义事件

[data]   作为event.data属性值传递给事件对象的额外数据对象,该参数不是必需的

fn         用来绑定处理函数

unbind([type],[fn])    (移除)

type    主要包括blur,focus,click,mouseout等基础事件,此外,还可以自定义事件

fn        用来解除绑定的处理函数

$(function(){
$("li").bind({
mouseover:function(){
$(this).css("background-color","green");
},mouseout:function(){
$(this).css("background-color","");
}
});
$("li").unbind(); });

2.动画

1.控制元素显示与隐藏  $(selector).show([speed],[callback])

$(selector).hide([speed],[callback])

speed:可选。规定元素从隐藏(显示)到可见(不可见)的速度

callback :可选。show函数执行完了之后,要执行的函数

$(function(){
$("p:visible").hide(100);
}); //$("p:hidden").show(100);

2.改变元素的透明度

  $(function(){
    $("input").click(function(){
      $("img").fadeOut(100);    //浅出
      //$("img").fadeIn(100);   淡入
    });
  })

3.改变元素的高度

$(function(){
$("h2").click(function(){
// $(".txt").slideup();
$(".txt").slideDown();
});
});

4.自定义动画

$(function(){
$("img").animate({width:"90%"},5000)
.animate({height:"90%"},{queue:false,duration:5000})
.animate({borderwidth:5},{queue:false,duration:5000});
});

queue:队列

初学jQuery之jQuery事件与动画的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  5. jQuery中的事件和动画效果

    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  9. 锋利的jQuery中的事件与动画

    奋夜的奋斗  ----  事件与动画 ----  来自地狱的战镰 小小的单词难不倒我们哦!!!!!!!    bind:绑定     unbind:接触绑定    toggle:栓牢   fadeou ...

  10. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

随机推荐

  1. RabbitMQ消息队列(九):Publisher的消息确认机制

    在前面的文章中提到了queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consum ...

  2. 刷新UITableView

    [from]http://www.superqq.com/blog/2015/08/18/ios-development-refresh-uitableview/ UITableView对于iOS开发 ...

  3. 1、安卓数据存储机制——sharedPreference

    项目中用到的数据存储方式: 1.这个项目里的“个人标签“.”个性签名“页面的文字存储——sharedPreference:我们项目中用到的Preference来保存用户编辑的标签.签名内容,并支持用户 ...

  4. 51nod1126(矩阵快速幂)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...

  5. 主成分分析PCA(转载)

    主成分分析PCA 降维的必要性 1.多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯. 2.高维空间本身具有稀疏性.一维正态分布有68%的值落于正负标准差之 ...

  6. 【bzoj3998】 TJOI2015—弦论

    http://www.lydsy.com/JudgeOnline/problem.php?id=3998 (题目链接) 题意 给出一个字符串,求它的字典序第K小的子串是什么,分情况讨论不在同一位置的相 ...

  7. mark笔记

    1.[cocos2dx]ccnode跟ccui节点混用时注意touch层级问题,基本不可控

  8. 【BZOJ 3926】【ZJOI 2015】诸神眷顾的幻想乡

    http://www.lydsy.com/JudgeOnline/problem.php?id=3926 广义后缀自动机的例题,感觉广义后缀自动机好恶心... 广义后缀自动机是对一个trie建立的后缀 ...

  9. 让php Session 存入 redis 配置方法

    首先要做的就是安装redis 安装方法:http://redis.io/download Installation Download, extract and compile Redis with: ...

  10. 开发团队在TFS中使用Git Repository (二)

    使用Git作分支时,仅仅是对提交历史记录的一个引用,创建分支成本非常低,分支的切换快且简单.在分支管理方面,相对其他的版本管理工具,Git可谓是一骑绝尘. 开发过程中,我们可以针对任何的大小功能进行分 ...