课程回顾：
jQuery：JavaScript库
入口函数：$(function () {});
jQuery：jQuery对象，DOM对象
jQuery转成DOM：$(‘元素’)[索引值]
DOM转成jQuery：$(DOM对象);
筛选方法：parent，children，find，siblings，eq
样式操作：css方法
类名操作：addClass，removeClass，toggleClass
jQuery动画效果
显示隐藏效果
show([speed,[easing],[fn]])【显示】
hide([speed,[easing],[fn]])【隐藏】
toggle([speed,[easing],[fn]])【切换】（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
滑动效果
slideDown([speed,[easing],[fn]])【下滑效果】
slideUp([speed,[easing],[fn]])【上滑效果】
slideToggle([speed,[easing],[fn]])【切换效果】（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
下拉菜单案例修改
事件切换**
hover([over,]out)
hover(function () {},function () {});
$(‘div’).hover(function () {//鼠标进入的函数},function () {//鼠标离开的函数});
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）（2）out:鼠标移出元素要触发的函数（相当于mouseleave）（3）如果只写一个函数，则鼠标经过和离开都会触发它
动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。停止排队:stop()(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画淡入淡出效果
fadeIn([speed,[easing],[fn]])【淡入】
fadeOut([speed,[easing],[fn]])【淡出】
fadeToggle([speed,[easing],[fn]])【切换】
fadeTo([[speed],opacity,[easing],[fn]])【到达某个位置】（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。注意：fadeTo([[speed],opacity,[easing],[fn]])（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
练习：高亮显示
原理：鼠标进入让当前元素的所有兄弟透明度降低，鼠标离开恢复既可注意：动画排队问题<script>$(function () {// 鼠标进入li，其他兄弟们透明度改成0.5$('.wrap li').mouseover(function () {$(this).siblings().stop().fadeTo(400, 0.5);});// 鼠标离开li，其他兄弟们的透明度改成1$('.wrap li').mouseout(function () {$(this).siblings().stop().fadeTo(400, 1);});});</script>
自定义动画 animate
语法：animate(params,[speed],[easing],[fn])；参数：
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。案例：王者荣耀手风琴效果
鼠标经过某个小li 有两步操作：1、当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入2、其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(function () {$('.king li').mouseover(function () {// 鼠标进入li，让当前这个li变成224宽，小图隐藏，大图显示$(this).stop().animate({width : 224}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();// 其他兄弟li变成69宽，他们的小图显示，大图隐藏$(this).siblings().stop().animate({width : 69}).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();});});
动画：
基本动画：show，hide，toggle
滑动动画：slideDown，slideUp，slideToggle
淡入淡出动画：fadeIn，fadeOut，fadeToggle，fadeTo(speed，opcity)
自定义动画：animate({属性});
上午回顾：
动画效果：基本动画效果，滑动动画效果，淡入淡出动画效果，自定义动画
事件切换：hover（inFn，outFn）
停止动画：stop
jQuery选择器：获取元素$(元素)
样式操作：css方法
类名操作：addClass，removeClass，toggleClass
动画效果：4种
jQuery 属性操作
<img src="a.jpg" id="d1" width="100 index='3' data-index='1' bigSrc='2.jpg'>固有属性，自定义属性prop操作固有属性，attr操作自定义属性
设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a>元素里面的 href ，比如 <input>元素里面的 type。
获取语法：
$(‘div’).prop(’‘属性’’)
$(‘div’).prop(‘id’)
设置属性语法
$(‘div’).prop(’‘属性’’, ‘‘属性值’’)
$(‘div’).prop(‘id’,‘d2’)
change事件，表单中checked属性
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index=“1”。
获取属性语法
attr(’‘属性’’) // 类似原生 getAttribute()
设置属性语法
attr(’‘属性’’, ‘‘属性值’’) //类似原生 setAttribute()
数据缓存 data()【了解】
当做变量存储
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，所以元素上无法查看。一旦页面刷新，之前存放的数据都将被移除。
附加数据语法
$(元素).data(’‘name’’,’‘value’’) // 向被选元素附加数据
获取数据语法
$(元素).date(’‘name’’) // 向被选元素获取数据
例如：
$('span').data('spanindex',3);console.log($('span').data('spanindex'));
购物车案例：
案例：购物车案例模块-全选**
①全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。②因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。③把全选按钮状态赋值给3小复选框就可以了。④当我们每次点击小的复选框按钮，就来判断：⑤如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。⑥:checked 选择器 :checked 查找被选中的表单元素。change改变到时候，获取当前input的checked状态，赋值给小按钮和全选按钮既可小按钮改变的时候，判断选中个数和总个数，修改大按钮是否要选中
课程回顾：
动画效果：
基本动画：show，hide，toggle
滑动动画：slideDown，slideUp，slideToggle
淡入淡出：fadeIn，fadeOut，fadeTo，fadeToggle
自定义动画：animate({属性});
事件切换：hover(over，out);
停止动画：stop
属性操作：prop固有属性，attr自定义属性，[data]$(元素).prop(‘属性’, ‘值’);
文本内置：html，text，val；$(元素).html(‘值’)
jQuery 内容文本值
innerHTML，innerText，value
普通元素内容 **html()****（相当于原生inner HTML)
获取：html() // 获取元素的内容
设置：html(’‘内容’’) // 设置元素的内容
普通元素文本内容 **text() (相当与原生innerText)
获取：text() // 获取元素的文本内容
设置：text(’‘文本内容’’) // 设置元素的文本内容
表单的值 val()（ 相当于原生value)
获取：val() // 获取表单的值
设置：val(’‘内容’’) // 设置表单的值
$('input').click(function () {// 获取// console.log( $('div').html() );// 设置// $('div').html('<b>哇哈哈哈</b>');// 获取// console.log( $('div').text() );// 设置// $('div').text('<b>新的内容</b>');// 获取// console.log( $('input').val() );// 设置$('input').val('哇哈哈哈按钮');});
案例：购物车案例模块-增减商品数量
①核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。②注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。 ③修改表单的值是val() 方法④注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值⑤减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了，直接return false即可
**购物车案例模块-**修改商品小计
①核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计②注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum） ③修改普通元素的内容是text() 方法④注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)⑤parents(‘选择器’) 可以返回指定祖先元素 ⑥最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法⑦用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件⑧用最新的表单内的值 乘以 单价即可 但是还是当前商品小计点击获取单价和数量相乘的结果保存给小计既可用户直接输入数字问题
jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$(“div”).each(function(index, domEle) { xxx; }）
\1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个\2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象\3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：$.each(object，function(index, element){ xxx;}）
\1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象\2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
**案例：购物车案例模块-**计算总计和总额
①核心思路：把所有文本框里面的值相加就是总计数量。总额同理②文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可③点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额④因此可以封装一个函数求总计和总额的， 以上2个操作调用这个函数即可。⑤注意1： 总计是文本框里面的值相加用 val() 总额是普通元素的内容用text() ⑥要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加多次需要求总计，所有封装函数最为合适
创建元素
语法：$(’‘
- 内容
- ’’);
添加元素
内部添加：产生的父子级关系
element.append(’‘内容’’) [把内容放入匹配元素内部最后面，类似原生 appendChild。
appendTo
element.prepend(’‘内容’’) 把内容放入匹配元素内部最前面。
prependTo
外部添加
element.after(’‘内容’’) // 把内容放入目标元素后面
element.before(’‘内容’’) // 把内容放入目标元素前面
①内部添加元素，生成之后，它们是父子关系。②外部添加元素，生成之后，他们是兄弟关系。
删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(’’’’) // 清空匹配的元素内容
①remove 删除元素本身。②empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
**案例：购物车案例模块-**删除商品模块
①核心思路：把商品remove() 删除元素即可②有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车③商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发④删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品⑤清理购物车： 则是把所有的商品全部删掉
**案例：购物车案例****模块选中商品添加背景
①核心思路：选中的商品添加背景，不选中移除背景即可②全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景③小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景④这个背景，可以通过类名修改，添加类和删除类
。...)
)
