拓展案例
JQuery选择器：排它思想-按钮变色
点击按钮当前元素变色，其他元素回复正常
通过隐式迭代和siblings兄弟元素，变化自己，清除其他
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
JQuery选择器：淘宝服饰精品案例分析
核心原理∶鼠标经过左侧盒子某个小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样式：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效果：手风琴效果
鼠标经过某个小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元素操作：购物车案例模块
购物车案例模块-计算总计和总额
核心思路:把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同，如果想要相加需要用到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位置操作：带有动画的返回顶部
页面向下滚动到返回顶部盒子距离时，出现返回顶部，点击后慢慢返回顶部
核心原理:使用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 });
})
})
JQuery位置操作：品优购电梯导航
当我们滚动到今日推荐模块，就让电梯导航显示出来
点击电梯导航页面可以滚动到相应内容区域
核心算法:因为电梯导航模块和内容区模块——对应的
当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
就可以把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");
})
})
本地存储： toDoList
文本框里面输入内容，按下回车，就可以生成待办事项。
点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
点击已完成事项复选框，就可以把当前数据添加到特办事项里面。
但是本页面内容刷新页面不会丢失。
刷新页面不会丢失数据，因此需要用到本地存储localStorage
核心思路∶不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
存储的数据格式: var todolist = [title: 'xxx’, done: false]]
注意点1∶本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)。
注意点2∶获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。
切记︰页面中的数据，都要从本地存储里面获取，这样刷断页面不会丢失数据，所以先要把数据保存到本地存储里面。
利用事件对象.keyCode判断用户按下回车键(13)。声明一个数组，保存数据。
先要读取本地存储原来的数据(声明函数getData()，放到这个数组里面。之后把最新从表单获取过来的数据，追加到数组里面。
最后把数组存储给本地存储(声明函数savaDate0)
toDoList本地存储数据渲染加载到页面
因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
先要读取本地存储数据。(数据不要忘记转换为对象格式)
之后遍历这个数据($.each0 )，有几条数据，就生成几个小li添加到ol里面。
每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据。
toDoList删除操作
点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
核心原理∶先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
我们可以给链接自定义属性记录当前的索引号
根据这个索引号删除相关的数据----数组的splice(i, 1)方法
存储修改后的数据，然后存储给本地存储
重新渲染加载数据列表
因为a是动态创建的，我们使用on方法绑定事件
toDoList正在进行和已完成选项操作
当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
点击之后，获取本地存储数据。
修改对应数据属性done为当前复选框的checked状态。
之后保存数据到本地存储重新渲染加载数据列表
load加载函数里面，新增一个条件如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
如果当前数据的done为false，则是待办事项，就把列表渲染加载到ol里面
toDoList统计正在进行个数和已经完成个数
在我们load函数里面操作
声明2个变量: todoCount待办个数doneCount 已完成个数
当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++,否则doneCount++
$(function () {
// 1. 按下回车 把完整数据 存储到本地存储里面
// 存储的数据格式 var todolist = [{title: "xxx", done: false}]
load(); // 页面加载调用
$("#title").on("keydown", function (e) {
if (e.keyCode == 13) {
var local = getDate(); // 把本地存储中的数据返回给local
// 把local数组进行更新数据 把最新的数据追加给local数组
local.push({ title: $(this).val(), done: false });
// 把这个数组local 存储给本地存储
setDate(local);
load();
$(this).val(""); // 清空输入框内容
}
})
// 3. toDoList 删除操作
$("ol, ul").on("click", "a", function () {
// 先获取本地存储
var data = getDate();
// 修改数据
var index = $(this).attr("id"); // 获取点击元素的索引号
// splice(index,num) 删除数组元素，从索引号index开始，删除num个
data.splice(index, 1);
// 保存到本地存储
setDate(data);
// 重新渲染页面
load();
})
// 4. toDoList 正在进行和已完成选项操作
$("ol ,ul").on("click", "input", function () {
// 先获取本地存储的数据
var data = getDate();
// 修改数据
var index = $(this).siblings("a").attr("id");
data[index].done = $(this).prop("checked"); // 把当前复选框状态传递给本地数据
console.log(data);
// 保存到本地存储
setDate(data);
// 重新渲染页面
load();
})
// 读取本地存储数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data) {
// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
return JSON.parse(data);
} else {
return [];
}
}
// 保存本地存储数据
function setDate(data) {
// localStorage.setItem(key, value); 保存本地存储数据
// 本地存储只识别字符串格式，数据转成字符串个事
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加载数据
function load() {
// 读取本地存储的数据
var data = getDate();
// 遍历之前先要清空ol里面的元素内容
$("ol, ul").empty();
var todoCount = 0; // 正在进行的个数
var doneCount = 0; // 已经完成的个数
// 遍历这个数据
$.each(data, function (i, n) {
// console.log(n);
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
todoCount++;
}
});
$("#todoCount").text(todoCount);
$("#donecount").text(doneCount);
}
})
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
