1)JS是客户端(浏览器端)运行的脚本语言,语法风格和java比较类似
2)jS是弱类型的语言var str=99,它会根据赋值进行类型转换
3)JS的函数,没有返回值和范围修饰符
function hello(var num){}
4)DoM技术:
4-1)鼠标悬浮:onmouseover,.event..srcElement,事件传递parentElement,style.backgroundColor
鼠标离开:onmouseout
4-2)
hand/pointer,onclick td.innerText,td.innerHTML="<input type='text'/>",td.firstChild.value=oldPrice
失去焦点:onblur,input.parentElement..innerText=newPrice;
更新小计:input=event.srcElement,tr=input.parentElement.parentElement;tr.cells,parseInt
更新总计:document.getElementById("fruit_tbl"),fruitTbl.rows
4-3)
删除一行:img,img.parentElement.parentElement.rowIndex,table.deleteRow(rowIndex)
function $(id){
return document.getElementById(id);
}
window.onload=function(){
updateZJ();
//当页面加载完成,我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = $("tbl_fruit");
//获取表格中的所有的行
var rows = fruitTbl.rows ;
for(var i = 1 ; i<rows.length-1 ; i++){
var tr = rows[i];
trBindEvent(tr);
}
$("addBtn").onclick=addFruit;
}
function trBindEvent(tr){
//1.绑定鼠标悬浮以及离开时设置背景颜色事件
tr.onmouseover=showBGColor;
tr.onmouseout=clearBGColor;
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceTD = cells[1];
//2.绑定鼠标悬浮在单价单元格变手势的事件
priceTD.onmouseover = showHand ;
//3.绑定鼠标点击单价单元格的事件
priceTD.onclick=editPrice;
//7.绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName=="IMG"){
//绑定单击事件
img.onclick = delFruit ;
}
}
//添加水果信息
function addFruit(){
var fname = $("fname").value;
var price = parseInt($("price").value);
var fcount = parseInt($("fcount").value);
var xj = price * fcount ;
var fruitTbl = $("tbl_fruit");
var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
var fnameTD = tr.insertCell();
fnameTD.innerText = fname ;
var priceTD = tr.insertCell();
priceTD.innerText = price ;
var fcountTD = tr.insertCell();
fcountTD.innerText = fcount ;
var xjTD = tr.insertCell();
xjTD.innerText = xj ;
var imgTD = tr.insertCell();
imgTD.innerHTML = "<img src='imgs/del.jpg' class='delImg'/>";
updateZJ();
trBindEvent(tr);
}
function delFruit(){
if(event && event.srcElement && event.srcElement.tagName=="IMG"){
//alert表示弹出一个对话框,只有确定按钮
//confirm表示弹出一个对话框,有确定和取消按钮。当点击确定,返回true,否则返回false
if(window.confirm("是否确认删除当前库存记录")){
var img = event.srcElement ;
var tr = img.parentElement.parentElement ;
var fruitTbl = $("tbl_fruit");
fruitTbl.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
//当鼠标点击单价单元格时进行价格编辑
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 oldPrice = priceTD.innerText ;
//innerHTML 表示设置当前节点的内部HTML
priceTD.innerHTML="<input type='text' size='4'/>";
// <td><input type='text' size='4'/></td>
var input = priceTD.firstChild;
if(input.tagName=="INPUT"){
input.value = oldPrice ;
//选中输入框内部的文本
input.select();
//4.绑定输入框失去焦点事件 , 失去焦点,更新单价
input.onblur=updatePrice ;
//8.在输入框上绑定键盘摁下的事件,此处我需要保证用户输入的是数字
input.onkeydown=ckInput;
}
}
}
}
//检验键盘摁下的值的方法
function ckInput(){
var kc = event.keyCode ;
// 0 ~ 9 : 48~57
//backspace : 8
//enter : 13
//console.log(kc);
if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){
event.returnValue=false;
}
if(kc==13){
event.srcElement.blur();
}
}
//更新单价的方法
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 ;
//5. 更新当前行的小计这一个格子的值
//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 ;
//innerText获取到的值的类型是字符串类型,因此需要类型转换,才能进行数学运算
var xj = parseInt(price) * parseInt(count);
tds[3].innerText = xj ;
//6. 更新总计
updateZJ();
}
}
//更新总计
function updateZJ(){
var fruitTbl = $("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); //NaN not a number 不是一个数字
sum = sum + xj ;
}
rows[rows.length-1].cells[1].innerText = sum ;
}
//当鼠标悬浮时,显示背景颜色
function showBGColor(){
//event : 当前发生的事件
//event.srcElement : 事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); --> TD
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//td.parentElement 表示获取td的父元素 -> TR
var tr = td.parentElement ;
//如果想要通过js代码设置某节点的样式,则需要加上 .style
tr.style.backgroundColor = "navy" ;
//tr.cells表示获取这个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 ;
//cursor : 光标
td.style.cursor="hand";
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/css01.css">
<script type="text/javascript" src="js/js01.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
<hr />
<div id="add_fruit_div">
<table>
<tr>
<td class="w30">名称:</td>
<td><input class="input" type='text' id='fname' value="apple"/></td>
</tr>
<tr>
<td>单价:</td>
<td><input class="input" type='text' id='price' value="5"/></td>
</tr>
<tr>
<td>数量:</td>
<td><input class="input" type='text' id='fcount' value="100"/></td>
</tr>
<tr>
<th colspan="2">
<input type='button' id="addBtn" class="btn" value="添加"/>
<input type='button' class="btn" value="重填"/>
</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Document 对象中的方法介绍
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值 document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值 document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName) 方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名
注: document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询 如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象
getElementById 方法示例代码:验证用户名是否合法
<!DOCTYPE html>
<!--设置语言支持,en代表英语-->
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onclikeFun() {
// 1 当我们要操作一个标签的时候,一定要先获取这个标签对象
var name = document.getElementById("username");
var namev = name.value;
// 如何 验证 字符串,符合某个规则 ,需要使用正则表达式技术
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串,是不是匹配我的规则 ,
* 匹配就返回 true。不匹配就返回 false.
* */
var span = document.getElementById("userSpan");
// innerHTML 表示起始标签和结束标签中的内容
// innerHTML 这个属性可读,可写
if (patt.test(namev)){
//1.span.innerHTML="用户名合法";
span.innerHTML="<img src=\"imgs/right.png\" width=\"18\" height=\"18\">";
}else {
//1.span.innerHTML="用户名不合法";
span.innerHTML="<img src=\"imgs/wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="wzg">
<span id="userSpan" style="color: red"></span>
<button onclick="onclikeFun()">校验</button>
</body>
</html>
getElementsByName 方法
<!DOCTYPE html>
<!--设置语言支持,en代表英语-->
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
var name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked=true;
}
}
function checkNo() {
var name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked=false;
}
}
function checkReverse() {
var name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked=!name[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>
createElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 现在需要我们使用 js 代码来创建 html 标签,并显示在页面上
// 标签的内容就是:<div>123456</div>
var divObj = document.createElement("div"); // 在内存中 <div></div>
var textNodeObj = document.createTextNode("123456");
divObj.appendChild(textNodeObj);
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>