JQUERY-事件-动画-类数组对象-添加自定义API
正课:
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的更多相关文章
- jQuery的类数组对象结构
Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...
- jQuery的类数组对象结构(转)
原文:http://www.imooc.com/code/3248 为什么是类数组对象呢? 很多人迷惑的jQuery为什么能像数组一样操作,通过对象get方法或者直接通过下标0索引就能转成DOM对象. ...
- NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)
快捷键:leishuzuduixiang(类数组对象) bianlijiedian(遍历节点) jiedian(节点) htmlcollection , namednodemap , nodel ...
- [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- JavaScript中的类数组对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"]; / ...
- 什么是“类数组对象”,在jquer中怎样将类数组对象转换为数组对象
类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...
- 如何在JavaScript中手动创建类数组对象
前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
- 类数组对象arguments 和 数组对象
arguments并不是一个真正的数组,而是一个“类似数组(array-like)”的对象: 就像下面的这段输出,就是典型的类数组对象: {0:12, 1:23} 一.类数组 VS 数组 相同点: 都 ...
- 类数组对象与arguments
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ['name', 'age', 'sex']; var arrayLike = { ...
随机推荐
- Java读取excel数据保存入库
Java开发读取excel表格数据入库保存: List<Map<String, Object>> list = null; String filePath = filePath ...
- logback kafkaAppender输出日志到kafka
官网地址https://github.com/danielwegener/logback-kafka-appender 本文以spring boot项目为基础,更多的信息,请参考官网 https:// ...
- Centos7下杀毒软件clamav的安装和使用
目录 一.yum安装 二.编译安装 2.1:下载软件包 2.2:创建clamav用户和存放病毒库目录 2.3:解压安装包 2.4:安装依赖 2.5:编译安装 2.6:配置clamav 2.7:启动cl ...
- 定时器&改变定时器的执行频率
static System.Threading.Timer timer; static void Main(string[] args) { Console.WriteLine("Press ...
- pl/sql报错快速解决方法(新手推荐)
一:简介 今天登录数据库时莫名报了个奇怪的错:ORA-01033: ORACLE initialization or shutdown in progress可能是昨天匆忙电脑没正常关机导致的... ...
- Linux - 文件和目录常用命令
文件和目录常用命令 目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 ...
- ELK收集日志到mysql
场景需求 在使用ELK对日志进行收集的时候,如果需要对数据进行存档,可以考虑使用数据库的方式.为了便于查询,可以同时写一份数据到Elasticsearch 中. 环境准备 CentOS7系统: 192 ...
- Zabbix 各种报错信息和遇到的问题处理(持续总结更新~~~~~)
问题1:Zabbix poller processes more than 75% busy 解决: 1.修改配置文件: # vim /etc/zabbix/zabbix_server.conf St ...
- java中java.exe,javac 在editplus中的配置
java.exe,javac设置快捷键(editplus) 1.tools-preferences 2.add tools---program java关键字
- QT Designer基础——登录界面设计基础版
认识QT Designer提供的可选控件:以下八个大类 Layouts:布局相关 Spacers:留空 Buttons:可点击的按钮类 Item Views和 Item Widgets:高级控件,例如 ...