Jquery_day03

正课:

1. 事件

2. 动画

3. 类数组对象

4. 添加自定义API

5. 封装自定义插件

6. 事件:
   加载后执行: 2种

7. DOMContentLoaded: 仅DOM内容加载完就提前执行
   只等html和js加载完就立刻执行，不等css和图片
   何时: 不依赖于css和图片的代码都应该放在DOMContentLoaded中提前执行
   比如: 事件绑定
   如何: $(document).ready(function(){…})
   简写: $().ready(function(){…})
   更简写为: $(function()...)总结:今后所有jq代码，都要包含在$(function(){ … })

8. window.onload: 整个HTML页面加载完才执行
   等所有网页内容(html,css,js,图片)加载完才执行
   何时: 依赖于css和图片的代码，只能放在window.onload中稍后执行。
   如何: $(window).load(function(){ … })

鄙视: $的原理: 4种:

1. 查找并封装DOM元素: KaTeX parse error: Expected 'EOF', got '#' at position 27: …) 如果"selector"是#̲id，自动调用getElementById
   如果"selector"是elem，$自动调用getElementsByTagName如果"selector"是.class，$自动调用getElementsByClassName
   否则，其余都调querySelectorAll
2. 直接封装DOM元素: $(DOM元素)
3. 创建新元素: $(“html片段”)
4. 绑定DOMContentLoaded事件: $(function(){ … })

鼠标事件:
mouseover mouseout
问题: 反复进出子元素，也会反复触发父元素上的事件
解决: mouseenter和mouseleave代替
简化: 如果同时绑定mouseenter和mouseleave
可简写为: .hover(
function(){ … },//给enter的
function(){ … } //给leave的
)
更简化: 如果两个函数刚巧可以合并为一个函数，也可以只写一个处理函数

模拟触发:
$elem.trigger(“事件名”)
可简写为: $elem.事件名()

2. 动画:
3. 简单动画: 效果固定的动画API, 3组:
4. 显示隐藏: .show() .hide() .toggle()
   默认: 用display:none/block瞬间显示隐藏
   加动画: 必须指定动画持续时间:
   .show(ms) .hide(ms)
5. 上滑下滑: .slideUp() .slideDown() .slideToggle()
6. 淡入淡出: .fadeIn() .fadeOut() .fadeToggle()
   问题:
7. 效果是用js写死的，无法维护。
8. 用js定时器实现的动画效果，效率低！
   总结: 简单动画应首选css+transition实现——效率高，可维护
   特例: .show() .hide() 推荐使用
9. 万能动画: 可对多数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——自学

3. 类数组对象操作:

4. 获得jQuery对象中DOM元素的个数:
   $elem.length 或 $elem.size()——新版本已废弃

5. 将jQuery对象转换回DOM元素对象:
   var li=$lis[i] 或 $lis.get(i)
   本意: 取出jQuery类数组对象中i位置的DOM元素

6. 查询一个元素在结果集合中的位置:
   var i=$lis.index(li)简写:如果是在一个父元素内，找子元素的位置:vari=$child.index()

7. 遍历:
   $(…).each(function(i,elem){
   //i 获得当前位置
   //elem 获得当前DOM元素
   //this-> elem
   })
   其实，在3.x版本中被for of代替
   for(var elem of $(…)){
   //elem当前DOM元素
   }

8. 添加自定义API:

9. 定义独立的js文件封装自定义的扩展API
   jQuery.fn.自定义API=function(){
   //this->将来调用自定义API的.前的$(…)对象
   $(this) 而是直接用this
   }

10. 引入:
    先引入jquery.js, 再引入自定义的js文件

11. 调用自定义API
    $(…).自定义API()

12. 封装自定义插件:
    jQuery官方插件: jquery-ui
    手风琴: accordion
    标签页: tabs
    如何:

13. 引入插件的css

14. 按插件要求编写HTML内容

15. 引入js: 先引jquery.js, 再引jquery-ui.js

16. 编写自定义脚本:
    找到插件的父元素，调用插件API
    原理: 侵入式:
    插件函数根据自身需要，自动添加全部的class和行为！
    优点: 简单！
    缺点: 行为和样式都是写死的，不便于维护！
    vs bootstrap DIY:
    需要开发人员手工设置样式的class和自定义扩展属性
    缺点: 麻烦！
    优点: 可维护！
    封装自定义插件时，如何选择:
    如果给自己人用，小范围使用，优先选择jQuery-ui侵入方式
    如果公开使用，大范围使用，优先选择bootstrap DIY方式

封装插件:
前提: 必须已经用普通的html ,css,js,jq实现了效果
封装jQuery UI风格插件:

1. 提取并整理css到一个独立的css文件中
   要求: 一个插件内的css选择器，必须以一致的父选择器开头
   为什么: 避免插件的样式和其它插件样式冲突
2. 定义独立的js文件
   为jQuery类型添加自定义插件API:
   侵入class和自定义扩展属性:
   以父元素为起点，遍历子元素，并添加class和自定义扩展属性
   查找触发事件的元素，绑定事件:
   其实是，将原来的事件绑定拷贝到js中，修改主语为$parent即可
   如何使用: 同jquery ui插件的用法。

课后任务:
(1)复习: jQuery和Bootstrap插件定义和使用方式
(2)作业: 完成课后练习:
题目要求:
用jQuery-ui侵入式封装自定义标签页插件
运行效果:

提示:
(3)项目: 仿学子商城商品详情页，完成个人项目中详情页内容加载
题目要求:
运行效果: