使用课上内容 对照老师代码进行练习 掌握课上所学的内容
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>仿淘宝购购物</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 400px;
height: 500px;
border: 1px solid #D8243A;
margin:20px auto;
}
#box2{
color: #fff;
background: #D8243A;
width: 400px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 30px;
}
b{
color: #999999;
}
p{
width: 400px;
height: 70px;
line-height: 70px;
/* display: inline-block; */
padding-left: 15px;
font-size: 20px;
}
span{
cursor:pointer;
display:inline-block;
width: 95px;
height: 40px;
margin-left: 5px;
border: 1px solid #999999;
line-height: 40px;
text-align: center;
color: #999999;
}
input{
width: 95px;
height: 30px;
margin-left: 5px;
}
button{
width: 95px;
height: 40px;
background: #D8243A;
color: #fff;
border: none;
font-size: 20px;
}
#p_but{
text-align:center;
}
.a_Border{
border: 1px solid #D8243A;
color: #D8243A;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">请选择商品型号</div>
<div>
<p class="p_Span"name="size">
<b>尺码</b>
<span>170/88A</span>
<span>180/96A</span>
<span>190/104A</span>
</p>
<p class="p_Span"name="color">
<b>颜色</b>
<span>黑色</span>
<span>蓝色</span>
<span>白色</span>
</p>
<p class="p_Span"name="thick">
<b>厚度</b>
<span>普通</span>
<span>加厚</span>
<span>加厚防水</span>
</p>
<p class="p_Span"name="combination">
<b>套餐</b>
<span>套餐一</span>
<span>套餐二</span>
<span>套餐三</span>
</p>
<p>
<b>数量</b>
<input type="number" name="" value="1" id="num"max="99"min="1">
</p>
<p id="p_but">
<button type="button" id="bt1"name="button">确认***</button>
</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('span').click(function(){
if($(this).hasClass('a_Border')){
$(this).removeClass('a_Border');
}else {
$(this).addClass('a_Border').siblings().removeClass('a_Border');
}
})
$('#bt1').click(function(){
//创建一个空对象,用来储存数据
var form={};
//为了后期判断能不能加入购物车
var flag=true;
// each 规定每一个被选中的元素都执行一遍
$('.p_Span').each(function(){
// 判断同级中有一项是否都有被选中
if($(this).children('span.a_Border').length!=1){
flag=false;
}else {
//不同的P标签的属性值是不一样的 键名
var key=$(this).attr('name');
var value=$(this).children('span.a_Border').html();
//键值对一一对应
form[key]=value;
}
})
if($('#num').val()<=0){
flag=false;
}else {
form['num']=$('#num').val();
console.log(form);
}
if(flag){
alert('加入购物车成功');
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
1:jquery遍历
parent()方法返回被选元素的直接父元素 例: $('ul').parent().css(.........)
parents() 方法返回被选元素的所有父元素 例:$('a').parents().css(.........)
parents()方法会使用可选参数来过滤对祖先元素的搜索 例: $('a').parents('div').css(...)
children()方法返回被选元素的所有直接子元素 $('li').children().css(.......)
也可以使用过滤 例: $('li').children('span').css(.........)
find() 方法返回被选元素的后代元素 内部必须有值 必须要进行过滤
例: $('div').find('span').css(...........)
siblings() 方法返回被选元素的所有同胞元素 同级元素
例:$('div').siblings().css(.........)
可过滤 例:$('div').siblings('h1').css(.........)
2:获取并设置css
设置多个css属性: 例:$('.box').css({'color':'#fff','font-size':'26px'})
返回css样式属性值 例:$('.box').css('height')
addClass() 向被选元素添加一个或多个类 例: $('.box').addClass('text');
removeClass() 从被选元素删除一个或多个类 例:$('.box').removeClass('text');
hasClass() 检查被选元素是否包含指定的class 例:$('.box').hasClass('text');
text()设置或返回所选元素的文本内容 只能获取文本
例: $('.box').text('这里面可以输入各种内容 只有文本')
html() 设置或返回所选元素的内容(包括html标记也会显示出来)
例: $('.box').html('<a href="">这里面可以输入各种内容 只有文本 </a>')
val() 设置或返回表单字段的值 例: $('input').val();