01- 自定义动画
$('div').animate({},时间,function(){})
$(function(){
$("button").click(function(){
$("div").animate(
{width:600,height:600},
5000,
function(){
console.log("动画结束");
}
)
})
})
02- 手风琴案例
一、鼠标移入某li块后在下一个动画开始之前加stop停止当前动作后摇$(this).stop()
二、添加动画animate({width:224})
三、接着去查找当前元素中属性 class 为 "big" 的子元素(即当前元素的直接子元素,且其 class 为"big"),然后停止之前的动画(如果有的话)find(".big").stop()
四、若找到 "big" 子元素,将其显示出来find(".big").stop().show()
五、接着,查找当前元素中属性 class 为 "small" 的兄弟元素(即当前元素的同级元素,且其 class 为 "small")。.siblings(".small")
六、停止之前的动画(如果有的话),然后将其隐藏起来。siblings(".small").stop().hide()
$(function(){
$(".king li").mouseenter(function(){
// 鼠标移入
// 在下一个动画开始之前加stop停止当前动作后摇
$(this).stop().animate({width:224}).find(".big").stop().show().siblings(".small").stop().hide()
})
$(".king li").mouseleave(function(){
// 鼠标移出
$(this).stop().animate({width:69}).find(".big").stop().hide().siblings(".small").stop().show()
})
})
03- 遍历
$.each(obj,function(key,value){})
$.each(对象,function(){})--遍历
$(function(){
var arr = ["a","b","c"]
var obj = {a:1,b:2,c:3}
// $.each(对象,function(){})--遍历
$.each(obj,function(key,value){
console.log(key,value);
})
$.each(arr,function(index,item){
console.log(index,item);
})
})
案例7:购物车综合案例
一、首先是全选功能,2个全选按钮是同步的,全选时所有按钮都被选中
$(".checkall").change(function(){
$(".checkall,.j-checkbox").prop("checked",$(this).prop("checked"))
if($(this).prop("checked")){
console.log(1);
$(".cart-item").addClass("check-cart-item");
}
else{
$(".cart-item").removeClass("check-cart-item");
}
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
})
注:在这段代码中,prop()是jQuery提供的方法,用于获取或设置匹配元素的属性值。在上述代码中,prop()被用于设置匹配元素的checked属性值,也就是勾选状态。具体来说,代码中的$(this)指代当前选中的元素,$(this).prop("checked")用于获取当前元素的勾选状态,然后将此勾选状态设置给class为"checkall"和"j-checkbox"的元素的checked属性,以实现全选功能。
这里要说明的是:调用了sumFn()方法,要提前进行定义
定义一个p来存储每个商品的price,i为被勾选的商品类别数量
var p = $(domEle).text().substr(1)-0;
if($(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")){
sum += p;
i++;
}
这段代码中,$(domEle)
表示选中的某一个元素,.siblings(".p-checkbox")
表示选中该元素兄弟节点中class为".p-checkbox"的元素,.children(".j-checkbox")
表示选中兄弟节点中class为.p-checkbox
元素的子元素中class为.j-checkbox
的元素。也就是说,该if语句是用来检查和计算是否有同组商品被选中的功能。具体来说:
-
$(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")
检查domEle下的同组商品中是否有被选中的项,并返回布尔值,如果有被选中的项,返回true,否则返回false。 -
如果同组商品中有被选中的项,那么代码块中的语句
sum += p;
和i++;
将被执行。其中,sum += p;
用于将该商品的价格累加到总价sum
中,i++;
用于计算同组商品中被选中的数量。因此,该代码块的作用是累加同组商品中所有被勾选中的商品的总价,并计算被勾选的商品数量。 -
$(".amount-sum em").text(i); return sum;
实时显示被选中的商品数量
// 计算总价的方法
function sumFn(){
// 计算总体价格--3合一(遍历3个sum)
var sum = 0;
var i = 0 ;
// 勾选才算钱,不勾选不算钱
$(".p-sum").each(function(index,domEle){
var p = $(domEle).text().substr(1)-0;
if($(domEle).siblings(".p-checkbox").children(".j-checkbox").prop("checked")){
sum += p;
i++;
}
})
$(".amount-sum em").text(i);
return sum;
}
其次,要为选中的模块添加背景颜色,即添加类,该类包含background
$(".cart-item").addClass("check-cart-item");
最后计算总价及商品数量在右下角显示
$(".price-sum").children("em").text(sumFn());
在这段代码中,text()是jQuery提供的方法,用于设置或获取匹配元素的文本内容。在上述代码中,text()被用于设置class为"price-sum"的元素下的子元素em的文本内容。具体来说,代码中的sumFn()用于计算某些数据的总和,然后将总和的值作为文本内容设置给class为"price-sum"的元素下的子元素em。这就是将某个元素的文本内容设置为指定的值的功能。
二、有一个不选全选取消,全选所有的j-checkbox小框就全选按钮也被勾选
// 有一个不选全选取消,全选就全选
$(".j-checkbox").change(function(){
// console.log($(".j-checkbox").length,$(".j-checkbox:checked").length);
if($(".j-checkbox").length === $(".j-checkbox:checked").length){
$(".checkall").prop("checked",true);
$(".cart-item").addClass("check-cart-item");
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
else{
$(".checkall").prop("checked",false);
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
if($(this).prop("checked")){
console.log(1);
$(this).parents(".cart-item").addClass("check-cart-item");
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
else{
$(this).parents(".cart-item").removeClass("check-cart-item");
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
})
全选时则重复上述的全选功能
else则为没有全选,将.checkall的checked置为false$(".checkall").prop("checked",false);
同时计算剩余被勾选的商品总价$(".price-sum").children("em").text(sumFn());
最后是被选中的商品的background更改-->为其添加类即可
$(this).parents(".cart-item").addClass("check-cart-item");
if($(this).prop("checked")){
console.log(1);
$(this).parents(".cart-item").addClass("check-cart-item");
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
else{
$(this).parents(".cart-item").removeClass("check-cart-item");
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
}
若单独的j-checkbox被点击,并没有全选,则要重新计算总价以及更新backgroundColor类,还有勾选商品的类数
$(this).parents(".cart-item").addClass("check-cart-item");背景置黄,被选中
计算剩余商品的总价与候选的商品数量:
$(".price-sum").children("em").text(sumFn());
注意的是:候选商品数量被写进了sumFn()方法中:$(".amount-sum em").text(i);
也就是说,每一次计算总价,商品数量的栏都会被实时更新
三、为每类商品的数量button的增减设置功能
类别itext为该input的class类:
减少功能:
// 减少数量
$(".decrement").click(function(){
// 点击减少,需要取出input里的val值
var loss = $(this).siblings(".itxt").val();
// console.log(loss);
// 每一次点击都要--,并再次赋值给input
loss--;
if(loss<=0){
loss =1;
return;
}
$(this).siblings(".itxt").val(loss);
fn(this,loss);
})
点击减号时,先取出input里的值var loss = $(this).siblings(".itxt").val();
然后loss--,input里的text值被修改
边界:若loss<=0时,置loss=1,为最小值
最后将更新的loss值放回到input的text中:$(this).siblings(".itxt").val(loss);
注:结果的fn()方法为计算input数量后,每种商品小计的分总价格方法
// 封装一个方法来算小计的钱
function fn(dom,n){
// 先取值
var p = $(dom).parents(".p-num").siblings(".p-price").text().substr(1);
$(dom).parents(".p-num").siblings(".p-sum").text("¥"+p*n)
$(".price-sum").children("em").text(sumFn())
}
(1)首先要取出单价:var p = $(dom).parents(".p-num").siblings(".p-price").text().substr(1);
(2)计算小计:$(dom).parents(".p-num").siblings(".p-sum").text("¥"+p*n)
(3)重新计算总价:$(".price-sum").children("em").text(sumFn())
增加功能
// 增加数量
$(".increment").click(function(){
// 点击增加,需要取出input里的val值
var add = $(this).siblings(".itxt").val();
// 每一次点击都要++,并再次赋值给input
add++;
$(this).siblings(".itxt").val(add);
fn(this,add);
})
四、为删除任意商品添加功能
// 操作中的删除功能
$(".p-action a").click(function(){
$(this).parents(".p-action").parents(".cart-item").remove();
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
})
删除后仍需要计算总价
五、为删除勾选商品添加功能
// 删除选中的商品
$(".remove-batch").click(function(){
// 遍历所有选中的商品并删除
$(".cart-item").each(function(index,domEle){
if($(domEle).hasClass("check-cart-item")){
$(domEle).remove();
}
})
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
})
遍历每一个cart-item类中包含背景颜色的类即为被勾选的商品-->并删除
if($(domEle).hasClass("check-cart-item")){
$(domEle).remove();
}
删除后仍需要计算总价
六、为清空购物车按钮添加功能
// 清空购物车
$(".clear-all").click(function(){
$(".cart-item").each(function(index,domEle){
$(domEle).remove();
})
// 计算剩余商品的总价与候选的商品数量
$(".price-sum").children("em").text(sumFn());
})
删除后仍需要计算总价