一、tools编写
/**
- 根据选择器查找元素
- @param selector <String> 选择器，可取 #id .class element
- @param context <DOM> 查询上下文，即在该DOM元素后代查找满足选择器条件的元素，默认在 document 中查找
- @return 返回查找到的元素（根据id查找时返回的是查找到的DOM对象，根据类名或元素名查找时，返回的是 HTMLCollection）
*/
// 如果未传递 context 参数，则默认取 document 值
context = context || document;
if (selector.indexOf("#") === 0) // id
return document.getElementById(selector.slice(1));
//截取后半部分来比对成功的元素都将放入对应的对象里
if (selector.indexOf(".") === 0) // className
return byClassName(selector.slice(1), context);
// element
return context.getElementsByTagName(selector);
}
/**
* 解决根据类名查找元素浏览器兼容
* @param className <String> 待查找的类名
* @param context <DOM> 查询上下文，即在该DOM元素后代查找满足选择器条件的元素，默认在 document 中查找
* @return 返回查找到的元素
*/
function byClassName(className, context) {
// 默认在 document 文档中查找当context为空被赋document
context = context || document;
/* 支持使用 getElementsByClassName 方法，则直接使用 */
/**
*context.getElementsByClassName <=> context.getElementsByClassName !== undefined;
undefined的boolean值为false 。浏览器发现不兼容则getElementsByClassName返回false
*/
// if (context.getElementsByClassName) //
// return context.getElementsByClassName(className);
/* 不支持使用 getElementsByClassName 方法 */
// 保存所有查找到元素的数组
var _result = [];
// 将查询上下文后代中所有元素查找出来 获取到的不是数组而是一个类似于数组的对象（泛型集合）
var _tags = context.getElementsByTagName("*");
console.log(_tags);
// 遍历迭代所有元素
for (var i = 0, len = _tags.length; i < len; i++) {
// 获取当前遍历到元素的所有类名 _tags[i]是一个泛型集合通过className来进行分割
var _classNames = _tags[i].className.split(" ");
// 遍历所有类名
for (var j = 0, l = _classNames.length; j < l; j++) {
if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
// 说明当前遍历到的元素是需要查找的元素之一
_result.push(_tags[i]);
break;
}
}
}
// 返回所有查找到的结果
return _result;
}```
二、运用tools编写购物车
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
border-collapse: collapse;
border:1px solid;
}
td {
border:1px solid;
}
.subtract, .add{
display: inline-block;
width: 20px;
height: 20px;
border:1px solid #000;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.amount{
width:30px;
height:20px;
text-align: center;
line-height: 20px;
}
button,input{
margin-top:20px;
}
</style>
</head>
<body>
<h1>购物车</h1>
<table>
<tr>
<td>序号</td>
<td>标题</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>59</td>
<td><span class="subtract">-</span><input type="text" class="amount" value="1"><span class="add">+</span></td>
<td class="sum">59</td>
<!-- javascript:void(0)当点击锚点（a标签）时不会跳转 -->
<td><a href="javascript:void(0);" class="del">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>蒙牛 纯牛奶 PURE MILK 250ml*16盒 礼盒装</td>
<td>35.1</tb>
<td><span class="subtract">-</span><input type="text" class="amount" value="1"><span class="add">+</span></td>
<td class="sum">35.1</td>
<td><a href="javascript:void(0);" class="del">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>科尔沁 休闲肉脯零食 内蒙古特产 手撕风干牛肉干孜然味400g</td>
<td>99</tb>
<td><span class="subtract">-</span><input type="text" class="amount" value="1"><span class="add">+</span></td>
<td class="sum">99</td>
<td><a href="javascript:void(0);" class="del">删除</a></td>
</tr>
</table>
<input type="text" value="193.10" id="totalValue">
<button id="total">结算</button>
<script src="js/tools.js"></script>
<script type="text/javascript">
var _delLinks = $(".del");
for(var i=0,len=_delLinks.length;i<len;i++){
_delLinks[i].onclick = function(){
console.log("删除：",this);//获取到当前的元素
var _td = this.parentNode;//找到this的父亲节点
var _tr = _td.parentNode;//找到_td的父亲节点
_tr.parentNode.removeChild(_tr);//找到_tr的父亲节点并把_tr删除
}
}
/**
*previousSibling：当前节点的前一个兄弟节点
*/
var _add = $(".add");
for(var j=0 ,len=_add.length;j<len;j++){
_add[j].onclick = function (){
console.log("添加:", this);
var amount = Number(this.previousSibling.value);//获取到前一个元素节点的值
amount++;
this.previousSibling.value = amount;//找到前一个的节点并赋值
var _addTd = this.parentNode.parentNode.children[2];//获取到元素
var _price = _addTd.innerText;//获取_addTd的数值
console.log(_price);
_sub = _price * amount;//小计
this.parentNode.nextSibling.nextSibling.innerText = _sub.toFixed(2); //文本节点（换行符也是一个节点）
}
}
var _subtract = $(".subtract");
for(var k=0,len=_subtract.length;k<len;k++){
_subtract[k].onclick = function(){
console.log("减少：", this);
var amount = Number(this.nextSibling.value);
if(amount>1)
amount--;
console.log(amount);
this.nextSibling.value = amount;
var _subtractTd = this.parentNode.parentNode.children[2];//获取总金额
console.log(_subtractTd);
var _price = _subtractTd.innerText;
console.log(_price);
var _sub = _price * amount;//小计
this.parentNode.nextSibling.nextSibling.innerText = _sub.toFixed(2);
// sum += _sub.toFixed(2);
// console.log(sum);
}
}
$("#total").onclick = function() {
var _sum = $(".sum");
console.log(Number(_sum[0].innerText));
var totalSum = Number(_sum[0].innerText)+Number(_sum[1].innerText)+Number(_sum[2].innerText);
$("#totalValue").value = totalSum.toFixed(2);
}
</script>
</body>
</html>```
网友评论