jquery实现商品点击效果的实现与获得滚动值案例的练习
滚动值案例——
实例
<!DOCTYPE html>
<html>
<head>
<title>获取滚动值案例</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.content{ width:100%;height:60px;
background: rgba(160,3,162,0.1);
box-shadow: 1px 3px 7px #ccc;
line-height: 60px;
position: fixed;
}
.content_2{
background: rgba(160,3,162,0.4);
}
form{width: 500px;height: 35px;position: relative;margin: 0 auto;}
input{width:480px;height: 35px;border-radius: 20px;border:none;outline: none;padding-left:20px;}
button{width: 70px;height:35px;order:none;
border-top-right-radius: 20px;border-bottom-right-radius: 20px;border: none;
color: #fff;position: absolute;right:0;top:14px;
outline: none;font-weight: bold;
background: rgba(160,3,162,0.4);
}
[placeholder]{color:rgba(160,3,162,0.6)}
.pic{width: 70%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
.box{width: 70%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }
</style>
</head>
<body>
<!-- 顶部导航 -->
<div class="content">
<form>
<input type="text" placeholder="# 请输入关键词 #">
<button>全网搜</button>
</form>
</div>
<!-- 轮播图 -->
<div class="pic"></div>
<!-- 页面详情 -->
<div class="box"></div>
<script>
$(function(){
//scroll事件，当用户滚动指定的元素是触发
$(window).scroll(function(){
// scrollTop用于获取滚动条到顶部的垂直高度（即网页被卷上去的高度）
if($(window).scrollTop()>60)
$(".content").hide();
else
$('.content').show();
if($(window).scrollTop()>580){
$('.content').addClass('content_2').show();
}else{
$('.content').removeClass('content_2');
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
知识要点：1. scroll()——当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
2. scrollTop()——scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置（即：滚动条最上方与该元素顶部 的距离）。
输入参数比如： $(window).scrollTop(100)，将垂直位置设置为100px;
不输入参数比如： $(window).scrollTop(100)，返回匹配元素的滚动条的垂直位置。
3. addClass——添加类
4.removeClass——删除类
5.window——用户所看到的浏览器窗口（document是HTML文档本身，两者有区别）
用jquery实现商城点击效果
实例
<!DOCTYPE HTML>
<html>
<head>
<title>点击商品选中效果</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
* {
margin: 0px auto;
padding: 0px;
}
.top {
width: 402px;
height: 35px;
line-height: 35px;
text-align: center;
margin-top: 50px;
background: #C40000;
color: #fff;
}
.main {
width: 400px;
height: 400px;
border: 1px solid #C40000;
}
p {
width: 400px;
height: 26px;
margin-top: 10px;
}
b {
width: 90px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;
color: #838383;
border: 1px solid #ccc;
float: left;
margin-left: 5px;
}
span {
width: 90px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;
color: #838383;
border: 1px solid #ccc;
display: block;
float: left;
margin-left: 5px;
}
span:hover {
cursor: pointer;
}
button {
width: 120px;
height: 35px;
background: #C40000;
color: white;
border: 0px;
}
button:hover {
cursor: pointer;
}
.notice {
border: 0px;
}
.select {
border: 2px solid red;
width: 88px;
line-height: 24px;
color: red;
height: 24px;
}
</style>
</head>
<body>
<div class="top">请选择信息后加入购物车</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p class="item" name="color">
<b class="notice">机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ram">
<b class="notice">运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class="item" name="location">
<b class="notice">产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class="item" name="price">
<b class="notice">价格</b>
<span>999元抢购</span>
</p>
<p class="item1" name="num">
<b class="notice">数量</b>
<input type="number" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
<script>
$(function () {
$('span').click(function () {
if ($(this).hasClass('select')) { //匹配span中是否带有class为selected
$(this).removeClass('select'); //含有就清除
} else {
$(this).addClass('select').siblings('span').removeClass('select');
}
})
let i, n;
$('.bu1').click(function () {
//alert('1');
n = 0;
for (i = 0; i < $(".item").length; i++) {
// console.log(i);
// console.log($(".item:eq(" + i + ") span").length);
for (var j = 0; j < $(".item:eq(" + i + ") span").length; j++) {
// console.log($(".item:eq("+i+") span").length);
if ($(".item:eq(" + i + ")" + " span:eq(" + j + ")").hasClass('select')) {
n++;
}
}
}
console.log(n);
if (n === $(".item").length)
alert('加入购物单');
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
难点：sibling——获取同级元素
eq不能识别变量——使用字符串拼接的方法解决。
