3.事件和动画


A. 事件

  Aa. DOM加载

  1.为什么使用jQuery加载DOM方法?

  以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全部加载完成,才会为DOM元素添加事件行为;而jquery只要DOM元素加载完成,就立刻绑定事件

  2.表现形式:

  $(function() {

  //你的实现逻辑

  });


  Ab. 事件绑定

  事件绑定方法bind(eventType [, data],  function() {...})

  表现形式:

  $(function() {

$(“#id”).bind(“click”, function() {

    $(this).next().show();

  });

  });


  Ac. 事件合成

  Jquery有两个合成事件:hover()和toggle()

  1.hover(enter, leave)模拟光标悬停

  表现形式:

  $(function() {

  $(“.class”).hover(function() {

   //光标悬停,在引用class层叠样式,做出响应

  $(this).next().show();

  }, function() {

  //光标离开引用class层叠样式,做出响应

   $(this).next().hide();

  });

  });

  上面的案例解释:当光标悬停在引用了class层叠样式时,显示其后面的一个同辈元素;反之隐藏他

  2.toggle(fn1, fn2, ...)模拟鼠标点击事件

  表现形式:

  $(function() {

  $(“button”).toggle(function() {

  alert(“鼠标第一次点击!”);

  }, function() {

   alert(“鼠标第二次点击!”);

  }, function() {

   alert(“鼠标第三次点击!”);

  });

  });

  当鼠标点击完成3次之后,再次点击,则该事件会进入下一轮事件;即:第四次点击会调用第一个函数...


   Ad. 事件对象的属性

  1.获取事件类型event.type

  $(“input”).click(function(event) {

alert(event.type);//因为这是一个click事件,所以代码会输出click

  });

  2.event.preventDefault()//阻止默认事件

  $(function() {

   $(“#sumbit”).click(function(event) {

   event.preventDefault();//阻止表单元素提交

   });

  });

  ...


  Ae. 事件移除

  Unbind(eventType [,data])

  $(function() {

   $(“#button”).bind(“click”, fn1 = function() {

  alert(“把fn1点击事件绑定到id为button的DOM元素上”);

   }).bind(“click”, fn2 = function() {

   alert(“把fn2点击事件绑定到id值为button的DOM元素上”);

  });

  $(“#button”).unbind(“click”, fn1);//把id值为buttonde的fn1点击事件移除

  });


  Af. 操作模拟(trigger())

  1.常用模拟

  如:

  情景描述:现在要求页面加载完毕后,立刻触发点击事件

   $(function() {

     $(“#button”).trigger(“click”);//当页面DOM加载立即触发id值为button的 元素上面的点击事件

  });

  2.出发自定义事件

  $(function() {

   //1.自定义事件

  $(“#button”).bind(“iClick”, function() {

  });

  //2.触发自定义事件

  $(“#button”).trigger(“iClick”);

  });

  3.传递参数(tigger(type[, data[))

  Ag. 其他用法

  绑定多个事件类型

  $(function() {

    $(“div”).bind(“mouseover mouseout”, function() {

    $(this).toggleClass(“over”);

    alert(“鼠标移入或离开该div标签,其样式会切换变化”);

  });

  });

  ...


  B. 动画

  通过jquery的动画方法,提供的多样的视觉效果,给用户提供丰富的视觉体验;

  为了实现良好的动画效果,要求html在标准模式下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  Ba. Show()和hide()

  1.show()//显示动画

  $(“tag”).show();

  $(“tag”).show(speed);//指定显示的速度:slow、normal、fast或则指明一个速度

  2.hide()//隐藏动画

  参考show()使用形式


  Bb. FadeIn()和fadeOut()、slideUp()和slideDown()

  1. FadeIn()和fadeOut()改变元素的不透明度

  $(function() {

  $(“tag”).fadeIn();//tag元素的透明度会越来越高(淡入)

  $(“tag”).fadeOut();//tag元素的透明度会越来越低(淡出)

  });

  2.slideUp()和slideDown()改变元素的高度

  $(function() {

   $(“tag”).fadeIn();//tag元素的高度会越来越高

  $(“tag”).fadeOut();//tag元素的高度会越来越低

  });


  Bc. 自定义动画方法animate()

  animate(params, speed, callbackFunction)

  1.自定义简单动画

  $(function() {

   $(“#id”).click(function() {

   $(this).animate({left : “500px”}, 1000);//每点击一次,该元素向右移动500个像素单位

  });

  });

  $(function() {

    $(“#id”).click(function() {

    $(this).animate({left : “+=500px”}, 1000);//每点击一次,该元素在当前位置累加500个像素单位

  });

  2.多重动画

  2.1、同时执行多个动画

  $(function() {

   $(“#id”).click(function() {

   $(this).animate({left : “500px”, height : “200px”}, 1000);

  });

  2.2、按顺序执行多个动画

  $(function() {

   $(“#id”).click(function() {

    $(this).animate({left : “500px”, height : “200px”}, 1000)

  .animate({height : “200px”}, 1000);

   });


  Be. 动画状态操作

  1.停止元素的动画

  stop([clearQueue][, gotoEnd])

  $(“#id”).stop();

  $(“#id”).stop(true);//清空所有动画队列

  $(“#id”).stop(true, true);//停止当前的动画并到达其末状态,并清空队列

  2.判断元素是否处于动画状态

  $(“#id”).is(“:animate”)

  3.延迟动画

  delay([speed])


  Bf 其他动画方法

  1.toggle()

  2.slideToggle()

  3.fadeTo()

  以渐进的方式调整元素不透明度到一个指定值

  $(“#id”).fadeTo(600, 0.2);

  4.fadeToggle()


  Bh. 概括

(未完...)

jQuery简单入门(三)的更多相关文章

  1. jQuery简单入门

    jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...

  2. jQuery简单入门(二)

    2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...

  3. jquery快速入门三

    事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...

  4. jquery简单入门1

    前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...

  5. jQuery简单入门(五)

    5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...

  6. jQuery简单入门(四)

    4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...

  7. jquery简单入门(一)

    相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...

  8. jquery 简单入门

    例:GridView

  9. Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter

    前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...

随机推荐

  1. Zookeeper安装,Zookeeper单机模式安装

    http://zookeeper.apache.org/releases.html#download 下载解压到(我自己的)解压到 /usr/local 下 把名字改成 zookeeper 进入zoo ...

  2. 2015暑假多校联合---Friends(dfs枚举)

    原题链接 Problem Description There are n people and m pairs of friends. For every pair of friends, they ...

  3. Scalaz(1)- 基础篇:隐式转换解析策略-Implicit resolution

    在正式进入scalaz讨论前我们需要理顺一些基础的scalaz结构组成概念和技巧.scalaz是由即兴多态(ad-hoc polymorphism)类型(typeclass)组成.scalaz typ ...

  4. web项目 验证码 *** 最爱那水货

    1. jsp代码 : <Script> function changeImg(){ document.getElementById("certImg").src =&q ...

  5. Linux下安装mongodb详细过程

    本次安装mongodb使用yum.repo方式.详细过程请参考,也列出一些安装过程中的错误,欢迎指正. mongodb版本:3.0 先在linux下cd 到 /etc/yum.repos.d/ 新建脚 ...

  6. Node.js的UnitTest单元测试

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } 在专业化的软件开发过程中,无论什么平台语言,现在都需要UnitTes ...

  7. Oracle - ORA-12505, TNS:listener does not currently know of SID given in connect descriptor 解决

    java.sql.SQLException: Listener refused the connection with the following error: ORA-12505, TNS:list ...

  8. 让你fork下来的项目与源项目保持同步

    原文在此, 建议阅读, 我把关键步骤抽出来了, 方便概览 (也就是add remote upstream, fetch upstream, rebase, 再push) Step 1: Forking ...

  9. 使用Sublime Text作为Markdown编辑器

    Sublime Text 3作为一个优秀的文本编辑器,拥有很多的扩展插件.我们可以利用这些插件为Sublime Text 增加扩展的功能,在这里我们借助两个插件来将Sublime Text 3变成一个 ...

  10. 浅谈float浮动

    float大概是css3以前网页布局里最常用的一个属性了,经常看到一言不合就浮动的代码,就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧. 本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展 ...