jQuery动画 和 事件

动画

动画曲线:
swing(默认值)开始和结束慢,中间快
linear匀速 可省略不写
回调函数,动画完成之后要做的事情,可无限嵌套

$('#div1').animate({
                width: 200,
                height: 200},
                1000,  #动画时间
                function(){
                    $(this).animate(
                        {marginLeft: 500},
                        1000, 
                }
            );

jQuery循环

$('.list li').each(function()});})
jquery事件
事件函数列表:

blur() 元素失去焦点

focus() 元素获得焦点

change() 表单元素的值发生变化

click() 鼠标单击

dblclick() 鼠标双击

mouseover() 鼠标进入(进入子元素也触发)

mouseout() 鼠标离开(离开子元素也触发)

mouseenter() 鼠标进入(进入子元素不触发)

mouseleave() 鼠标离开(离开子元素不触发)

hover() 同时为mouseenter和mouseleave事件指定处理函数

mouseup() 松开鼠标

mousedown() 按下鼠标

mousemove() 鼠标在元素内部移动

keydown() 按下键盘

keypress() 按下键盘

keyup() 松开键盘

load() 元素加载完毕

ready() DOM加载完成

resize() 浏览器窗口的大小发生改变

scroll() 滚动条的位置发生变化

select() 用户选中文本框中的内容

submit() 用户递交表单

toggle() 根据鼠标点击的次数,依次运行多个函数

unload() 用户离开页面;

取消绑定事件:
例如:$(function(){

       $('#div1').bind('mouseover click', function(event) {

       alert($(this).html());

       // $(this).unbind();

      $(this).unbind('mouseover');

主动触发与自定义事件

主动触发

使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件

除了系统事件外,可以通过bind方法自定义事件,然后用tiggle方法触发这些事件;

事件冒泡

什么是事件冒泡 ?

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的作用 ?

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡 ?

事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止。

合并阻止操作

实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用

例如:// event.stopPropagation();

例如:// event.preventDefault();

// 合并写法:

例如:return false;

事件委托

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来的子集,执行相应的操作,事件委托可以极大减少事件绑定次数,提高性能;还可以让新加入的子元素也可以拥有相同的操作。

取消事件委托

例如: $list.undelegate();

jquery元素节点操作

插入节点

1、append()和appendTo():从后面插入元素;

2、prepend()和prependTo():从前面插入元素;

3、after()和insertAfter():从后面插入元素;

4、before()和insertBefore():从前面插入元素;

删除节点
$('#div1').remove();

todolist(计划列表)实例;

滚轮事件与函数节流

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,069评论 0 2
  • 第1章 动画基础隐藏和显示 1-1 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置c...
    mo默22阅读 727评论 0 8
  • 首先附上jQuery官网 http://jquery.com/ 2.0版本开始放弃了对IE7/8及其之前版本的...
    风之帆阅读 683评论 4 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,150评论 0 1
  • 在OC编码中,有一种黑魔法,当你想截获一个方法,想在这个方法中添加一点你需要的东西,但是又不能改这个这个方法。可以...
    zelo阅读 462评论 0 0