jQuery事件与动画基础详解

今天我们就谈谈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();
 });
});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • jQuery中事件与动画的总结分享

    jQuery中事件与动画的总结分享

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("

  • jQuery中animate动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • 分享一些常用的jQuery动画事件和动画函数

    部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • jQuery事件与动画基础详解

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                        执行时机 click(fn)                单击鼠标 $(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); }); mouseov

  • jQuery事件委托代码实践详解

    javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <table> <tr><td id="targetTd"></td><td></td><td></td&

  • [jQuery] 事件和动画详解

    1. 事件 1.1 加载DOM 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而$(document).ready()方法注册的事件处理程

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • Ajax基础详解教程(二)

    Ajax基础详解教程(二)

    在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Mic

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • Jquery中$.ajax()方法参数详解

    俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:

  • jQuery AJAX timeout 超时问题详解

    先给大家分析下超时原因: 1.网络不通畅. 2.后台运行比较慢(服务器第一次运行时,容易出现) 超时结果:JQ中 timeout设置请求超时时间. 如果服务器响应时间超过了 设置的时间,则进入 ERROR (错误处理) 超时解决方案: 1.默认的timeout为0,代表永不超时 2.尽量把timeout设置的大一点.坏处:使数据的加载变慢(貌似.呵呵). 3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如,可以在超时的情况下再次调用取数据函数. -------------------

  • jQuery:unbind方法的使用详解

    jQuery:unbind方法的使用详解 一.前言 unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序.比如:$('a').click(function(){})可以通过unbind解绑.用原生addEventListener以及IE下的attachEvent注册的事件以及使用onclick/onmouseover属性绑定的事件不能通过unbind进行解绑. 例如: 以下的事件可以通过unbind解绑: $('a').click(function(){}

  • jQuery.form.js的使用详解

    面临问题:form表单submit之后,后端会返回提示信息.但原生html无法获取后端返回的数据,就造成了这样一种局面:提交之后,页面发生跳转,在一个空白页面上显示了后端返回的json数据,用户体验0分. 解决办法:使用jquery.form.js 步骤 自定义控制提交函数 var submitChange=function () { $("form").ajaxSubmit(function (message) { alert(message.text); window.locati

随机推荐