JavaScript-ECMAScript、BOM、DOM
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>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。