Jquery

正课:

事件

动画

类数组对象

添加自定义API

封装自定义插件

事件: 加载后执行: 2种

DOMContentLoaded: 仅DOM内容加载完就提前执行 只等html和js加载完就立刻执行，不等css和图片 何时: 不依赖于css和图片的代码都应该放在DOMContentLoaded中提前执行 比如: 事件绑定 如何: $(document).ready(function(){…}) 简写: $().ready(function(){…}) 更简写为: $(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，$自动调用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=$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)项目: 仿学子商城商品详情页，完成个人项目中详情页内容加载 题目要求: 运行效果: