jQuery事件与动画基础详解


Posted in Javascript onFebruary 23, 2017

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
取键盘键位ASCII码的网页
Jul 30 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
js实现网页定位导航功能
Mar 07 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
js图片无缝滚动插件使用详解
May 26 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
You might like
PHP数据类型的总结分析
2013/06/13 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python语言描述KNN算法与Kd树
2017/12/13 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python实现微信机器人的方法
2019/09/06 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
高级编程求职信模板
2014/02/16 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
校园文明倡议书
2014/05/16 职场文书
毕业生求职信
2014/06/10 职场文书
信用卡工作证明模板
2014/09/14 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android