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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript object array方法使用详解
Dec 03 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Javascript的this用法
Jan 16 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php购物车实现方法
2015/01/03 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
js实现中文实时时钟
2020/01/15 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
传播学毕业生求职信
2013/10/11 职场文书
初中生学习生活的自我评价
2013/11/20 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
电台广播稿范文
2015/08/19 职场文书
小学思品教学反思
2016/02/20 职场文书