JavaScript
-
Javascript : 客户端的一个脚本语言
-
js是一门弱类型语言,变量的数据类型由后面赋的值决定
-
数据类型:
- 基本数据类型:数值,字符,布尔。。。
- 引用数据类型:new 出来的对象,数组。。
-
js的定义方法类似于python,没有返回值类型,没有参数类型,也不确定有没有返回值
function hello(num1,num2,name) { if(num1>num2){ return "hello to"+name; }else{ alert("Hello") } }
<script language="JavaScript">
var str = "hello world";
// 打印
alert(str)
// 引用数据类型
var persion = new Object();
persion.pid = "p001";
persion.pname = "xiaowang"
alert(persion.pname)
// js方法
function hello1(name){
return "hello to"+name;
}
function hello(num1,num2,name) {
if(num1>num2){
return "hello to"+name;
}else{
alert("Hello")
}
}
</script>
初学时候,html中会混杂着和JS的绑定,代码如下:
涉及到的css在上一章
javascript-01.js
// 当鼠标悬浮时,显示背景颜色
function showBGColor(){
// event:当前发生的事件
//event.srcElement事件源
// alert(event.srcElement );
// alert(event.srcElement.tagName);
if(event && event.srcElement &&event.srcElement.tagName=="TD"){
var td = event.srcElement;
//td.parentElement 获取td的父元素
var tr = td.parentElement;
// 如果想要通过js代码设置某节点的样式 则需要 .style
tr.style.backgroundColor = "navy";
//tr.ceils 表示获取这个tr中的所有单元格
var tds = tr.cells;
for(var i=0;i<tds.length;i++){
tds[i].style.color="white";
}
}
}
// 当鼠标离开时,恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i=0;i<tds.length;i++){
tds[i].style.color="threeddarkshadow";
}
}
}
// 当鼠标悬浮在单价单元格时候,显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
td.style.cursor="hand";
}
}
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css-demo02.css">
<script type="text/javascript" src="javascript-01.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<!-- onmouseover: 当鼠标放在这个上面时候-->
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>苹果</td>
<td onmouseover="showHand()">100</td>
<td>5</td>
<td>500</td>
<td>删除</td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>香蕉</td>
<td onmouseover="showHand()">100</td>
<td>5</td>
<td>500</td>
<td>删除</td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>鸭梨</td>
<td onmouseover="showHand()">100</td>
<td>5</td>
<td>500</td>
<td>删除</td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>西瓜</td>
<td onmouseover="showHand()">100</td>
<td>5</td>
<td>500</td>
<td>删除</td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">2500</td>
</tr>
</table>
</div>
</div>
</body>
</html>
接下来对上面的进行优化,使html中仅有html代码 去掉多余的绑定
- 去掉html文件中的绑定事件
- 在JS中增加如下代码:
// window 代表当前窗口
//当窗口加载的时候执行这个匿名函数
window.onload=function (){
// 当页面加载完成的时候 我们需要绑定各种事件
// 根绝 ID 获取表格
var fruitTbl = document.getElementById("tbl_fruit");
// 获取表格中的所有行
var rows = fruitTbl.rows;
for(var i=0;i<rows.length;i++){
var tr = rows[i];
//1.绑定鼠标悬浮设置背景颜色
tr.onmouseover=showBGColor;
tr.onmouseout=clearBGColor;
// 获取tr 这一行所有的单元格
var cells = tr.cells;
var priceID = cells[1];
//2.绑定鼠标悬浮在单价单元格变收拾的事件
priceID.onmouseover=showHand;
}
}
更新单价
//3.绑定鼠标点击单价单元格的事件
priceID.onclick=editPrice;
//当鼠标点击单元格时进行价格编辑
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceTD = event.srcElement;
// 判断 当前 priceTD 有子节点且为文本节点 TextNode对应的是3 ElementNode对应的是1
if(priceTD.firstChild && priceTD.firstChild.nodeType==3) {
//innerText 表示设置或者获取当前节点的内部文本
var oldPirce = priceTD.innerText;
// innerHTML 表示设置当前节点的内部HTML
priceTD.innerHTML="<input type='text' size='4'/>"
var input = priceTD.firstChild;
if(input.tagName=="INPUT"){
input.value = oldPirce;
// 选中输入框文本
input.select();
//4.绑定输入框失去焦点,更新单价
input.onblur=updatePrice;
}
}
}
}
function updatePrice(){
if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
var input = event.srcElement;
var newPrice = input.value;
//input节点的父节点是td
var priceTD = input.parentElement;
priceTD.innerText=newPrice;
// 更新当前行的小计这一个格子的值
// priceTD.parentElement td 的父元素是tr
updateXJ(priceTD.parentElement);
}
}
// 更新指定行的小计
function updateXJ(tr){
if(tr && tr.tagName=="TR"){
var tds = tr.cells;
var price = tds[1].innerText;
var count = tds[2].innerText;
var xj = parseInt(price)*parseInt(count);
tds[3].innerText = xj;
// 更新总计
updateZJ();
}
}
function updateZJ(){
var fruitTbl = document.getElementById("tbl_fruit");
var rows = fruitTbl.rows;
var sum = 0;
for(var i=1;i<rows.length-1;i++){
var tr = rows[i];
var xj = parseInt(tr.cells[3].innerText);
sum = sum + xj;
}
rows[rows.length-1].cells[1].innerText = sum;
}
删除某条记录操作
// 7. 绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName=="IMG"){
// 绑定单击事件
img.onclick=delFruit;
}
在editPrice()中加入如下
//8. 在输入框上绑定键盘摁下的事件,此处我需要保证用户输入的是数字
input.onkeydown=ckInput;
function delFruit(){
if(event && event.srcElement && event.srcElement.tagName=="IMG"){
// alert 表示弹出一个对话框,只有确定按钮,
if(window.confirm("是否确认删除当前库存记录")){
var img = event.srcElement;
var tr = img.parentElement.parentElement;
var fruitTbl = document.getElementById("tbl_fruit");
fruitTbl.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
// 检验键盘摁下的值的方法
function ckInput(){
var kc = event.keyCode;
// 0 ~ 9
// console.log(kc)
if(!((kc>=48 && kc<=57) || kc==8 || kc==13)){
event.returnValue=false;
}
if(kc==13){
event.srcElement.blur();
}
}