收藏
批改状态：未批改
老师批语：
1.jQuery遍历（用一种相对的关系来查找html元素）
向上查找(祖先元素)：parent()方法返回被选元素的直接父级元素
parents()方法返回被选元素的所有祖先元素，内部可筛选某一元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车加入</title>
<script type='text/javascript' src='jquery-3.3.1.min.js'></script>
<style>
*{margin:0 auto; padding:0;}
div{width:400px; height:430px; border:1px solid red; margin-top:30px;}
.main{width:400px; height:40px; line-height:40px; background:red; text-align:center; font-size:22px; color:#fff;}
.item{width:400px; height:30px; line-height:30px; margin:10px 20px;}
b{display:inline-block; width:60px; margin-right:5px; text-align:center; font-size:15px; color:#838383;}
span{border:1px solid #ccc; padding:5px; display:inline-block; width:80px; height:22px; font-size:14px; line-height:22px; text-align:center; color:#838383;}
.item1{width:400px; height:30px; line-height:30px; margin:10px 20px;}
span:hover{cursor:pointer;}
input{width:60px; height:20px;}
button{width:150px; height:35px; text-align:center; background:red; margin-left:87px; color:#fff; border:0; font-size:16px;}
.select{border:2px solid red; color:red; width:78px; height:20px;}
</style>
</head>
<body>
<div>
<p class='main'>请选择信息加入购物车</p>
<p class='item' name="version">
<b>版本</b>
<span>ONE A0001</span>
<span>ONE A0002</span>
<span>ONE A0003</span>
</p>
<p class='item' name="color">
<b>机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class='item' name="type">
<b>套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class='item' name="ram">
<b>运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class='item' name="rom">
<b>机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class='item' name="location">
<b>产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class='item' name="price">
<b>价格</b>
<span>999元抢购</span>
</p>
<p class='item1' name="num">
<b>数量</b>
<input type="number" value='1'>
</p>
<button>加入购物车</button>
</div>
<script>
// if(typeof $=='undefined'){
// alert('加载失败')
// }else{
// alert('加载成功')
// }
$(function(){ //入口函数
$('span').click(function(){ //单击触发函数
if($(this).hasClass('select')){ //检测当前元素是否包含指定类
$(this).removeClass('select') //包含则去除指定类
}else{
$(this).addClass('select').siblings('span').removeClass('select') //否则添加指定类并去除同级元素指定类
}
})
$('button').click(function(){ //单击触发函数
var form={} //创建一个空对象用于存储数据
var flag=true //给默认初值为真
$('.item').each(function(){ //循环遍历每个.item
if($(this).children('span.select').length !=1){ //判断当前同级元素选中数量是否为1
flag=false //不是则为假
}else{ //否则
var key=$(this).attr('name') //存储相应对象的名称(键名)
var value=$(this).children('span.select').text() //返回并存储相应对象的文本内容(键值)
form[key]=value //键名键值相对应
}
})
if($('.item1 input').val()<=0){ //判断所选数量是否小于0
flag=false //小于则为假
}else{
form['num']=$('.item1 input').val() //否则将所选数量存储于对象
}
if(flag){ //判断***决定能否加入购物车
alert('已加入购物车!') //为真则提示已加入购物车
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
向下查找(子元素)：children()方法返回被选元素的所有直接子元素，内部可筛选某一子元素
find()方法返回被选元素的后代元素，参数必填
同级查找(同胞)：siblings()方法返回被选元素的所有同胞元素，内部可筛选某一元素
2.jQuery获取并设置css类
设置css样式属性：css(‘属性名’,’属性值’)
返回css样式属性：css(‘属性名’)
设置多个css样式属性：css(‘属性名1’:’属性值1’,‘属性名2’:’属性值2’)
向被选元素添加一个或多个类：addClass(‘类名’) 类名不能加.号
从被选元素删除一个或多个类：removeClass(‘类名’) 类名不能加.号
检查并返回被选元素是否包含指定的类：hasClass(‘类名’) 类名不能加.号
3.jQuery获取及设置内容
text()：设置或返回所选元素的文本内容
html()：设置或返回所选元素的内容（包含html标记）
Val()：设置或返回单字段的值（输入框的值）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
