本地&CDN引入vue、elementui、axios
<!--
本地引入Vue、引入elementui样式、引入elementui组件库
elementui是基于Vue的框架,所以要引入vue.js
本地引入时,src中是相对于当前html的路径
-->
<script src="../js/vue-2.6.14.js"></script>
<!--<script src="../element-ui2.15.7/lib/index.js"></script>-->
<!--<link rel="stylesheet" href="../element-ui2.15.7/lib/theme-chalk/index.css">-->
<!-- 通过CDN引入Vue、引入样式、引入组件库(vue的CDN地址不太好使了,只能先用本地的vue.js) -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
总结
在js中使用变量, 不用写this在html的多个script标签中互相调用全局变量也不用写thisvar声明全局变量let声明局部变量标签元素都有一个name属性标签元素的name属性作用:
1, form标签中submit提交时自动获取的"参数key"即name属性的值, "参数value"即起始标签之间的值
2, 通过name属性获取标签元素集合
通过document获取标签元素的方式getElementsByName()
getElementsByClassName("classname")
getElementsByTagName("标签名称")
session传递参数for-of遍历数组的value; for-in遍历数组的下标
/**
标签设置name属性为"xxx",
document可以通过getElementsByName("xxx")方法获取所有的标签集合
*/
//<body>
<input id="status1" type="radio" name="status" value="1" checked> 启用
<input id="status2" type="radio" name="status" value="0"> 禁用
<div name="status">666</div>
//<script>
let elements = document.getElementsByName("status");
//给div增加了h1标签
elements[2].innerHTML = "<h1>厉害了</h1>"
console.log(elements);
/** 输出结果:
NodeList(3)
0: input#status1
1: input#status2
2: div
length: 3
[[Prototype]]: NodeList
*/
//<body>
<table id="bTable" border="1" cellspacing="0">
<tr align="center">
<td>1</td>
<td>优衣库</td>
<td>优衣库</td>
<td>10</td>
<td>优衣库,服侍人生</td>
<td>禁用</td>
<td>
<a name="operation" href="#">修改</a>
<a name="operation" href="#">删除</a>
</td>
</tr>
</table>
/** <script>
* axios请求加载完数据,给操作中的两个按钮添加事件
* */
function initSettings() {
console.log('--------------------------')
//获取全部的a标签,不精确,可能有其他标签
console.log(document.getElementsByTagName('a'));
//获取指定class的标签集合
console.log(document.getElementsByClassName('caozuo'));
//获取标签name属性值为"operation"的标签集合
console.log(document.getElementsByName('caozuo'));
let aArray = document.getElementsByClassName('operation');
//for-of获取数组的value, 因为还要获取value对应的index,所以这里不用该方式
// for (const el of aArray) {
// console.log(el)
// el.onclick = function (param) {
// console.log('点击了')
// console.log(param.srcElement.id)
//
// if (param.srcElement.id.indexOf("change")!=-1)
// {
// console.log("修改")
// }else {
// console.log("删除")
// }
//
// }
// }
//for-in获取数组的下标index
for (const i in aArray) {
aArray[i].onclick = function (param) {
console.log('点击了')
console.log(param.srcElement.id)
console.log(result)
let oneItem = {};
let id = param.srcElement.id;
if (id.indexOf("change") != -1) {
console.log("修改")
let index = id.replace("change", ''); //每行item的index
console.log(index)
oneItem = {
name: '修改',
data: result[index]
}
} else {
console.log("删除")
let index = id.replace("delete", ''); //每行item的index
oneItem = {
name: '删除',
data: result[index]
}
}
//数据存储到session中, 类型必须为String
sessionStorage.setItem("oneItem", JSON.stringify(oneItem));
//重定向到addBrand.html
location.href = "addBrand.html";
}
}
}
//addBrand.html
//获取session中存储的json数据
let item = sessionStorage.getItem("oneItem");
//删除session中存储的数据
sessionStorage.removeItem("oneItem");
console.log('addBrand.html收到参数:')
console.log(item);
