JQuery概述和常用API

JQuery知识总结

JQuery概述

1. JavaScript库

   仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

   JavaScript库：即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

   JQuery就是为了快速方便的操作DOM，里面基本都是函数(方法)。

   对原生JavaScript的封装，内部都是用JavaScript 实现的，我们主要学习的是JQuery。

2. JQuery的概念

   JQuery 是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。

   j就是JavaScript；Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

   JQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习JQuery本质:就是学习调用这些函数(方法)。

   JQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

3. JQuery的优点

   轻量级、免费、开源。核心文件才几十kb，不会影响页面加载速度

   跨浏览器兼容。基本兼容了现在主流的浏览器

   链式编程、隐式迭代

   对事件、样式、动画支持，人大简化了DOM操作

   支持插件扩展开发。有着丰富的第三方的插件，例收︰树形菜单、日期控件、轮播图等

JQuery基本使用

JQuery使用时要写入口函数

$(function() {  // 入口函数
	JS内容  
})

1. JQuery 的下载

   官网地址: https://JQuery.com/

   版本︰

   ​ 1x:兼容IE678等低版本浏览器，官网不再更新

   ​ 2x∶不兼容IE 678等低版本浏览器，官网不再更新

   ​ 3x:不兼容E678等低版本浏览器，是官方主要更新维护的版本

   各个版本的下载:https://code.JQuery.com/

2. JQuery的顶级对象$

   $是JQuery的别称，在代码中可以使用JQuery代替$，但一般为了方便，通常都直接使用$。 JQuery() === $()

   $是JQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成JQuery对象，就可以调用JQuery的方法。

JQuery对象和DOM对象

用原生JS获取来的对象就是 DOM对象

JQuery方法获取的元素就是JQuery对象

JQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储)

JQuery 对象只能使用 JQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法

DOM对象与JQuery对象之间是可以相互转换的。

因为原生js比JQuery更大，原生的一些属性和方法JQuery没有给我们封装.要想使用这些属性和方法需要把JQuery对象转换为DOM对象才能使用。

DOM对象转换为JQuery对象

​ $(DOM对象)：$(‘div’)

JQuery对象转换为DOM对象(两种方式)

​ $(div’) [index] index是索引号

​ $('div ').get(index) index是索引号

JQuery常用API

JQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此JQuery给我们做了封装，使获取元素统一标准。

$(“选择器”) //里面选择器直接写CSS选择器即可，但是要加引号
$(this)    // 获取当前元素
$(this).index()  // 获取当前元素的索引值

JQuery基本选择器

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“Ii.current”)	交集元素

JQuery层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

JQuery设置样式

​ $(‘div’).css("属性,值)

隐式迭代

​ 遍历内部 DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

​ 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

JQuery筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

JQuery筛选方法

语法	用法	说明
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”).chiidren(“li”);	相当于$(“u1>li”)，最近一级（亲儿子)
find(selector)	$(“ul”).find(“li”);	相当于$("“ul li”),后代选择器
siblings(selector)	$(“.first”).siblings(“li”);	查找兄弟节点，不包括自己本身
nextAll( [expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevtAll( [expr])	$(“.last”").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$ ( " div ’ ).hasClass( “protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li” ).eq(2);	相当于$("“li:eq(2)” ),index从0开始

父 parent()：返回的是 最近一级的父级元素 亲爸爸

亲儿子 children()：类似子代选择器 ul>li

后代find()：可以选里面所有的孩子 包括儿子和孙子 ，类似于后代选择器

兄弟元素siblings()：除了自身元素之外的所有亲兄弟

选择元素eq()：利用选择方法的方式选择索引为n的元素

重点记住: parent()：children() find() siblings() eq()

JQuery里面的排他思想

想要多选一的效果，排他思想:当前元素设置样式，其余的兄弟元素清除样式。

:checked选择器 :checked查找被选中的表单元素

链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color , ‘red’).sibling().css(‘color’, “”); // 自己变色，兄弟为空

$(this).siblings().css(‘color’, ‘red’); // 兄弟变色，自己不变

$(this).siblings().parent().css(‘color’, ‘blue’); // 兄弟的爸爸变色

JQuery选择器拓展案例

​ 鼠标经过当前元素，后代子元素显示，鼠标移开，后代子元素隐藏

$(function () {
	// 鼠标经过
	$(".nav>li").mouseover(function () {
		// $(this) JQuery 当前元素  this不要加引号
		// show() 显示元素  hide() 隐藏元素
		$(this).children("ul").show();
	});
	// 鼠标离开
	$(".nav>li").mouseout(function () {
		$(this).children("ul").hide();
	})
})

​ 排它思想：按钮变色

​ 点击按钮当前元素变色，其他元素回复正常

​ 通过隐式迭代和siblings兄弟元素，变化自己，清除其他

$(function() {
	// 1. 隐式迭代 给所有的按钮都绑定了点击事件
	$("button").click(function() {
		// 2. 当前的元素变化背景颜色
		$(this).css("background", "pink");
		// 3. 其余的兄弟去掉背景颜色 隐式迭代
		$(this).siblings("button").css("background", "");
	});
})

​ 淘宝服饰精品案例分析

​ 核心原理∶鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。

​ 需要得到当前小li的索引号，就可以显示对应索引号的图片

​ JQuery得到当前元素索引号$(this).index()

​ 中间对应的图片，可以通过eq(index)方法去选择

​ 显示元素show()隐藏元素hide()

$(function () {
	// 1. 鼠标经过左侧的小li 
	$("#left li").mouseover(function () {
		// 2. 得到当前小li 的索引号
		var index = $(this).index();
		console.log(index);
		// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
		// $("#content div").eq(index).show();
		// 4. 让其余的图片（就是其他的兄弟）隐藏起来
		// $("#content div").eq(index).siblings().hide();
		// 链式编程
		$("#content div").eq(index).show().siblings().hide();
	})
})

JQuery样式操作

操作css方法

JQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。

​ (1) 参数只写属性名，则是返回属性值

​ $(this).css(“color”);

​ (2) 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

​ $(this).css(“color”,“red”); // 属性名属性值加引号，中间逗号隔开

​ (3) 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，

​ $(this).css(“color”:“white” ,“font-size”:" 20px"):

​ $(“div”).css(width: 400,height: 400,backgroundColor: “red” })

​ 注意： 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

设置class类方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

​ $(“div” ).addClass(“current”); // 添加类

​ $( “div” ).removeClass(“current”); // 移除类

​ $(“div” ).toggleClass(“current”); // 切换类（没有则添加，有则删除）

类操作与className区别

原生JS中 className会覆盖元素原先里面的类名。

JQuery里面类操作只是对指定类进行操作，不影响原先的类名。

JQuery样式切换拓展案例

tab栏切换

​ 点击上部的li，当前li添加current类，其余兄弟移除类。

​ 点击的同时，得到当前li的索引号

​ 让下部里面相应索引号的item显示，其余的item隐藏

$(function () {
	// 1.点击上部的li，当前li 添加current类，其余兄弟移除类
	$(".tab_list li").click(function () {
		// 链式编程操作，当前元素赋予current类，其余兄弟消除current类
		$(this).addClass("current").siblings().removeClass("current");
		// 2.点击的同时，得到当前li 的索引号
		var index = $(this).index();
		console.log(index);
		// 3.让下部里面相应索引号的item显示，其余的item隐藏
		$(".tab_con .item").eq(index).show().siblings().hide();
	});
})

JQuery效果

JQuery给我们封装了很多动画效果，最为常见的如下:

效果 方法

方法	描述
show()，hide()，toggle()	显示隐藏
slideDown()，slideUp()，slideToggle()	滑动
fadeln()，fadeOut()，fadeToggle()，fadeTo()	淡入淡出
animate()	自定义动画

语法规范：参数为 执行时间，匀速/快/慢，回调函数

用法	描述
show ( [speed,[easing] , [fn] ])	显示
hide ( [speed,[easing] , [ fn]])	隐式
toggle ( [ speed, [easing] , [fn]])	显隐式切换
slideDown ( [speed, [easing] , [fn]])	下滑
slideUp( [speed,[easing] , [fn]])	上滑
slideToggle( [speed , [easing] ,[fn]])	上下滑动切换
fadeIn ( [speed, [easing] , [fn]])	淡入
fadeout ( [speed, [easing],[fn] ])	淡出
fadeToggle( [speed, [easing] , [fn]])	淡入淡出切换
fadeTo([speed,transparency], [fn]])	透明度（速度，透明效果，回调函数）
animate(params , [ speed] , [easing] ,[fn])	自定义动画（样式对象，执行时间，匀速/快/慢，回调函数）

animate自定义动画

animate(params , [ speed] , [easing] , [fn])

• params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

• speed : 三种预定速度之一的字符串(“slow”, “nomal”,or“fast”)或表示动画时长的毫秒数值(如:1000)。

• easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

​ (1) 参数都可以省略，无动画直接显示。

​ (2) speed :三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如:∶1000)。

​ (3) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”.

​ (4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

​ (5) transparency：透明效果在 [0-1] 区间内设置透明度，0为原效果，1为无透明

​ (6) params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其除参数都可以省略。

​ 一般情况下，我们都不加参数直接显示隐藏

事件切换

hover([over,]out)

​ over:鼠标移到元素上要触发的函数(相当于mouseenter )

​ out:鼠标移出元素要触发的函数（相当于mouseleave )

​ 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

​ 停止排队

​ stop()

​ (1) stop()方法用于停止动画或效果。

​ (2) 注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

JQuery效果拓展案例

鼠标移入图片，其他图片透明度降低，移除复原

$(function () {
	//鼠标进入的时候,其他的li标签透明度：0.5
	$(".wrap li").hover(function () {
		$(this).siblings().stop().fadeTo(400, 0.5);
	}, function () {
		// 鼠标离开，其他li 透明度改为 1
		$(this).siblings().stop().fadeTo(400, 1);
	})
});

点击按钮，使当前盒子变化下移500px，右移300px，宽改变为500ox，透明度0.5、

$(function() {
	$("button").click(function() {
		$("div").animate({
			left: 500,
			top: 300,
			opacity: 0.4,
			width: 500
		}, 500);
	})
})

手风琴效果

鼠标经过某个小li有两步操作:

​ 当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入

​ 其余兄弟小li宽度变为69px ，小图片淡入，大图片淡出

$(function () {
	// 鼠标经过某个小li 有两步操作：
	$(".king li").mouseenter(function () {
		// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
		$(this).stop().animate({
			width: 224
		}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
		// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
		$(this).siblings("li").stop().animate({
			width: 69
		}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
	})
});

JQuery属性操作

设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href，比如元素里面的type

prop获取固有属性

• prop(“属性”") // 获取属性语法

• prop(“属性”;“属性值”") // 设置属性语法

设置或获取元素自定义属性attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index = “1”。

attr()获取自定义属性

• attr("属性”) // 类似原生getAttribute() 获取属性语法

• attr(““属性”,“属性值””) //类似原生setAttribute() 设置属性语法

数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

• data(“name” ,“value”) //向被选元素附加数据 附加数据语法

• date(“name”) //向被选元素获取数据 获取数据语法

同时，还可以读取HTML5自定义属性data-index，得到的是数字型

注意：这个方法获取data-index h5自定义属性，属性不用写data- 而且返回的是数字型

attr(“data-index”) === data(“index”) // 获取data-index属性

JQuery属性操作拓展案例

购物车案例模块-全选分析

​ 全选思路∶里面3个小的复选框按钮( j-checkbox )选中状态( checked )跟着全选按钮 ( checkall )走。

​ 因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。

​ 把全选按钮状态赋值给3小复选框就可以了

​ 当我们每次点击小的复选框按钮，就来判断:

​ 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。

​ :checked选择器:checked查找被选中的表单元素。

$(function () {
	// 1. 全选 全不选功能模块
	// 就是把全选按钮（checkall）的状态赋值给三个小的按钮(j-checkbox）就可以了
	// 改变事件 change
	$(".checkall").change(function () {
		$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
	})
	// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
	// 通过被选中复选框的值改变全选框按钮
	// $(".j-checkbox").length 这个是所有的小复选框的个数
	$(".j-checkbox").change(function () {
		// .j-checkbox:checked选中状态的复选框
		if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
		$(".checkall").prop("checked", true);
	} else {
		$(".checkall").prop("checked", false);
	}
})

JQuery文本属性值

主要针对元素的内容还有表单的值操作。

普通元素内容html)(相当于原生inner HTML)

• html() // 获取元素的内容

• html(“内容”) //设置元素的内容

普通元素文本内容text)(相当与原生innerText)

• text() //获取元素的文本内容

• text("“文本内容”) //设置元素的文本内容

表单的值val((相当于原生value)

• val() // 获取元素的value值

• val(“内容”) // 设置元素的value值

toFixed(n) // 保留小数n位

JQuery文本属性拓展案例

购物车案例模块-增减商品数量分析

​ 核心思路∶首先声明一个变量，当我们点击+号( increment )，就让这个值++，然后赋值给文本框。

​ 注意1:只能增加本商品的数量，就是当前+号的兄弟文本框( itxt )的值。

​ 修改表单的值是val()方法

​ 注意2∶这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值

​ 减号(decrement )思路同理，但是如果文本框的值是1，就不能再减了。

​ 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。

$(".increment").click(function () { // 加号
	// 得到兄弟文本框的值
	var n = $(this).siblings(".itxt").val();
	n++;
	$(this).siblings(".itxt").val(n);
})
$(".decrement").click(function () { // 减号
	var n = $(this).siblings(".itxt").val();
	if (n == 1) {
		return false; // 商品数量为1 退出点击事件
	}
	n--;
	$(this).siblings(".itxt").val(n);
})

购物车案例模块-修改商品小计分析

​ 核心思路:每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计

​ 注意1:只能增加本商品的小计，就是当前商品的小计模块( p-sum )

​ 修改普通元素的内容是text0方法

​ 当前商品的价格，要把￥符号去掉再相乘截取字符串substr(1)

​ 最后计算的结果如果想要保留2位小数通过toFixed(2)方法

​ parents(‘选择器’)可以返回指定祖先元素

​ 用户也可以直接修改表单里面的值，同样要计算小计。

​ 用表单change事件用最新的表单内的值乘以单价即可但是还是当前商品小计

​ 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。

$(".increment").click(function () { // 加号
	// 得到兄弟文本框的值
	var n = $(this).siblings(".itxt").val();
	n++;
	$(this).siblings(".itxt").val(n);
	// 3.1 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
	// var p = $(this).parent().parent().siblings(".p-price").html();
	// parents(‘选择器’)可以返回指定祖先元素  toFixed(n) 保留小数n位
	var p = $(this).parents(".p-num").siblings(".p-price").html();  // 单价
	price = (n * p.substr(1)).toFixed(2);
	$(this).parent().parent().siblings(".p-sum").html("￥" + price);
})
// 4. 用户修改文本框的值 计算 小计模块 
$(".itxt").change(function () {
	var n = $(this).val(); // 获取修改后的值
	var p = $(this).parents(".p-num").siblings(".p-price").html();
	price = (n * p.substr(1));
	$(this).parent().parent().siblings(".p-sum").html("￥" + price.toFixed(2));
})

JQuery元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

JQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1:

​ $( “div”" ).each (function (index,domEle){ xXx; })

​ each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个

​ 里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象，不是JQuery对象

​ 所以要想使用JQuery方法，需要给这个dom元素转换为JQuery对象$(domEle)

语法2∶

​ $.each (object , function (index, element) { xxx; })

​ $.each(方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

​ 里面的函数有2个参数: index是每个元素的索引号; element遍历内容

​ 主要用于遍历数据，处理数据

var arr = ["red", "green", "blue"];
$.each(arr, function(i, ele) {
	console.log(i); // 0,1,2
	console.log(ele); // red,green,blue
})
$.each({
	name: "andy",
	age: 18
}, function (i, ele) {
	console.log(i);   // i输出的是 name age 属性名
	console.log(ele);  // ele 输出的是 andy 18 属性值
})

创建元素

​ $("<li></li>"); // 动态的创建了一个

• 添加元素

  内部添加

  ​ element.append(“内容”) // 内部添加append(); 并且放到内容的最后面

  ​ element.prepend(“内容”); // 内部添加prepend(); 并且放到内容的最前面

  外部添加

  ​ element.after(“内容”); //把内容放入目标元素后面

  ​ element.before(“内容”); //把内容放入目标元素前面

  内部添加元素，生成之后，它们是父子关系。

  外部添加元素，生成之后，他们是兄弟关系。

  ​ $(“ul”).append(li); // ul内部最后面添加li元素

  ​ $(“div”).after(span); // 在div后面添加span元素

  删除元素

  ​ element.remove() //删除匹配的元素(〔本身）

  ​ element.empty() //删除匹配的元素集合中所有的子节点

  ​ element.htmI(“”) //清空匹配的元素内容 可以删除匹配的元素里面的子节点

  元素操作拓展案例

  遍历盒子变色

  遍历三个盒子的设置不同的颜色，并把三个盒子的值相加

  $(function() {
  	// $("div").css("color", "red");
  	// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
  	var sum = 0;
  	// 1. each() 方法遍历元素 
  	var arr = ["red", "green", "blue"];
  	$("div").each(function(i, domEle) {
  		// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
  		// 回调函数第二个参数一定是 dom元素对象 也是自己命名
  		// domEle.css("color"); dom对象没有css方法
  		$(domEle).css("color", arr[i]); // 遍历设置颜色
  		sum += parseInt($(domEle).text()); // 计算和
  	})
  })
  

  购物车案例模块-计算总计和总额

  ​ 核心思路:把所有文本框里面的值相加就是总计数量。总额同理

  ​ 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可

  ​ 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额

  ​ 因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。

  ​ 注意1：总计是文本框里面的值相加用val()总额是普通元素的内容用text()

  ​ 注意2：普通元素里面的内容要去掉￥并且转换为数字型才能相加

  ​ // 5. 计算总计和总额模块

  function getSum() {
  	var count = 0; // 计算总件数
  	var money = 0; // 计算总价钱
  	$(".itxt").each(function (i, ele) { // i索引号 ele元素
  		count += parseInt($(ele).val());
  	});
  	$(".amount-sum em").text(count);
  	$(".p-sum").each(function (i, ele) {
  		money += parseFloat($(ele).text().substr(1)); // 取值，去除￥符号
  	});
  	$(".price-sum em").text("￥" + money.toFixed(2)) // 保留两位小数
  };
  

  购物车案例模块-删除商品模块

  ​ 核心思路:把商品remove)删除元素即可

  ​ 有三个地方需要删除：1.商品后面的删除按钮⒉删除选中的商品3.清理购物车

  ​ 商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发

  ​ 删除选中的商品：先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品

  ​ // 6. 删除商品模块

  $(".p-action a").click(function () { // 商品后面的删除按钮
  	$(this).parents(".cart-item").remove();
  	getSum() // 计算总计
  });
  $(".remove-batch").click(function () { // 删除选中的商品
  	// .j-checkbox:checked选中状态的复选框
  	$(".j-checkbox:checked").parents(".cart-item").remove();
  	getSum() // 计算总计
  });
  $(".clear-all").click(function () { // 清空购物车 删除全部商品
  	$(".cart-item").remove();
  	getSum() // 计算总计
  });
  

  购物车案例模块-选中商品添加背景

  ​ 核心思路:选中的商品添加背景，不选中移除背景即可

  ​ 全选按钮点击∶如果全选是选中的，则所有的商品添加背景，否则移除背景

  ​ 小的复选框点击︰如果是选中状态，则当前商品添加背景，否则移除背景

  ​ 这个背景，可以通过类名修改，添加类和删除类

  if ($(this).prop("checked")) { // 选中添加check-cart-item类
  	$(".cart-item").addClass("check-cart-item");
  } else { // 没选中移除check-cart-item类
  	$(".cart-item").removeClass("check-cart-item");
  }
  

  JQuery尺寸、位置操作

  JQuery尺寸

  用法	描述
  width() / height()	取得匹配元素宽度和高度值只算width / height
  innerWidth() / innerHieght()	取得匹配元素宽度和高度值包含 padding
  outerWidth() / outerHeight()	取得四配元素宽度和高度值包含padding . border
  outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含 padding . borde、margin

  以上参数为空，则是获取相应值，返回的是数字型。

  如果参数为数字，则是修改相应值。

  参数可以不必写单位。

  JQuery位置

  位置主要有三个: offset(). position(). scrollTop()/scrollLeft()

  offset()设置或获取元素偏移

  ​ (1) offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

  ​ (2) 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。

  ​ (3) 可以设置元素的偏移: offset(f top: 10, left: 30 };

  $(".son").offset({
  	top: 200, // 设置头部偏移200像素
  	left: 200 // 设置左偏移200像素
  });
  

  Position()获取元素偏移

  ​ (1) position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

  ​ (2) 该方法有2个属性left、top。position().top用于获取距离最近相对定位的父级元素头部的距离，position().left用于获取距离最近相对定位的父级元素左侧的距离。

  ​ (3) 这个方法只能获取不能设置偏移

  $(".son").position({
  	top: 200, // 无效
  	left: 200 // 无效
  });
  

  scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

  scrollTop()方法设置或返回被选元素被卷去的头部距离。

  scrollLeft()方法设置或返回被选元素被卷去的左侧距离。

  JQuery位置操作拓展案例

  带有动画的返回顶部

  ​ 页面向下滚动到返回顶部盒子距离时，出现返回顶部，点击后慢慢返回顶部

  ​ 核心原理:使用animate动画返回顶部（animate(obj, target, callback)）。

  ​ 但是是元素做动画，因此$(“body,html" ).animate([scrollTop: 0))

  ​ animate函数封装obj目标对象 target 目标位置 callback回调函数

  ​ animate动画函数里面有个scrollTop属性，可以设置位置

  $(function () {
  	var boxTop = $(".container").offset().top; // 返回顶部盒子高度
  	$(window).scroll(function () {
  		// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
  		// 可以设置和获取
  		if ($(window).scrollTop() >= boxTop) {
  			// console.log("已到达");
  			$(".back").fadeIn(); // 返回顶部淡入
  		} else {
  			$(".back").fadeOut(); // 返回顶部淡出
  		}
  	});
  	$(".back").click(function () {
  		// animate(obj, target, callback)
  		// animate函数封装obj目标对象 target 目标位置 callback回调函数
  		// 但是是元素做动画，因此$(“body, html" ).animate([scrollTop: 0))
  		$("body,html").animate({ scrollTop: 0 });
  	})
  })
  

  品优购电梯导航

  ​ 当我们滚动到今日推荐模块，就让电梯导航显示出来

  ​ 点击电梯导航页面可以滚动到相应内容区域

  ​ 核心算法:因为电梯导航模块和内容区模块——对应的

  ​ 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号

  ​ 就可以把animate要移动的距离求出来∶当前索引号内容区模块它的offset().top

  ​ 然后执行动画即可

  ​ 当我们点击电梯导航某个小li，当前小li添加current类，兄弟移除类名

  ​ 当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小i模块，也会添加current类，兄弟移除current类。

  ​ 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。

  ​ 需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号

  ​ 判断的条件:被卷去的头部大于等于内容区域里面每个模块的offset().top

  ​ 就利用这个索引号找到相应的电梯导航小li添加类。

  $(function () {
  
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current，通过节流阀判定互斥
  	// 1. 显示隐藏电梯导航
  	var toolTop = $(".recommend").offset().top; // 推荐服务盒子高度
  	var flag = true; // 节流阀 互斥锁 
  	toggleTool();
  	function toggleTool() { // 封装电梯导航展示效果
  		if ($(document).scrollTop() >= toolTop) {
  			$(".fixedtool").fadeIn();
  		} else {
  			$(".fixedtool").fadeOut();
  		};
  	}
  	$(window).scroll(function () {
          toggleTool(); // 调用函数
          // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
          // 通过each遍历四个大模块
          $(".floor .w").each(function (i, ele) {
              if ($(document).scrollTop() >= $(ele).offset().Top) { // 判断已到达大模块位置
              $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
          }
  	})
  	if (flag) { // 节流阀，避免点击时页面跳动
          $(".floor .w").each(function (i, ele) {
              if ($(document).scrollTop() >= $(ele).offset().top) {
                  $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
              }
          })
  	}
  })
  // 2. 点击电梯导航页面可以滚动到相应内容区域
  $(".fixedtool li").click(function () {
  	flag = false; // 节流阀，点击时不执行页面滚动判断
  	// var index = $(this).index(); 获取点击元素索引值
  	var current = $(".floor .w").eq($(this).index()).offset().top;
  	// 页面动画滚动效果
  	$("body,html").stop().animate({
  		scrollTop: current
  	}, function () {
  		flag = true; // 节流阀，点击跳转动画执行完毕时执行页面滚动判断
  	});
  	// 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
  	$(this).addClass("current").siblings().removeClass("current");
  	})
  })