初学jQuery之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();
});
});
4.自定义动画
$(function(){
$("img").animate({width:"90%"},5000)
.animate({height:"90%"},{queue:false,duration:5000})
.animate({borderwidth:5},{queue:false,duration:5000});
});
queue:队列
初学jQuery之jQuery事件与动画的更多相关文章
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- jQuery中的事件和动画效果
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
随机推荐
- RabbitMQ消息队列(九):Publisher的消息确认机制
在前面的文章中提到了queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consum ...
- 刷新UITableView
[from]http://www.superqq.com/blog/2015/08/18/ios-development-refresh-uitableview/ UITableView对于iOS开发 ...
- 1、安卓数据存储机制——sharedPreference
项目中用到的数据存储方式: 1.这个项目里的“个人标签“.”个性签名“页面的文字存储——sharedPreference:我们项目中用到的Preference来保存用户编辑的标签.签名内容,并支持用户 ...
- 51nod1126(矩阵快速幂)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...
- 主成分分析PCA(转载)
主成分分析PCA 降维的必要性 1.多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯. 2.高维空间本身具有稀疏性.一维正态分布有68%的值落于正负标准差之 ...
- 【bzoj3998】 TJOI2015—弦论
http://www.lydsy.com/JudgeOnline/problem.php?id=3998 (题目链接) 题意 给出一个字符串,求它的字典序第K小的子串是什么,分情况讨论不在同一位置的相 ...
- mark笔记
1.[cocos2dx]ccnode跟ccui节点混用时注意touch层级问题,基本不可控
- 【BZOJ 3926】【ZJOI 2015】诸神眷顾的幻想乡
http://www.lydsy.com/JudgeOnline/problem.php?id=3926 广义后缀自动机的例题,感觉广义后缀自动机好恶心... 广义后缀自动机是对一个trie建立的后缀 ...
- 让php Session 存入 redis 配置方法
首先要做的就是安装redis 安装方法:http://redis.io/download Installation Download, extract and compile Redis with: ...
- 开发团队在TFS中使用Git Repository (二)
使用Git作分支时,仅仅是对提交历史记录的一个引用,创建分支成本非常低,分支的切换快且简单.在分支管理方面,相对其他的版本管理工具,Git可谓是一骑绝尘. 开发过程中,我们可以针对任何的大小功能进行分 ...