PC电商购物车结算页面
<script>
$(function() {
// 全选功能：让复选项的状态和全选按钮保持一致：
// 1：让子按钮的选中状态和全选按钮状态保持一样：全选按钮绑定change事件，j-checkbox 中的checkall的固有属性checked，就是自己的选中状态
// 2：判断自己的固有属性选中状态，(默认是true)，就让cart-item添加类样式check-cart-item被选中
// 反之cartitem移除类样式，取消高亮效果
$('.checkall').change(function() {
$('.j-checkbox, .checkall').prop("checked", $(this).prop('checked'))
if ($(this).prop('checked')) {
$('.cart-item').addClass('check-cart-item')
} else {
$('.cart-item').removeClass('check-cart-item')
}
})
// 复选功能：复选全被勾选，全选按钮也会被勾选，并让商品的背景用高亮
// 3：复选框的chang事件，如果复选框的选中状态的长度===复选框的个数，就让全选的选中固有属性选中，反之不选中
// 4：如果自己的固有选中状态被选中，就让自己父元素中的cart-item添加check-cart-item高亮起来，反之不高亮
$('.j-checkbox').change(function() {
if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
$('.checkall').prop('checked', true)
} else {
$('.checkall').prop('checked', false)
}
if($(this).prop('checked')) {
$(this).parents('.cart-item').addClass('check-cart-item')
} else {
$(this).parents('.cart-item').removeClass('check-cart-item')
}
})
// +添加商品：修改输入框中的数值和p-sum中的价格
// increment减号点击事件，获取到自己兄弟元素.itxt的val值，赋值给n，让n++，再将n设置到itxt的val中
// 获取到自己父元素p-sum的兄弟元素pprice的html，赋值给p，对p进行substr截取掉￥,用(p*n)使用toFxied保留2位小数，
// 再将自己的￥+price拼接到自己父元素的兄弟元素p-sum去展示。调用getsum求和
$('.increment').click(function() {
var n = $(this).siblings('.itxt').val()
n++
$(this).siblings('.itxt').val(n)
var p = $(this).parents('.p-num').siblings('.p-price').html()
p = p.substr(1)
var price = (p * n).toFixed(2)
$(this).parents('.p-num').siblings('.p-sum').html('￥' + price)
getSum()
})
// - 减号事件：修改输入框和商品的价格：
// .decrement 减号点击事件，获取到自己兄弟元素输入框的值，赋值给n，如果n==1表示不能在减了，就return false阻止点击事件。
// n--每次点击自减，将n的结果展示到输入框中，
// 创建p，获取到自己父元素p-sum的兄弟p-price的html内容，先截取掉￥，然后再展示回去，用￥+(p*n).toFixed拼接的方式展示到价格中，最后调用getsum求和
$('.decrement').click(function() {
var n = $(this).siblings('.itxt').val()
if (n == 1) {
return false
}
n--
$(this).siblings('.itxt').val(n)
var p = $(this).parents('.p-num').siblings('.p-price').html()
p = p.substr(1)
$(this).parents('.p-num').siblings('.p-sum').html('￥' + (p * n).toFixed(2))
getSum()
})
// 输入框修改数值，商品价格跟随改变
// .itxt的change事件，获取到自己的值赋值给n，再获取到自己父元素p-num的兄弟p-price的内容
// 截取掉￥,将拼接后的结果保留2位小数，展示到自己父元素p-num的兄弟元素psum的html中，最后调用getSum函数求和
$('.itxt').change(function() {
var n = $(this).val()
var p = $(this).parents('.p-num').siblings('.p-price').html()
p = p.substr(1)
$(this).parents('.p-num').siblings('.p-sum').html('￥' + (p * n).toFixed(2))
getSum()
})
// 封装求和，each遍历方式去拿输入框的数量和商品的总价格
// 封装getSum函数，新建count为0，和money为0，
// 对itxt使用each进行遍历，参数1 i是下标， ele是输入框自己，count+= 就是元素自己的值，并parseInt取整
// 将count数量展示到.amount-sum的 em元素中展示
// 使用each对p-sum遍历，让moeny+=保留小数并截取第一位数，赋值给money。将money保留2位小数展示到em中
getSum()
function getSum() {
var count = 0
var money = 0
$('.itxt').each(function(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))
}
// 删除商品：点击p-action 中的a，让自己的父元素cart-item自杀掉，调用getSum
$('.p-action a').click(function() {
$(this).parents('.cart-item').remove()
getSum()
})
// 删除多件商品：点击renove-batch让复选框状态被选中的父元素cart-item自杀掉，调用getSum
$('.remove-batch').click(function() {
$('.j-checkbox:checked').parents('.cart-item').remove()
getSum()
})
// 清空购物车：点击clear-all清空按钮，让所有的cart-item自杀掉，调用getSum
$('.clear-all').click(function() {
$('.cart-item').remove()
getSum()
})
})
</script>
商品电梯导航
$(function () {
// 创建节流阀，创建toolTop接收recommend的距离页面的顶部的距离，调用toggelTool函数
var flag = true;
var toolTop = $('.recommend').offset().top;
toggleTool();
// 封装函数，显示与隐藏电梯：
// 封装toggleTool函数，判断页面scrollTop>=toolTop超出了就淡入fixedtool电梯，反之隐藏
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$('.fixedtool').fadeIn();
} else {
$('.fixedtool').fadeOut();
}
}
// 监听页面滚动事件，根据商品区域显示对应的楼层：
// 监听window.scroll事件，调用toggleTool函数，判断节流阀开启，each变量.floor 中的.w， 如果页面滚动出去的高度超出了每一层的ofset().top，就让fixedtool中的li，根据i添加current样式，兄弟元素移除样式
$(window).scroll(function () {
toggleTool();
if (flag) {
$('.floor .w').each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
$('.fixedtool li')
.eq(i)
.addClass('current')
.siblings()
.removeClass();
}
});
}
});
// 点击电梯楼层，滚动到对应的商品页面区域：
// .fixedtool li点击事件，关闭节流阀，创建current接收到floor .w根据自己的index获取到offset().top,获取到商品区域的当前位置
// body，html调用animate函数，让scrollTop:current，让页面滚动到当前页面的位置，回调函数中关闭节流阀，
// 并将自己添加高亮样式，移除兄弟的类样式
$('.fixedtool li').click(function () {
flag = false;
var current = $('.floor .w').eq($(this).index()).offset().top;
$('body, html')
.stop()
.animate(
{
scrollTop: current,
},
function () {
flag = false;
}
);
$(this).addClass('current').siblings().removeClass();
});
});
留言框案例
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul></ul>
</div>
<script>
$(function () {
// 按钮点击事件，动态创建li元素，设置li的hrml内容，就是输入框的内容+a标签,将li添加到ul中，slideDown下拉展示，并清空留言框中的内容
$('.btn').click(function () {
console.log(1);
var li = $('<li></li>');
li.html($('.txt').val() + '<a href="javascript:;">删除</a>');
$('ul').prepend(li);
li.slideDown();
$('.txt').val('');
});
// 在ul中给a绑定点击事件，获取到自己父元素先，使用slideUp中开启函数，让自己自杀掉
$('ul').on('click', 'a', function () {
$(this)
.parents('ul')
.slideUp(function () {
$(this).remove();
});
});
});
</script>
</body>
todolist案例
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input
type="text"
id="title"
name="title"
placeholder="添加ToDo"
required="required"
autocomplete="off"
/>
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box"></ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist"></ul>
</section>
<footer>Copyright © 2014 todolist.cn</footer>
<script
type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"
></script>
<script>
$(function () {
// 输入框事件，按下enter如果没有内容弹出提示，反之获取本地数据，向数组中插入一个对象，然后保存到本地中，在load更新页面。
// 1：加载load函数
// 2：监听#title的keydown事件，事件参数event，判断事e.keyCode键码如果相等于13，二层判断，如果自己输入的值等于空，弹出提示。反之调用getDate函数，将获取到的赋值给local
// 3：local.push,向数组中插入一个对象，title就是自己输入框的值，done默认是false， 调用saveDate将这个对象存储，调用load函数更新页面，然后将自己输入框的内容清空
$('#title').on('keydown', function (e) {
if (e.keyCode === 13) {
if ($(this).val() === '') {
alert('请输入内容');
} else {
var local = getDate();
local.push({ title: $(this).val(), done: false });
saveDate(local);
load();
$(this).val('');
}
}
});
// 删除任务：通过getDate获取数据，通过attr获取到id，使用splice删除1个，在保存和刷新。
// 4：给ol和ul中的a同时绑定点击事件，调用getDate获取本地数据赋值给date，获取到自己自定义属性id，赋值给id，data调用splice，根据index从数组中删除1项，调用saveDate函数保存数据， 调用load函数刷新页面
$('ol, ul').on('click', 'a', function () {
var date = getDate();
var id = $(this).attr('id');
date.splice(id, 1);
saveDate(date);
load();
});
// 点击input切换完成和未完成，获取数据，获取a标签的ID，让数组中的每一项根据id同步checked选中状态，完成数据保存，和load数据更新
// 5：给ol和ul中的input绑定点击事件，先通过getDate获取数据赋值给date，获取到自己兄弟元素的自定义属性id，赋值给index。让data[index].done 接收自己的固有属性checked保持一致，saveDate保存数据，load刷新页面数据
$('ol, ul').on('click', 'input', function () {
var data = getDate();
var id = $(this).siblings('a').attr('id');
data[id].done = $(this).prop('checked');
saveDate(data);
load();
});
// 获取本地数据，保存本地数据，load渲染数据
// 1：获取本地数据：
// 通过localStorage.getItem获取到todolist数组，赋值给data，判断如果data不是null，就使用JSON.parse将数据转换为对象并return返回。反之就返回一个空数组。
function getDate() {
var data = localStorage.getItem('todolist');
if (data !== null) {
return JSON.parse(data);
} else {
return [];
}
}
// 保存本地数据：赋值saveDate函数，形参是data，使用localStorage.setItem将名为todolist的数据保存，属性值用JSON.stringify转换为json字符串将data保存
function saveDate(data) {
localStorage.setItem('todolist', JSON.stringify(data));
}
// 封装load函数，首先通过getDate获取数据赋值给data，将ol和ul使用empty清空内容，创建2个新变量，todoCount和doneCount，初始值都是0.
// 使用$.each对数据遍历，形参i表示第几个，n表示具体的元素。判断n.done属性是否已经完成，像ul中prepend添加新数据，将li标签中包含inpit和p+a标签，a标签有自己的id+i，让doneCount++
// 反之就是让ol，使用prepend添加li+p的title，+a带上id。让todoCount++计算未完成的数量
// 最后将#todoCount中的text文本赋值显示在页面中展示.
function load() {
var data = getDate();
$('ol, ul').empty();
var todoCount = 0;
var doneCount = 0;
$.each(data, function (i, ele) {
if (ele.done) {
$('ul').prepend(
'<li><input type="checkbox" checked = "checked"><p>' +
ele.title +
'</p><a href="javascript:;" id=' +
i +
'></a></li>'
);
doneCount++;
} else {
$('ol').prepend(
'<li><input type="checkbox"><p>' +
ele.title +
'</p><a href="javascript:;" id=' +
i +
'></a></li>'
);
todoCount++;
}
});
$('#todoCount').text(todoCount);
$('#doneCount').text(doneCount);
}
});
</script>
</body>
