收藏
批改状态：未批改
老师批语：
一、jQuery遍历
jQuery遍历（用一种相对的关系来查找html元素）
向上查找（祖先元素）
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素;
parents() 方法会使用可选参数来过滤对祖先元素的搜索
向下查找（子元素）
children() 方法返回被选元素的所有直接子元素（可以过滤搜索指定元素）
find() 方法返回被选元素的后代元素
find内部必须写入参数
同级查找（同胞）
siblings() 方法返回被选元素的所有同胞元素 （可以过滤搜索指定元素）
二、jQuery获取及设置css 类
css()设置属性;
设置多个CSS属性：css({"样式名":"value","样式名":"value",...});
返回css（）属性语法：css("样式名");
addClass()向被选元素添加一个或多个类;class
removeClass()从被选元素删除一个或多个类;
hasClass()检查被选元素是否包含指定的class
三、jQuery获取及设置内容
text()设置或返回所选元素的文本内容;
html()设置或返回所选元素的内容（包括 HTML 标记);
val()设置或返回表单字段的值;
四、案例：模拟加入购物车效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟加入购物车效果</title>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.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;}
.notice+input{
width:60px;
margin-left: 6px;
text-align: center;
}
.select{
border:2px solid red;
width: 88px;height: 24px;color: red;line-height: 24px;
}
</style>
<script type="text/javascript">
$(function(){
$('span').click(function(){
if($(this).hasClass('select')){
$(this).removeClass('select')
}else{
$(this).addClass('select').siblings('span').removeClass('select')
}
})
$('#sub').click(function(){
var form={};//创建一个空对象,用于存储数据
var flag=true; //判断能不能加入购物车
//判断是否每个选项都选中; 没选中则弹窗警告; 选中了则添加至需要发送的表单数据里面
$('.item').each(function(){
if($(this).children('span.select').length !=1){
flag=false;
}else{
var key=$(this).attr('name')
var value=$(this).children('span.select').html()
form[key]=value;
}
})
if($('.item1 input').val()<=0){
flag=false;
}else{
form['num']=$('.item1 input').val()
console.log(form)
}
if(flag){
alert('加入购物车')
}
})
})
</script>
</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" >
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：以上代码模拟了加入购物车的一个小案例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
