JavaScript

Javascript ：客户端的一个脚本语言
js是一门弱类型语言，变量的数据类型由后面赋的值决定
数据类型：
1. 基本数据类型：数值，字符，布尔。。。
2. 引用数据类型：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代码设置某节点的样式 则需要 .styletr.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对应的是1if(priceTD.firstChild && priceTD.firstChild.nodeType==3) {//innerText 表示设置或者获取当前节点的内部文本var oldPirce = priceTD.innerText;// innerHTML 表示设置当前节点的内部HTMLpriceTD.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节点的父节点是tdvar priceTD = input.parentElement;priceTD.innerText=newPrice;// 更新当前行的小计这一个格子的值// priceTD.parentElement td 的父元素是trupdateXJ(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();}
}

JavaScript学习记录相关推荐

JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
JavaScript学习记录总结（四）——js函数的特殊性
<script type="text/javascript"> //当局部变量与全局变量重名的时候 var v="全局变量";//定义全 ...
JavaScript学习记录总结（十）——几个重要的BOM对象
一.弹出框 <script type="text/javascript"> window.οnlοad=function(){ window. ...
[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!
目录事件错误处理 1.隐藏/显示文字 2.简单的加法计算器效果: ★★★3.简易利息计算器效果: 事件 javascript允许html与用户交互的行为例如:鼠标点击事件 & ...
JavaScript学习记录-正则表达式（2）
获取控制正则表达式元字符是包含特殊含义的字符.它们有一些特殊功能,可以控制匹配模式的方式.反斜杠后的元字符将失去其特殊含义,反斜杠后为模式修饰符的可选参数. (1)字符类:单个字符和数字元字符/元 ...
JavaScript学习记录十七
apply和call方法的使用 //apply和call的使用 //作用:可以改变this的指向 //apply和call方法中如果没有传入参数,或者是传入的是null,那么调用该方法的函数对 ...
JavaScript学习记录七
Typora查看文档工具 Document对象 * JavaScript分三个部分: * ECMAScript标准:JS的基本的语法 * DOM:Document Object Mod ...
HTML+CSS+JavaScript学习记录
Internet相关知识 TCP/IP: 传输控制协议/网际协议 TCP/IP通信是点对点的,即通信是网络中一台主机与另一台主机之间的. 在TCP/IP中,HTTP协议用于浏览网页,FTP协议用于In ...
JavaScript学习记录 (三) 函数和对象
1.函数使用 function 关键字来声明函数函数的命名规则和变量一样 JS没有函数签名,所以没有函数重载 JS函数中的所有参数都是值传递:不能通过引用传递 // 定义函数 function t ...

JavaScript学习记录

JavaScript

初学时候，html中会混杂着和JS的绑定，代码如下：

接下来对上面的进行优化，使html中仅有html代码去掉多余的绑定

更新单价

删除某条记录操作

JavaScript学习记录相关推荐

最新文章

热门文章

JavaScript学习记录

JavaScript

初学时候，html中会混杂着和JS的绑定，代码如下：

接下来对上面的进行优化，使html中仅有html代码 去掉多余的绑定

更新单价

删除某条记录操作

JavaScript学习记录相关推荐

最新文章

热门文章

接下来对上面的进行优化，使html中仅有html代码去掉多余的绑定