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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
js实现简单的打印表格
Jan 15 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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python unittest模块用法实例分析
2018/05/25 Python
Python中logging实例讲解
2019/01/17 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
详解Django CAS 解决方案
2019/10/30 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
wxPython实现绘图小例子
2019/11/19 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
客服部工作职责范本
2014/02/14 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
售后服务承诺函格式
2015/01/21 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python