一.事件

  click(function(){})      点击事件

  hover(function(){})       悬浮事件,这是jQuery封装的,js没有不能绑定事件

  focus(function(){})        聚焦事件,多用于input

  blur(function(){})        离开聚集事件,与聚焦事件相反

  change(function(){})     内容改变时触发,多用于input,select

  keyup(function(e){})      $(window)对象获取,键盘抬起时触发,形参为e, e.keyCode可以回去键的码值

  keydown(function(e){})    键盘按下时触发

  mouseover(function(e){})   鼠标移上去时触发

  mouseenter(function(e){})     鼠标进入标签时触发

  input(function(e){})      实时监听input输入值变化,只能绑定事件才能触发

二.绑定事件

  $("#id").on("事件",function(){})    

三.阻止后续事件执行

  return false;    可以阻止后续时间执行,打断事件执行

  e.stopPropagation()    e.是函数的形参传入的

四.事件委托

  利用别的标签来捕获事件,可以操作后来添加的标签,还可以优化内存提高性能

  $("受托方").on("事件","委托人",function(){})    $(this)还是"委托人"

五.动画效果

  1.基本效果

    .show(毫秒)      显示

    .hide()          隐藏

    .toggle()         切换

  2.滑动,像窗帘一样,必须有宽高才行

    .slideDown(毫秒)    显示

    .slideUp()        隐藏

    .slideToggle()       切换

  3.渐变

    .fadeIn(毫秒)      显示

    .fadeOut()        隐藏

    .fadeToggle()      切换

  4.自定义

    animate(样式,毫秒)

六.each循环

  1.遍历数组

    $.each(list,function(index,value){})    传入的是数组的索引和值

  2.遍历jQuery对象

    $("#id").each(function(){})        可以对遍历的标签在函数中进行操作

    return false:       终止循环遍历

    return;          跳出本次循环遍历    

七. .data()

  $("#id").data("key","value");     给标签保存一个属性

  $("#id").data("key")        获取属性值

  $("#id").removeData("key")       删除数据

八.插件

  1.新增一个对象

    jQuery.extend(object)

jQuery.extend({
min:function(a,b){return a < b ? a : b;},
max:function(a,b){return a > b ? a : b;}
})
多个对象用逗号隔开
// 调用
jquery.min(1,2);

新增对象和调用

  2.合并到一个jQuery对象中

    jQuery.fn.extend(object)

jQuery.fn.extend({
check:function(){},
uncheck: function(){}
})

合并到jQuery对象中

jQuery.fn.extend({
check:function(){},
uncheck: function(){}
})

合并到jQuery对象中

jQuery的事件,动画效果等的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  3. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  4. jQuery之简单动画效果

    1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...

  5. Jquery基础(动画效果的轮播图特效)

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  6. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  7. JQuery解决事件动画重复问题

    开发项目时,经常要写动画效果,有时候会遇到动画重复问题,例如:当鼠标移动到某个元素上时,执行某个动画,当我鼠标多次移动到该元素时,该动画就要连续执行,那么怎么去解决呢? 话不多说,直接添代码,简单明了 ...

  8. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

  9. 关于jquery自带动画效果的stop()问题

    首先先来看一下jquery中stop()的用法 stop()用于在动画执行前停止正在执行的动画 stop(stopAll,goToEnd)的两个参数为布尔值: stopAll:true/false:是 ...

随机推荐

  1. [UE4]Invalidation Box

    Invalidation Box:使条目无效的容器.使容器内的条目不再更新,如果确定某一个UI不需要更新的话,就可以把这个UI放到Invalidation Box中. 一.Invalidation B ...

  2. c# word操作篇,解决字符串长度超过255就不能替换的问题

    本文使用的是Microsoft.Office.Interop.Word组件,必须在系统安装了office相关组件的条件下进行,在com里面找到Microsoft  Word 16.0 Object L ...

  3. ps-如何去水印

    现在,版权意识越来越明显了,所以加水印的图片越来越多了,但我们在一些特定的情况又不得不去使用那些图片,去水印又是问题.今天,我来说下如何去水印. 一.ps-仿制图章工具去水印 1.打开ps,打开待去水 ...

  4. 涂抹mysql笔记-安装mysql

    1.mysql安装:(1)RPM安装:rpm -ivh xxx 建议安装三个:MySQL-server-VERSION.PLATFORM-cpu.rpmMySQL-client-VERSION.PLA ...

  5. Shiro+CAS

    参考链接: CAS实现单点登录SSO执行原理探究:http://blog.csdn.net/javaloveiphone/article/details/52439613 单点登录CAS技术概述:ht ...

  6. Python-递加计数器

    计数本:number.txt 1 2 3 4 主程序:计数器 # Author: Stephen Yuan # 递加计算器 import os # 递加计算器 def calc(): file_siz ...

  7. java面试多线程问题

    Java多线程面试问题 1. 进程和线程之间有什么不同? 一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环 ...

  8. Spring线程池的5个要素

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-// ...

  9. json字符串装List<Object>

    List<SearchParam> ts = (List<SearchParam>) JSONArray.parseArray(jsonStr, SearchParam.cla ...

  10. 配置yum源

    本文转载:https://www.cnblogs.com/yangp/p/8506264.html (一)yum源概述 yum需要一个yum库,也就是yum源.默认情况下,CentOS就有一个yum源 ...