js函数是用function关键字定义，由函数名、参数列表和
函数体构成的代码
分类：自定义函数、内建函数
自定义函数语法:定义函数不会执行函数内容，需要调用函数
function 函数名([参数列表]){
函数体
[return 数据]
}
调用函数： 函数名([参数值列表])
内建函数是JavaScript已经封装好的自带函数
警告框： alert()
确认框： confirm("确认信息") 有两个按钮，一个取消，一个确认，点了取消返回false,点了确认返回true
提示框： prompt(参数[,参数]) 第一个参数代表提示信息，第二参数代表提示信息的默认值，有两个按钮，一个取消，一个确认，点了取消返回null,点了确认返回输入的内容
eval(): 将字符串参数作为js代码执行
DOM事件是由DOM中的事件源触发，可以引发事件响应的操作
分类:
鼠标事件、键盘事件、表单事件、页面事件
事件源： html中的元素
事件 ： 给元素绑定的操作/行为
事件处理函数 ： 给出行为
事件对象 ： event 记录事件的状态
键盘事件是由键盘操作触发的DOM事件
onkeydown ： 键盘按下事件
onkeyup : 键盘抬起事件（放开之前按下的键）
onkeypress : 按下并抬起事件（系统键不识别）
鼠标事件是由鼠标操作触发的DOM事件
onclick事件 鼠标左键点击一下事件
ondblclick事件 鼠标左键双击事件
document常用方法
向网页写数据： document.write("数据")
通过id属性值获取一个元素： var 元素 = document.getElementById("id属性值")
通过name属性值获取元素数组： var arr = document.getElementsByName("name属性值");
通过标签名获取元素数组： var arr = document.getElementsByTagName("标签名");
获取元素（输入框、文本域、密码框、下拉框）的值 ： 元素.value
给元素（输入框、文本域、密码框、下拉框）的value赋值 ： 元素.value=值
如果是span、p、div等 通过"元素.textContent"获取元素的文本内容 （不包含标签）
如果是span、p、div等 通过"元素.innerHTML"获取元素的文本内容 （包含标签）
获取元素的属性值： 元素.属性名 比如获取元素的name属性值： “元素.name”
给元素的属性值赋值： 元素.属性名 = 值 比如给元素的name属性赋值 ： "元素.name=值"
p、div、span、tr、使用textContext/innerHtml，其他用value
表单事件是由表单及表单域操作触发的DOM事件
onfocus事件 获取焦点事件
onblur事件 失去焦点事件
onsubmit事件 表单提交事件
最主要的事件
键盘事件：
onkeydown、键盘按下
onkeyup、键盘抬起
onkeypress
鼠标事件：onclick 、
ondblclick 、
onmousemove 、鼠标移动
onmouseover 、鼠标移上
onmouseout
表单事件： onsubmit、onfocus、onblur、onchange（内容改变并且失去焦点）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="del" onClick="del()"/> 10 <input type="button" value="click" onclick="ck()"> 11 <input type="button" value="dbclick" ondblclick="ck()"> 12 <script> 13 var string = "wang zhan gong cheng" 14 var sub = "gong cheng" 15 var index = string.indexOf(sub) 16 var subStr = string.slice(index, index+sub.length) 17 subStr = subStr.charAt(0).toUpperCase()+subStr.slice(1) 18 console.log("程序处理前："+sub) 19 console.log("程序处理后："+subStr) 20 21 var arr=["上午好","中午好","下午好","傍晚好","晚上好"] 22 var datetime = new Date(); 23 document.write("当前时间："+datetime.toLocaleString()+"<br>") 24 var h = datetime.getHours() 25 if (h>=8 && h<11){ 26 document.write(arr[0]) 27 }else if(h>=11 && h<13){ 28 document.write(arr[1]) 29 }else if(h>=13 && h<17){ 30 document.write(arr[2]) 31 }else if(h>=17 && h<19){ 32 document.write(arr[3]) 33 }else if(h>=19 && h<24){ 34 document.write(arr[4]) 35 } 36 37 长度可变 可以存储不同类型数据 38 var arr=[值列表] 39 var arr2 =new Array(5) 40 var arr3= new Array("liu","zhang","li") 41 二维数组两个维度，每个元素都是一维数组的数组 42 43 var arr=[ 44 [], 45 [], 46 ] 47 String 48 slice() 49 indexOf() 50 split() 51 for(var i in arr){} 52 将数组的每个元素以指定的分隔符组成字符串返回 53 var s=arr3.join(",") 54 arr.toString() 55 56 有参数可以一个可以两个 57 function test02(a,b){ 58 alert(a+b) 59 } 60 test02(new Date().toISOString(),"123") 61 62 //有参数有返回值 63 function test03(i,j){ 64 return i+j 65 } 66 67 var sum= test03(10,20) 68 alert(sum) 69 70 71 function del(){ 72 if (confirm("确定删除?")){ 73 alert("删除成功") 74 }else{ 75 alert("取消删除") 76 } 77 } 78 var msg=prompt("请输入姓名：","你是谁") 79 alert(msg) 80 81 function ck(){ 82 document.write(event.target+":"+event.type+"<br>") 83 document.write(event.clientX+"<br>") 84 document.write(event.clientY+"<br>") 85 document.write("<a href=‘test16.html‘>返回</a>") 86 } 87 88 89 </script> 90 </body> 91 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 #container,#panel{ 8 border:1px #ccc solid; 9 margin-bottom:10px; 10 height:200px 11 } 12 #panel div,#container div{ 13 background-color:#369ae5; 14 margin:5px; 15 padding:20px; 16 width:120px; 17 color:#fff; 18 float:left; 19 text-align: center; 20 } 21 textarea{ 22 margin: 3px; 23 } 24 </style> 25 </head> 26 <body style="background-color:#999 "><!--ondblclick="back()"--> 27 28 <input type="button" value="按钮" onclick="ck()"><br> 29 30 <textarea cols="40" rows="5" id="text1" onkeyup="fun()" ></textarea> 31 <span id="span1">0</span>/100<br> 32 <p style="color: red" id="msg"></p><br> 33 34 <div id="div1" style="border:solid #fff 1px;width: 450px;height: 120px;margin: 3px;" 35 onmouseup="fun4()" onmousemove="fun6()"></div> 36 <div id="div2"style="border:solid #fff 1px;width: 450px;height: 120px;margin: 3px;" 37 onmousedown="fun5()" onmousemove="fun6()"></div> 38 <div id="div3"style="background-color:#eee;border:solid #eee 1px;width: 450px;height: 30px;margin: 3px;"> 39 40 人员：<input type="text" id="renyuan"> 41 <select id="gener"> 42 <option value="1">男</option> 43 <option value="2">女</option> 44 </select> 45 <input type="button" value="提交" style="background-color: #ccc" onclick="fun2()"> 46 <br> 47 </div><br> 48 49 <div> 50 <form action="" onsubmit="fun3()"> 51 用户名： <input type="text" id="name"><br> 52 密码：<input type="text" id="pass"><br> 53 <input type="submit" id="login"> 54 </form> 55 </div><br> 56 57 <div id="container"></div> 58 <div id="panel"> 59 <textarea 60 rows="9" 61 cols="50" 62 onkeydown="getKey(event)"> 63 </textarea> 64 </div> 65 <div onclick="fun7()"> 66 <a href="test03.html" onclick="fun7(event)">点击</a> 67 </div> 68 <script> 69 70 function ck() { 71 console.log("按钮上发生的事件类型：" + event.type) 72 } 73 74 var text1 = document.getElementById("text1"); 75 var span1 = document.getElementById("span1"); 76 var msg=document.getElementById("msg"); 77 78 function fun() { 79 var len = text1.value.length; 80 span1.innerHTML = len 81 if (len >= 100) { 82 text1.disabled = true 83 document.getElementById("msg").innerHTML="[已经输入100个字符，禁止输入]" 84 } 85 } 86 87 document.ondblclick=function (){ 88 if (event.target.id !=="text1"){ 89 text1.disabled=false; 90 text1.value=""; 91 span1.innerHTML="0"; 92 msg.innerHTML=""; 93 } 94 } 95 96 function fun2(){ 97 var input1=document.getElementById("renyuan") 98 var div2=document.getElementById("div2") 99 var sel=document.getElementById("gener") 100 var chenghu=""; 101 102 if (sel.value==="1"){ 103 chenghu="先生"; 104 }else if(sel.value==="2"){ 105 chenghu="女士";‘k9[‘ 106 } 107 108 if (input1.value.length===0){ 109 alert("请输入人员信息") 110 }else{ 111 div2.innerHTML+="<div name=‘member‘ onmousedown=‘fun6(event)‘ onmousemove=‘fun5(event)‘ onmouseup=‘fun4(event)‘ style=‘background-color: dodgerblue;" + 112 "margin:2px;padding-top:10px;text-align:center;color:#fff;width: 100px;height: 35px;‘ >"+input1.value+chenghu+"</div>" 113 } 114 } 115 116 function fun3(){ 117 var name=document.getElementById("name") 118 var pass=document.getElementById("pass") 119 if (name.value.length==0 ){ 120 alert("账号不能为空") 121 } 122 if (pass.value.length==0) { 123 alert("密码不能为空") 124 } 125 } 126 127 function fun4(event){ 128 if(130<event.clientY<250){ 129 var obj=event.target; 130 obj.className=""; 131 /* 将动被拖的div放入container */ 132 document.getElementById("div1").appendChild(obj); 133 } 134 135 } 136 function fun5(event){ 137 var obj=event.target; 138 obj.style.left=event.clientX-5+"px"; 139 obj.style.top=event.clientY-3+"px"; 140 141 } 142 function fun6(event){ 143 var obj=event.target; 144 obj.style.left=event.clientX-5+"px"; 145 obj.style.top=event.clientY-3+"px"; 146 obj.className="on"; 147 } 148 function fun7(event){ 149 alert("响应") 150 event.preventDefault() //阻止默认 151 event.stopPropagation() //停止冒泡 152 } 153 154 // function back(){ 155 // var obj=event.target 156 // if (obj.id!=="text1"){ 157 // document.getElementById("text1").value="" 158 // document.getElementById("text1").disabled=false 159 // document.getElementById("span1").innerHTML="0"; 160 // document.getElementById("msg").innerHTML="" 161 // } 162 // } 163 function getKey(event) { 164 key = event.keyCode; 165 document.getElementById("container").innerText+=key+"-"+event.type; 166 } 167 168 </script> 169 </body> 170 171 </html>