10.23随笔
on()
on()是jQuery中最根本的事件绑定函数，可以一次绑定多个事件
还可以事件委托
补充：
slideDown(); 下滑
slideUp(); 上滑
星星打分：
<body>
请打分：
<ul>
<li pos="-120"></li>
<li pos="-90"></li>
<li pos="-60"></li>
<li pos="-30"></li>
<li pos="0"></li>
</ul>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script>
var isSelected=false;//决定是否已经确定得分了
$('li').on({
//on()是jQuery中最根本的事件绑定函数，可以一次绑定多事件，还可以事件委托
mouseover:function(){
if(!isSelected){
var y=$(this).attr('pos');
$('ul').css("background-position",'0 ' +y+'px');
}
},
mouseout:function(){
if(!isSelected){
$('ul').css("background-position",'0 -150px' );
}
},
click:function(){
var y=$(this).attr('pos');
isSelected=true;
}
})
商品选择：
//采用事件委托，给A标签绑定事件
$(document).on('click', 'a', function () {
//只留选中的a个变色
$(this).parent().children().css({
'color': 'rgba(51,149,226)',
'background': 'white '
})
$(this).css({
'color': 'white',
'background': 'rgba(51,153,204)'
});
//点击某个A标签，找到它的父元素：DD
var dd = $(this).parent();
var className = dd.attr('class');
//根据DD的类名找到对应的span
$('#' + className).show();
//将当前A标签的文字放在找到的这个span中
$('#' + className).html($(this).html());
//动态生成一个IMG
var img = $(`<img src="./img/5.gif"/>`);
img.css('cursor', 'pointer');
$('#' + className).append(img);
if($('img').length>1){
$('#delete').css({
'display':'block'
})
}
})
$('#result').on('click', 'img', function () {
$(this).parent().hide();
})
/*单个去色**/
$('a').click(function(){
$(this).parent().children().css({
'color': 'rgba(51,149,226)',
'background':'white '
})
$(this).css({
'color': 'white',
'background':'rgba(51,153,204) '
});
})
/*清除筛选条件**/
$('#delete').click(function(){
$('img').parent().hide();
$('a').css({
'color': 'rgba(51,149,226)',
'background':'white '
})
})
apple watch
购物车飞入
<title>购物车飞入</title>
<style>
body,div,figure,caption,h5,span,img, dl,dt,dd, p {
margin: 0;
padding: 0;
}
#product_list {
width: 900px;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
text-align: center;
border: 1px solid black;
margin: 100px auto;
}
#product_list span {
color: red;
}
#shop_cart {
width: 300PX;
height: 100%;
display: flex;
flex-wrap: nowrap;
position: absolute;
right: 0;
top: 0;
text-indent: 2em;
transform: translateX(90%);
}
.header {
flex: 1;
background: darkred;
border: 1px solid white;
display: flex;
flex-direction: column;
justify-content: center;
}
.list {
flex: 4;
background: darkred;
}
.list dl {
border: 1px dashed white;
}
.list dd,dt {
background: pink;
padding-bottom: 5px;
}
#shop_cart.show{
transform: translateX(0%);
}
#shop_cart.hide{
transform: translateX(90%);
}
.bottom{
height: 30px;
color: red;
background: white;
}
</style>
</head>
<body>
<div id="product_list">
<figure>
<img src="./img/7.jpg" alt="">
<caption>
<h5 class="productName">百岁山</h5>
<span class="price">299￥</span>
</caption>
<img src="./img/6.jpg" alt="" class="btn_buy">
</figure>
<figure>
<img src="./img/8.jpg" alt="">
<caption>
<h5 class="productName">百岁山</h5>
<span class="price"> 299￥</span>
</caption>
<img src="./img/6.jpg" alt="" class="btn_buy">
</figure>
<figure>
<img src="./img/7.jpg" alt="">
<caption>
<h5 class="productName">百岁山</h5>
<span class="price">299￥</span>
</caption>
<img src="./img/6.jpg" alt="" class="btn_buy">
</figure>
<figure>
<img src="./img/8.jpg" alt="">
<caption>
<h5 class="productName">百岁山</h5>
<span class="price">299￥</span>
</caption>
<img src="./img/6.jpg" alt="" class="btn_buy">
</figure>
</div>
<div id="shop_cart">
<div class="header">
<p>购</p>
<p>物</p>
<p>车</p>
</div>
<div class="list">
<!-- <dl>
<dt>百岁山</dt>
<dd>
299*1=299
<button>+</button>
<button>-</button>
</dd>
</dl> -->
<div class="bottom">
合计：<span id="result"></span>
</div>
</div>
</div>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script>
//侧边购物车的隐藏--显示
$('#shop_cart').hover(function () {
//显示
$(this).addClass('show').removeClass('hide');
}, function () {
//隐藏
$(this).addClass('hide').removeClass('show');
})
//点击 “加入购物车”
$('.btn_buy').click(function(){
//找到商品原图
var product=$(this).siblings('img');
//获取购物车的位置
var x = $('#shop_cart').offset().left;
var y = $('#shop_cart').offset().top;
//克隆一件商品
var clone = product.clone();
//克隆出来的元素也得找个父标签放置
$(this).parent().append(clone);
//给克隆设置定位
clone.css({
position:'absolute',
opacity:0.7,
top:product.offset().top,
left:product.offset().left
});
//让克隆商品飞入购物车
clone.animate({
left:x,
top:y,
width:30,
},1000,function(){
//飞入之后的回调函数
//购物车侧边栏显示出来
$('#shop_cart').addClass('show')
.removeClass('hide');
//等1秒再收回去
setTimeout(function(){
$('#shop_cart').addClass('hide')
.removeClass('show');
},2000);
//克隆商品最后要删掉
$(this).remove();
})
//将商品名称和单价组装成一个DL结构,放在购物车中,并计算总价
var productName=$(this).siblings('.productName').html();
var price=parseFloat($(this).siblings('.price').html());
var count=1; //数量
var money=price * count;//价格
var dl=$(`
<dl>
<dt>${productName}</dt>
<dd>
<u>${price}</u> * <span>${count}</span> = <b>${money}</b>
<button class="plus">+</button>
<button class="sub">-</button>
</dd>
</dl>
`)
$('.list').prepend(dl);
$("#result").html(calcTotal()+"￥");
})
//计算所有商品的总价
function calcTotal(){
var total=0;
$('dl').each(function(index,value){
total+=parseFloat($(this).find('b').html())
})
return total;
}
function calcMoney(btn){
var u=$(btn).siblings('u');//单价
var sp=$(btn).siblings('span');//数量
var b=$(btn).siblings('b');//单个商品的总价
var price=u.html();
var count=sp.html();
b.html(price*count);
$("#result").html(calcTotal()+"￥");//计算合计
}
//增加商品数量
$("#shop_cart").on('click','.plus',function(){
var sp=$(this).siblings('span');
var newValue=parseInt(sp.html())+1;
sp.html(newValue);
calcMoney(this);
})
//减法
$("#shop_cart").on('click','.sub',function(){
var sp=$(this).siblings('span');
var newValue=parseInt(sp.html())-1;
sp.html(newValue);
calcMoney(this);
})
</script>
补充：
parseFloat(); 转数字
prepend(); 前置增加
