正课:

1. 事件:

2. 动画:

3. 类数组对象操作:

4. 添加自定义API:

1. 事件:

1. 页面加载后执行: 2个时机

1. DOM内容加载完成: 仅包括html, js

DOMContentLoaded

何时: 如果不依赖css和图片的初始化操作(比如,事件绑定),都应该放在DOMContentLoaded中提前执行,让用户可以不必等待图片和css,就可提前使用

如何: $(document).ready(function(){

... ...

})

简化: $().ready(function(){

更简化: $(function(){ ... });

鄙视: $的原理:

1. 查找并封装DOM元素

如果选择器简单,使用的是按HTML查找

如果选择器复杂,才使用querySelectorAll

2. 直接封装现有DOM元素

3. 创建新元素

4. 绑定DOM内容加载提前执行的处理函数

2. 整个页面加载完成: 包括: html, js, css, 图片 ....

window.onload=function(){ ... }

何时: 必须依赖css或图片的行为,必须放在onload中

问题: 赋值方式绑定事件,只能绑定一个处理函数,后绑定会把先绑定的覆盖掉

解决: $(window).load(function(){ ... })

2. 鼠标事件:

mouseover  mouseout

问题: 进出子元素,也会频繁触发父元素上的处理函数

解决: mouseenter   mouseleave

优点: 即使频繁进出子元素,也不会反复触发父元素的处理事件

更简化: 如果同时绑定enter和leave,就可以只绑定hover

.hover( //相当于同时绑enter和leave

function(){ ... }, //给enter

function(){ ... } //给leave

)

更简化: 如果两个处理函数可统一为一个函数

.hover(

function(){ ... } //即给enter,又给leave

)

3. 模拟触发:

$elem.trigger("事件名")

可简写为: $elem.事件名();

2. 动画:

1. 简单动画: 3组效果:

显示隐藏: .show([ms])   .hide([ms])    .toggle([ms])

强调: .show()/.hide() 如果不加参数,默认是display:block/none,不带动画效果——推荐

上滑下滑: .slideUp(ms)   .slideDown(ms)    .slideToggle(ms)

淡入淡出: .fadeIn()      .fadeOut()     .fadeToggle()

原理: 用js的定时器修改的内联样式:

问题: 1. 效率不如css的transition

2. 写死的效果,不可维护

2. 万能动画: 可对多数css属性选择应用动画效果

$elem.animate({

css属性名: 目标值,

... : ...

},ms)

强调: 只支持单个数值的css属性

排队和并发:

1. 并发: 多个css属性,同时变化

如何: 在一个animate内的多个css属性,默认并发

2. 排队: 多个css属性,排队先后变化

如何: 对一个元素,先后调用多个animate,则排队执行

其它动画API,也有排队效果。

本质: 调用动画API,不是立刻启动动画的意思。只是将动画加入队列而已。

动画播放后执行:

每个动画API的最后一个参数,都是一个回调函数,会在动画播放后自动执行!

停止动画: .stop()

问题: 默认只能停止队列中当前正在播放的一个动画,后续动画依然执行

解决: .stop(true) 清空队列

选择器: :animated  选择或判断一个正在播放动画的元素

延迟执行: .delay(ms)

3. 类数组对象操作:

each: 对类数组对象中每个元素执行相同操作

2种用法:

1. 仅遍历jQuery对象中的每个DOM元素

$(...).each(function(i,elem){

//i 当前位置

//elem 当前元素对象

})

2. 可对所有索引数组和类数组对象,提供遍历操作

$.each(arr/类数组对象, function(i,elem){

... ...

})

鄙视: $(...).each()   vs  $.each()

其实就是实例方法和静态方法的比较

index: 在数组中查找一个指定元素的位置

var i=$(所有元素).index(要找的元素);

简写: 如果在同一个父元素下找直接子元素的位置

$(子元素).index()

4. 添加自定义方法:

3步:

1. 验证是否先引入了jQuery

2. 验证jQuery的原型对象中是否包含该方法

3. 向jQuery的原型对象中添加新方法

this->$( ... )  不用$(this)封装!

JQUERY-事件-动画-类数组对象-添加自定义API的更多相关文章

  1. jQuery的类数组对象结构

    Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...

  2. jQuery的类数组对象结构(转)

    原文:http://www.imooc.com/code/3248 为什么是类数组对象呢? 很多人迷惑的jQuery为什么能像数组一样操作,通过对象get方法或者直接通过下标0索引就能转成DOM对象. ...

  3. NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)

    快捷键:leishuzuduixiang(类数组对象)  bianlijiedian(遍历节点)  jiedian(节点)  htmlcollection , namednodemap , nodel ...

  4. [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象

    示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...

  5. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  6. 什么是“类数组对象”,在jquer中怎样将类数组对象转换为数组对象

    类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

  7. 如何在JavaScript中手动创建类数组对象

    前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...

  8. 类数组对象arguments 和 数组对象

    arguments并不是一个真正的数组,而是一个“类似数组(array-like)”的对象: 就像下面的这段输出,就是典型的类数组对象: {0:12, 1:23} 一.类数组 VS 数组 相同点: 都 ...

  9. 类数组对象与arguments

    类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ['name', 'age', 'sex']; var arrayLike = { ...

随机推荐

  1. Java读取excel数据保存入库

    Java开发读取excel表格数据入库保存: List<Map<String, Object>> list = null; String filePath = filePath ...

  2. logback kafkaAppender输出日志到kafka

    官网地址https://github.com/danielwegener/logback-kafka-appender 本文以spring boot项目为基础,更多的信息,请参考官网 https:// ...

  3. Centos7下杀毒软件clamav的安装和使用

    目录 一.yum安装 二.编译安装 2.1:下载软件包 2.2:创建clamav用户和存放病毒库目录 2.3:解压安装包 2.4:安装依赖 2.5:编译安装 2.6:配置clamav 2.7:启动cl ...

  4. 定时器&改变定时器的执行频率

    static System.Threading.Timer timer; static void Main(string[] args) { Console.WriteLine("Press ...

  5. pl/sql报错快速解决方法(新手推荐)

    一:简介 今天登录数据库时莫名报了个奇怪的错:ORA-01033: ORACLE initialization or shutdown in progress可能是昨天匆忙电脑没正常关机导致的... ...

  6. Linux - 文件和目录常用命令

    文件和目录常用命令 目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 ...

  7. ELK收集日志到mysql

    场景需求 在使用ELK对日志进行收集的时候,如果需要对数据进行存档,可以考虑使用数据库的方式.为了便于查询,可以同时写一份数据到Elasticsearch 中. 环境准备 CentOS7系统: 192 ...

  8. Zabbix 各种报错信息和遇到的问题处理(持续总结更新~~~~~)

    问题1:Zabbix poller processes more than 75% busy 解决: 1.修改配置文件: # vim /etc/zabbix/zabbix_server.conf St ...

  9. java中java.exe,javac 在editplus中的配置

    java.exe,javac设置快捷键(editplus) 1.tools-preferences 2.add tools---program java关键字

  10. QT Designer基础——登录界面设计基础版

    认识QT Designer提供的可选控件:以下八个大类 Layouts:布局相关 Spacers:留空 Buttons:可点击的按钮类 Item Views和 Item Widgets:高级控件,例如 ...