Jquery_day03
正课:
-
事件
-
动画
-
类数组对象
-
添加自定义API
-
封装自定义插件
-
事件:
加载后执行: 2种 -
DOMContentLoaded: 仅DOM内容加载完就提前执行
只等html和js加载完就立刻执行，不等css和图片
何时: 不依赖于css和图片的代码都应该放在DOMContentLoaded中提前执行
比如: 事件绑定
如何: $(document).ready(function(){…})
简写: $().ready(function(){…})
更简写为: ( f u n c t i o n ( ) . . . ) 总 结 : 今 后 所 有 j q 代 码 ， 都 要 包 含 在 (function(){...}) 总结: 今后所有jq代码，都要包含在 (function()...)总结:今后所有jq代码，都要包含在(function(){ … }) -
window.onload: 整个HTML页面加载完才执行
等所有网页内容(html,css,js,图片)加载完才执行
何时: 依赖于css和图片的代码，只能放在window.onload中稍后执行。
如何: $(window).load(function(){ … })
鄙视: $的原理: 4种:
- 查找并封装DOM元素: KaTeX parse error: Expected 'EOF', got '#' at position 27: …) 如果"selector"是#̲id，自动调用getElementById
如果"selector"是elem， 自 动 调 用 g e t E l e m e n t s B y T a g N a m e 如 果 " s e l e c t o r " 是 . c l a s s ， 自动调用getElementsByTagName 如果"selector"是.class， 自动调用getElementsByTagName如果"selector"是.class，自动调用getElementsByClassName
否则，其余都调querySelectorAll - 直接封装DOM元素: $(DOM元素)
- 创建新元素: $(“html片段”)
- 绑定DOMContentLoaded事件: $(function(){ … })
鼠标事件:
mouseover mouseout
问题: 反复进出子元素，也会反复触发父元素上的事件
解决: mouseenter和mouseleave代替
简化: 如果同时绑定mouseenter和mouseleave
可简写为: .hover(
function(){ … },//给enter的
function(){ … } //给leave的
)
更简化: 如果两个函数刚巧可以合并为一个函数，也可以只写一个处理函数
模拟触发:
$elem.trigger(“事件名”)
可简写为: $elem.事件名()
- 动画:
- 简单动画: 效果固定的动画API, 3组:
- 显示隐藏: .show() .hide() .toggle()
默认: 用display:none/block瞬间显示隐藏
加动画: 必须指定动画持续时间:
.show(ms) .hide(ms) - 上滑下滑: .slideUp() .slideDown() .slideToggle()
- 淡入淡出: .fadeIn() .fadeOut() .fadeToggle()
问题: - 效果是用js写死的，无法维护。
- 用js定时器实现的动画效果，效率低！
总结: 简单动画应首选css+transition实现——效率高，可维护
特例: .show() .hide() 推荐使用 - 万能动画: 可对多数css属性指定动画效果的API
如何: $elem.animate({
css属性: 目标值,
… : …
},动画持续时间ms)
问题: 只支持单个数值的css属性: width, height, margin, padding, borderWidth, fontSize, opacity, borderRadius
不支持: color, backgroundColor, fontFamily …
排队和并发:
并发: 多个css属性同时变化
如何: 放在一个animate内的多个css属性，默认并发变化
排队: 多个css属性先后依次变化
如何: 先后对一个元素调用多次animate，则每个animate内的变化是排队依次执行
动画结束后执行:
每个动画API都有最后一个回调函数参数，会自动在动画结束后执行。
停止动画: .stop()
问题: .stop()只能停止队列中当前正在播放的动画，队列中后续动画依然正常执行。
解决: .stop(true) 清空队列
选择器: :animated 用来选择正在播放动画的元素
和判断元素是否正在播放动画
总结: 实现动画效果共几种手段:
css: class+transition animation+keyframes
优点: 效率高
缺点: 无法添加交互行为
js定时器: .animate()
优点: 随意添加交互行为
缺点: 效率低
RequestAnimationFrame——自学
-
类数组对象操作:
-
获得jQuery对象中DOM元素的个数:
$elem.length 或 $elem.size()——新版本已废弃 -
将jQuery对象转换回DOM元素对象:
var li=$lis[i] 或 $lis.get(i)
本意: 取出jQuery类数组对象中i位置的DOM元素 -
查询一个元素在结果集合中的位置:
var i= l i s . i n d e x ( l i ) 简 写 : 如 果 是 在 一 个 父 元 素 内 ， 找 子 元 素 的 位 置 : v a r i = lis.index(li) 简写: 如果是在一个父元素内，找子元素的位置: var i= lis.index(li)简写:如果是在一个父元素内，找子元素的位置:vari=child.index() -
遍历:
$(…).each(function(i,elem){
//i 获得当前位置
//elem 获得当前DOM元素
//this-> elem
})
其实，在3.x版本中被for of代替
for(var elem of $(…)){
//elem当前DOM元素
} -
添加自定义API:
-
定义独立的js文件封装自定义的扩展API
jQuery.fn.自定义API=function(){
//this->将来调用自定义API的.前的$(…)对象
$(this) 而是直接用this
} -
引入:
先引入jquery.js, 再引入自定义的js文件 -
调用自定义API
$(…).自定义API() -
封装自定义插件:
jQuery官方插件: jquery-ui
手风琴: accordion
标签页: tabs
如何: -
引入插件的css
-
按插件要求编写HTML内容
-
引入js: 先引jquery.js, 再引jquery-ui.js
-
编写自定义脚本:
找到插件的父元素，调用插件API
原理: 侵入式:
插件函数根据自身需要，自动添加全部的class和行为！
优点: 简单！
缺点: 行为和样式都是写死的，不便于维护！
vs bootstrap DIY:
需要开发人员手工设置样式的class和自定义扩展属性
缺点: 麻烦！
优点: 可维护！
封装自定义插件时，如何选择:
如果给自己人用，小范围使用，优先选择jQuery-ui侵入方式
如果公开使用，大范围使用，优先选择bootstrap DIY方式
封装插件:
前提: 必须已经用普通的html ,css,js,jq实现了效果
封装jQuery UI风格插件:
- 提取并整理css到一个独立的css文件中
要求: 一个插件内的css选择器，必须以一致的父选择器开头
为什么: 避免插件的样式和其它插件样式冲突 - 定义独立的js文件
为jQuery类型添加自定义插件API:
侵入class和自定义扩展属性:
以父元素为起点，遍历子元素，并添加class和自定义扩展属性
查找触发事件的元素，绑定事件:
其实是，将原来的事件绑定拷贝到js中，修改主语为$parent即可
如何使用: 同jquery ui插件的用法。
课后任务:
(1)复习: jQuery和Bootstrap插件定义和使用方式
(2)作业: 完成课后练习:
题目要求:
用jQuery-ui侵入式封装自定义标签页插件
运行效果:
提示:
(3)项目: 仿学子商城商品详情页，完成个人项目中详情页内容加载
题目要求:
运行效果: