1、dom上自定义属性
jq index = '0'; attr("index")
dom元素转换成jq对象 $(this)---->$($(this))
jq对象转换成dom元素 $($(this))[index] $($(this).get(index)
js getAttribute("index")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.fl{
}
.clearfix{
overflow: hidden;
}
.fl{
float: left;
height: 30px;
line-height: 30px;
}
.center{
text-align: center;
}
.fr{
float: right;
}
</style>
</head>
<body>
<div class="clearfix center" style="padding:2%">
<div class="fl" style="width:33%; background: red">
单价:<span class="price" index="0">10</span>
</div>
<div class="fl" style="width:33%; background: yellow">
<button class="add" index="0">+</button>
<input type="text" class="num center" style="width:10%" value="1" index="0">
<button class="sub" index="0">-</button>
</div>
<div class="fl" style="width:34%; background: green">
总价:<span class="totalPrice" index="0">10</span>
</div>
</div>
<div class="clearfix center" style="padding:2%">
<div class="fl" style="width:33%; background: red">
单价:<span class="price" index="1">20</span>
</div>
<div class="fl" style="width:33%; background: yellow">
<button class="add" index="1">+</button>
<input type="text" class="num center" style="width:10%" value="1" index="1">
<button class="sub" index="1">-</button>
</div>
<div class="fl" style="width:34%; background: green">
总价:<span class="totalPrice" index="1">20</span>
</div>
</div>
<div class="clearfix center" style="padding:2%">
<div class="fl" style="width:33%; background: red">
单价:<span class="price" index="2">30</span>
</div>
<div class="fl" style="width:33%; background: yellow">
<button class="add" index="2">+</button>
<input type="text" class="num center" style="width:10%" value="1" index="2">
<button class="sub" index="2">-</button>
</div>
<div class="fl" style="width:34%; background: green">
总价:<span class="totalPrice" index="2">30</span>
</div>
</div>
<script>
$(function(){
$('.num').on('input', function(){
this.value = this.value.replace(/[^\d]/g,'');
var index = $(this).attr('index');
var price = $($(".price")[index]).text();
total = price * this.value * 1;
$($(".totalPrice")[index]).text(total);
})
$('.add').on('click', function(){
var index = $(this).attr('index');
var price = $($(".price")[index]).text();
var num = $($(".num")[index]).val();
num++;
$($(".num")[index]).val(num);
total = price * num * 1;
$($(".totalPrice")[index]).text(total);
})
$('.sub').on('click', function(){
var index = $(this).attr('index');
var price = $($(".price")[index]).text();
var num = $($(".num")[index]).val();
num--;
if(num <= 0){
return;
}
$($(".num")[index]).val(num);
total = price * num * 1;
$($(".totalPrice")[index]).text(total);
})
})
</script>
</body>
</html>
2、放大镜
1.需引入imagezoom插件
2.鼠标移入移除事件==hover事件
$(function(){
$().on('mouseenter mouseleave', function(event){console.log(event, event.type)})
})
同上事件的hover事件
$().hover(function(){})
3.$().attr('src')获取dom元素的src属性值
$().attr('src', src)设置dom元素的src属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.imagezoom.min.js"></script>
<style>
*{padding:0; margin: 0 auto;}
li{list-style: none}
.box{padding-top:4%;}
.clearfix{overflow: hidden;}
.midImgList a{width: 310px; height: 310px; border: 1px solid #CDCDCD;}
.imgList{width: 312px;}
.imgList a{display: table-cell; text-align: center; vertical-align: middle;}
.imgList img{vertical-align: middle;}
.smallImgList li{float: left; margin-left:17px; margin-top:10px; border: 1px solid #CDCDCD;}
.smallImgList a{width: 40px; height: 40px;}
.active{border-color: red !important;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:40px;height:40px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
</head>
<body>
<div class="box">
<div class='midImgList imgList'>
<a href="images/01.jpg"><img src="images/01_mid.jpg" rel="images/01.jpg" alt="" class="midImg"></a>
</div>
<ul class="clearfix smallImgList imgList">
<li class="active">
<a href="#">
<img src="images/01_small.jpg" midImg="images/01_mid.jpg" bigImg="images/01.jpg" alt="" class="smallImg">
</a>
</li>
<li>
<a href="#">
<img src="images/02_small.jpg" midImg="images/02_mid.jpg" bigImg="images/02.jpg" alt="" class="smallImg">
</a>
</li>
<li>
<a href="#">
<img src="images/03_small.jpg" midImg="images/03_mid.jpg" bigImg="images/03.jpg" alt="" class="smallImg">
</a>
</li>
<li>
<a href="#">
<img src="images/04_small.jpg" midImg="images/04_mid.jpg" bigImg="images/04.jpg" alt="" class="smallImg">
</a>
</li>
<li>
<a href="#">
<img src="images/05_small.jpg" midImg="images/05_mid.jpg" bigImg="images/05.jpg" alt="" class="smallImg">
</a>
</li>
</ul>
</div>
<script>
$(function(){
$(".midImg").imagezoom();
$(".smallImgList li").on("mouseenter mouseleave", function(event){
$(".midImg").attr('rel', $(this).find("img").attr('bigImg'));
if(event.type == 'mouseenter'){
$(this).addClass("active").siblings().removeClass("active");
$(".midImg").attr('src', $(this).find("img").attr('midImg'));
}
})
})
</script>
</body>
</html>