Q1:javaScript组成javascript
1.ECMAScript描述了该语言的语法和基本对象,如类型、运算、流程控制、面向对象、异常css
2.文档对象模型(DOM),描述了处理网页内容的方法和接口html
3.浏览器对象模型(BOM),描述了与浏览器进行交互的方法和接口java
Q2:JavaScript脚本语言特色数组
1:解释型的脚本语言浏览器
2:简单app
3:动态性ide
4:跨平台性this
Q3:数据类型spa
5种原始数据类型:Undefined、Null、Boolean、Number和String,Object是引用类型
Q4:值为underfine的状况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //js对象 var user = { name: "张学友", address: "中国香港" }; var users={ id:1, name:"老张" }; console.log(users.age); console.log(user.age);//访问对象中的属性,未定义 var i; console.log(i); function show(obj){ console.log(obj); return obj; }; var result=show(3);console.log(result); console.log(null==undefined); console.log("----------------"); console.log(typeof(user)); console.log(typeof(null)); console.log(typeof(undefined)); console.log(""); console.log(!!"");
//是否不为数字,is Not a Number console.log(isNaN("five")); </script> </body> </html>
Q5:数组
1:数组一些方法
Array 对数组的内部支持
Array.concat( ) 链接数组
Array.join( ) 将数组元素链接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //数组的建立 var arr1=new Array(); var arr2=[];//语法糖 var arr3=new Array(1,2,3,4,"x","y"); var arr4=new Array(10);//指定长度 var arr5=[1,2,3,4,5,6,7];//定义并赋值 //访问与修改 console.log("-------访问------") console.log(arr3[4]); console.log("-------修改------") arr3[4]="z"; console.log(arr3[4]); //添加元素 console.log("-------往末尾添加元素------") //添加单个元素 arr3.push(5); console.log(arr3); //添加多个元素 arr3.push(6,"张"); console.log(arr3); console.log("-------添加到开始------"); arr3.unshift("第一个"); console.log(arr3); console.log("-------添加到中间------"); arr3.splice(1,0,"第二个","第三个"); console.log(arr3); arr3.splice(1,1,"第二个","第三个"); console.log(arr3); //删除 console.log("--------移除最后一个元素并返回该元素值-----"); arr3.pop(); console.log(arr3); console.log("--------移除最前一个元素并返回该元素值-----"); arr3.shift(); console.log(arr3); console.log("------删除从指定位置deletePos开始的指定数量deleteCount的元素-------"); arr3.splice(0,3); console.log(arr3); console.log("-----截取和合并-----"); //截取 var slice1=arr3.slice(0,3); console.log(slice1); //合并 var concat1=arr3.concat(arr5); console.log(concat1); //拷贝 var slice2=arr3.slice(0); console.log(slice2); var concat2=arr3.concat(); console.log(concat2); //排序 //正序 arr5.sort(); console.log(arr5); //倒序 arr5.reverse(); console.log(arr5); console.log("------合并成字符-----"); var join1=arr5.join(","); console.log(join1); console.log("-- 拆分红数组----------"); var str="w s z y w"; var split1=str.split(" "); console.log(split1); </script> </body> </html>
Q5:DOM操做
实例1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品管理</title> <style type="text/css"> .t { width: 100%; margin: 0 auto; } #table1 { border-collapse: collapse; width: 100%; } tr td:last-child { text-align: center; } a { margin: 0 5px; } span { font-size: 12px; color: red; } #fie { width: 400px; border-radius: 5px; } #date, #id, #name, #price { width: 169px; } .trbc{ background-color: red; color: #fff; } </style> </head> <body> <div class="t"> <table id="table1" border="1" cellspacing="1" cellpadding="0"> <thead> <tr> <th> <input type="checkbox" id="che" /> <label for="che">全选</label> </th> <th>商品编号</th> <th>名称</th> <th>价格</th> <th>上货日期</th> <th>是否下架</th> <th>操做</th> </tr> </thead> <tbody id="tbody"></tbody> </table> <fieldset id="fie"> <legend>添加/更新</legend> <p> <label for="id">商品编号:</label> <input type="text" id="id" /> <span id="sum"></span> </p> <p> <label for="name">商品名称:</label> <input type="text" id="name" /> <span id="log"></span> </p> <p> <label for="price">商品价格:</label> <input type="text" id="price" /> <span id="pri"></span> </p> <p> <label for="date">上货日期:</label> <input type="date" id="date" /> <span id="da"></span> </p> <p> <label>是否下架:</label> <input type="radio" name="state" value="是" />是 <input type="radio" name="state" value="否" checked="checked" />否 </p> <p> <input type="button" id="add" value="添加" /> <input type="button" id="update" value="更新" /> <input type="button" id="delAll" value="删除选中项" /> </p> </fieldset> </div> <script type="text/javascript"> var arr = [{ number: "201300001", name: "lenovo A820T", price: 650.0, date: "2013-01-07", state: "否" }, { number: "201300007", name: "Acer 星锐 4752G", price: 4000.8, date: "2013-01-01", state: "是" }, { number: "201300009", name: "ZTE U880", price: 450.0, date: "2013-01-07", state: "否" } ]; var app = { init: function() { var tr = ""; for(var i = 0; i < arr.length; i++) { tr += "<tr>"; tr += "<td><input type='checkbox' value='" + i + "' class='che'/></td>"; tr += "<td>" + arr[i].number + "</td>"; tr += "<td>" + arr[i].name + "</td>"; tr += "<td>" + arr[i].price + "</td>"; tr += "<td>" + arr[i].date + "</td>"; tr += "<td>"; if(arr[i].state==="是"){ tr += "<input type='checkbox' value='" + i + "' class='state' checked='checked' disabled='disabled'/>"; }else{ tr += "<input type='checkbox' value='" + i + "' class='state' disabled='disabled'/>"; } tr += "</td>"; tr += "<td>"; tr += "<a class='del' href='##' data-id='" + i + "'>删除</a>"; tr += "<a class='edit' href='##' data-id='" + i + "'>修改</a>"; tr += "<a class='finish' href='##' data-id='" + i + "'>详细</a>"; tr += "</td>"; tr += "</tr>"; } document.getElementById("tbody").innerHTML = tr; app.event(); }, //验证,基于对象验证 verify: function(tar) { if(!(tar.number && /^[\d]{9}$/.test(tar.number))) { document.getElementById("sum").innerText = "*只能输入九位的数字"; return false; } else { document.getElementById("sum").innerText = ""; } if(!(tar.name && /^.{1,30}$/.test(tar.name))) { document.getElementById("log").innerText = "*长度只能是1-30位"; return false; } else { document.getElementById("log").innerText = ""; } if(!(tar.price && /^\d+(\.\d+)?$/.test(tar.price))) { document.getElementById("pri").innerText = "*只能输入正数,如0.98"; return false; } else { document.getElementById("pri").innerText = ""; } if(tar.date == "") { document.getElementById("da").innerText = "*必须选择"; return false; } else { document.getElementById("da").innerText = ""; } return true; }, event: function() { //绑定事件,删除 var del = document.getElementsByClassName("del"); for(var i = 0; i < del.length; i++) { del[i].onclick = function() { if(confirm("您肯定要删除吗?")) { var id = this.getAttribute("data-id"); arr.splice(id, 1); alert("删除成功"); app.init(); } else { return false; } } }; //绑定事件,添加 document.getElementById("add").onclick = function() { var state1 = document.getElementsByName("state"); var state2; for(var i = 0; i < state1.length; i++) { if(state1[i].checked == true) { state2 = state1[i].value; } } var ware = { number: document.getElementById("id").value, name: document.getElementById("name").value, price: document.getElementById("price").value, date: document.getElementById("date").value, state: state2 }; if(app.verify(ware)) { arr.push(ware); //正则校验 app.init(); //添加成功从新渲染页面 } }; //绑定事件,编辑 var edit = document.getElementsByClassName("edit"); for(var i = 0; i < edit.length; i++) { edit[i].onclick = function() { id = this.getAttribute("data-id"); document.getElementById("id").value = arr[id].number; document.getElementById("name").value = arr[id].name; document.getElementById("price").value = arr[id].price; document.getElementById("date").value = arr[id].date; var state = document.getElementsByName("state"); for(var i = 0; i < state.length; i++) { if(state[i].value == arr[id].state) { state[i].checked = true; } } } }; //绑定事件,更新 document.getElementById("update").onclick = function() { var state1 = document.getElementsByName("state"); var state2; for(var i = 0; i < state1.length; i++) { if(state1[i].checked == true) { state2 = state1[i].value; } } var ware = { number: document.getElementById("id").value, name: document.getElementById("name").value, price: document.getElementById("price").value, date: document.getElementById("date").value, state: state2 }; if(app.verify(ware)) { arr.splice(id,1,ware); app.init(); //添加成功从新渲染页面 } }; //绑定事件,多删除 document.getElementById("delAll").onclick = function() { var cheAll = document.getElementsByClassName("che"); var index = []; for(var i = 0; i < cheAll.length; i++) { if(cheAll[i].checked == true) { index.push(cheAll[i].value); }; }; if(index.length > 0) { if(confirm("您肯定要删除这些数据吗?")) { for(var i = index.length; i >= 0; i--) { arr.splice(index.pop(), 1); } app.init(); } } else { alert("您未选择"); } }; //绑定事件,全选,反选 document.getElementById("che").onclick = function() { var cheAll = document.getElementsByClassName("che"); if(this.checked == true) { for(var i = 0; i < cheAll.length; i++) { cheAll[i].checked = true; }; } else if(this.checked == false) { for(var i = 0; i < cheAll.length; i++) { cheAll[i].checked = false; }; } }; //绑定事件,高亮显示 var tbody = document.getElementById("tbody").childNodes; for (var i = 0; i < tbody.length; i++) { tbody[i].onmousemove = function(){ this.className="trbc"; } tbody[i].onmouseout = function(){ this.className=""; } } //绑定事件,定时判断复选框是否所有选中 setInterval(function() { var cheAll = document.getElementsByClassName("che"); var index = []; for(var i = 0; i < cheAll.length; i++) { if(cheAll[i].checked == true) { index.push(cheAll[i].value); }; }; if(cheAll.length != index.length) { document.getElementById("che").checked = false; } else if(index.length === 0) { document.getElementById("che").checked = false; } else { document.getElementById("che").checked = true; } }, 14); } }; app.init(); </script> </body> </html>
实例2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> table,tr,td{ border:1px solid red; border-collapse: collapse; } table{width: 100%;text-align: center;} input[type="button"]{width: 80px;} tbody tr td:last-child{width: 400px;} </style> <body> <table id="table"> <thead> <td><input type="checkbox" id="checkFather" onclick="checkFather()"/></td> <td>编号</td> <td>任务</td> <td>转态</td> <td>操做</td> </thead> <tbody id="tbody"> </tbody> </table> <fieldset> <legend>数据添加</legend> <p> <label>编号</label> <input type="text" placeholder="情输入编号" id="id"/> </p> <p> <label>任务</label> <input type="text" placeholder="情输入任务" id="task"/> </p> <p> <label>状态</label> <select id="state"> <option value="未完成">未完成</option> <option value="完成">完成</option> </select> </p> <p> <input type="button" value="添加" id="btnAdd" onclick="add()"/> <input type="button" value="修改" id="btnUpdate" onclick="update()"/> <input type="button" value="多项删除" id="btnDelMore" onclick="delMore()"/> </p> </fieldset> <script> var updateid=""; var data=[{id:1,task:"上网",state:"未完成"},{id:2,task:"看电视",state:"完成"},{id:3,task:"听歌",state:"未完成"}]; select(); function select(){ var t=document.getElementById("tbody").getElementsByTagName("tr"); for(var j=t.length-1;j>=0;j--){ t[j].remove(); } for(var i=0;i<data.length;i++){ var tr=document.createElement("tr"); var chkSon=document.createElement("input"); chkSon.setAttribute("type","checkbox"); chkSon.setAttribute("class","chkSon"); chkSon.setAttribute("value",i); chkSon.setAttribute("onclick","javascript:checkSon()"); var tdId=document.createElement("td");tdId.innerHTML=data[i].id; var tdTask=document.createElement("td");tdTask.innerHTML=data[i].task; var tdState=document.createElement("td");tdState.innerHTML=data[i].state; var Adel=document.createElement("input"); Adel.setAttribute("type","button");Adel.setAttribute("value","删除");Adel.setAttribute("onclick","javascript:del("+i+")"); var Astate=document.createElement("input"); var states=data[i].state; if(states=="完成"){ states="未完成"; }else{ states="完成"; }; Astate.setAttribute("type","button");Astate.setAttribute("value",states);Astate.setAttribute("onclick","javascript:astate("+i+")"); var Aedit=document.createElement("input"); Aedit.setAttribute("type","button");Aedit.setAttribute("value","编辑");Aedit.setAttribute("onclick","javascript:edit(this,"+i+")"); var Atd=document.createElement("td"); Atd.appendChild(Adel);Atd.appendChild(Astate);Atd.appendChild(Aedit); tr.appendChild(chkSon); tr.appendChild(tdId);tr.appendChild(tdTask);tr.appendChild(tdState); tr.appendChild(Atd); document.getElementById("tbody").appendChild(tr); } }; function delMore(){ var tdcheck=document.getElementsByClassName("chkSon"); for(var i=tdcheck.length-1;i>=0;i--){ if(tdcheck[i].checked){ var chkid=tdcheck[i].value; data.splice(chkid,1); } } select(); }; function astate(obj){ var states=data[obj].state; if(states=="完成"){ states="未完成"; }else{ states="完成"; }; data[obj].state=states; select(); }; function del(obj){ data.splice(obj,1);select(); }; function edit(obj,i){ var td=obj.parentNode.parentNode.childNodes; document.getElementById("id").value=td[1].innerText; document.getElementById("task").value=td[2].innerText; document.getElementById("state").value=td[3].innerText; updateid=i; }; function update(){ alert(updateid); data[updateid].task=document.getElementById("task").value; data[updateid].state=document.getElementById("state").value; select(); }; function checkFather(){ var tdcheck=document.getElementsByClassName("chkSon"); var tdcheckFather=document.getElementById("checkFather"); if(tdcheckFather.checked){ for (var i=0;i<tdcheck.length;i++) { tdcheck[i].checked="checked"; } }else{ for (var i=0;i<tdcheck.length;i++) { tdcheck[i].checked=false; } } }; function checkSon(){ var len=0; var tdcheck=document.getElementsByClassName("chkSon"); for(var i=0;i<tdcheck.length;i++){ if(tdcheck[i].checked){ len++; } } var tdcheckFather=document.getElementById("checkFather"); if(len<tdcheck.length){ tdcheckFather.checked=false; }else{ tdcheckFather.checked="checked"; } }; function add(){ var id=document.getElementById("id").value; var task=document.getElementById("task").value; var state=document.getElementById("state").value; data.push({id:id,task:task,state:state}); select(); }; </script> </body> </html>
结果:
另外一种渲染表格的实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> table,tr,td{ border:1px solid red; border-collapse: collapse; } table{width: 100%;text-align: center;} input[type="button"]{width: 80px;} tbody tr td:last-child{width: 400px;} </style> <body> <table id="table"> <thead> <td><input type="checkbox" id="checkFather" onclick="checkFather()"/></td> <td>编号</td> <td>任务</td> <td>转态</td> <td>操做</td> </thead> <tbody id="tbody"> </tbody> </table> <fieldset> <legend>数据添加</legend> <p> <label>编号</label> <input type="text" placeholder="情输入编号" id="id"/> </p> <p> <label>任务</label> <input type="text" placeholder="情输入任务" id="task"/> </p> <p> <label>状态</label> <select id="state"> <option value="未完成">未完成</option> <option value="完成">完成</option> </select> </p> <p> <input type="button" value="添加" id="btnAdd" onclick="add()"/> <input type="button" value="修改" id="btnUpdate" onclick="update()"/> <input type="button" value="多项删除" id="btnDelMore" onclick="delMore()"/> </p> </fieldset> <script> var data=[{"id":1,"task":"上网","state":"未完成"},{"id":2,"task":"看电视","state":"完成"},{id:3,task:"听歌",state:"未完成"}]; select(); function select(){ for(var j=0;j<data.length;j++){ var chkSon=document.createElement("input"); chkSon.setAttribute("type","checkbox"); var tr=document.getElementById("tbody").insertRow(); var Adel=document.createElement("input"); Adel.setAttribute("type","button");Adel.setAttribute("value","删除"); var Astate=document.createElement("input"); var states=data[j].state; if(states=="完成"){ states="未完成"; }else{ states="完成"; }; Astate.setAttribute("type","button");Astate.setAttribute("value",states); var Aedit=document.createElement("input"); Aedit.setAttribute("type","button");Aedit.setAttribute("value","编辑"); tr.insertCell().appendChild(chkSon); for(var key in data[j]){ tr.insertCell().innerHTML=data[j][key]; } var t=tr.insertCell(); t.appendChild(Adel); t.appendChild(Astate); t.appendChild(Aedit); } }; </script> </body> </html>