jQuery第2课：基础语法_加入购物车_2019.4.2 - 学习记录总结

Home > List of blog posts > jQuery第2课：基础语法_加入购物车_2019.4.2

Blogger Information

Blog 12

fans 0

comment 0

visits 7494

Special Recommendation

More>

Related recommendations

实例

<!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()：设置或返回单字段的值（输入框的值）

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php第1课：PHP基本语法_2019.3.18

2019-03-26 23:38:20

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例