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 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
JavaScript实现两个数组的交集
Mar 25 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数组应该有多大的分析
2009/07/30 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
python3编码问题汇总
2016/09/06 Python
Python使用sorted排序的方法小结
2017/07/28 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
基于python历史天气采集的分析
2019/02/14 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
实习生矿工检讨书
2014/10/13 职场文书
财务个人年度总结范文
2015/02/26 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
python在package下继续嵌套一个package
2022/04/14 Python