jQuery——购物车的实现

最新推荐文章于 2024-09-20 17:38:49 发布

北辰0518

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/beichen0518/article/details/79857074

版权

HTML Tag/Element — Content 标签承载内容
CSS — Display — Box Model 渲染页面显示
- 样式表是有继承的
- 但margin,padding,border,backgroundImage,backgroungColor这些不会被子元素继承
javaScript — Behavior 负责行为
- ECMAScript 标准
- BOM 浏览器对象模型 —window —locaiton/history/screen
- DOM —document — CRUD 增删改查
jQuery
- 如果在导入的时候，有其他的库也封装了$函数，并且jQuery先导入，可以用jQuery函数，产生相同的相同的效果
- 如果是后导入，但不想和其他的冲突可以先写jQuery.noConflict();，在使用jQuery.

"""
jQuery中的$函数（jQuery）的作用
1.如果$函数的参数是一个函数那么该函数是文档加载完成后要执行的回调函数
2.如果$函数的参数是一个选择器字符串那么$函数会返回对应的元素（jQuery对象）
3.如果$函数的参数是一个标签字符串那么$函数会创建该元素并返回（jQuery对象）
4.如果$函数的参数是一个原生的JavaScript元素对象那么$函数会将它转变成jQuery对象
"""

购物车

以下一段代码实现了购物车的一些基本功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* { 
				margin: 0;
				padding: 0;
			}
			body {
				width: 960px;
				margin: 20px auto;
			}
			#cart {
				margin: 0 auto;
				width: 850px;
			}
			#cart-header {
				height: 40px;
				background-color: lightgray;
				margin-bottom: 20px;
			}
			#cart-header div {
				line-height: 40px;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.w110 {
				width: 100px;
			}
			.ml10 {
				margin-left: 10px;
			}
			.w120 {
				width: 120px;
			}
			.w250 {
				width: 250px;
			}
			.center {
				text-align: center;
			}
			.w20 {
				width: 20px;
			}
			.w90 {
				width: 90px;
			}
			.clear {
				clear: both;
			}
			#cart-items>div {
				height: 100px;
			}
			#cart-items>div>div {
				line-height: 100px;
			}
			.w250 span {
				display: inline-block;
				font-size: 12px;
				line-height: 16px !important;
			}
			.single-item {
				border-bottom: 1px solid gray;
			}
			.small-button {
				display: inline-block;
				width: 20px;
				height: 20px;
				border: none;
			}
			.big-button {
				color: white;
				background-color: red;
				display: inline-block;
				width: 120px;
				height: 40px;
				border: none;
				font-size: 22px;
			}