1.javascrip概述
什么是javascrip:一种基于对象和时间驱动的解释性的脚本语言，内嵌到html页面上，由浏览器解释运行。
作用：为Html页面添加动态效果，常用于 页面元素的动态显示、输入验证、客户端计算等。
js语言的组成：标准的js代码＋jquery+ajax
js代码的封装
2.如何使用js代码：helloworld
<head>
<scriptlanguage="javascript" src="first.js"></script>
<scriptlanguage="javascript">function firstMethod(){alert('你好！'); alert('您好！');alert('你好'); }</script>
</head>
<form>
<inputtype="button" value="第一个按钮" οnclick="alert('Hello world');"/>// 字面值，用完就丢弃
<inputtype="button" value="第一个方法"οnclick="firstMethod();"/>
<inputtype="button" value="第二个方法按钮"οnclick="secondMthod();"/>
</form>
//first.js
functionsecondMthod(){alert('second button');}
********************************************************************************************方式一：onXXXX＝“”
方式二：script代码块－－封装当前页面的代码<head><script>代码
方式三：js文件－－建议使用
3. 基础语法：js类似于cc/java
常量和变量
声明变量 var 变量名 ＝ 初始值；
标识符：由字符、数字、下划线、$组成，不能以数字开头；不能于系统关键字重复
注释：// /**/
大小些敏感，以；代表一行代码的结束
数据类型
基本类型：number string boolean(true=1false=0)
number:存储的都是浮点类型 1----1.00000000000000001/0.99999999999999999999
特殊类型：null undefined
复杂类型：array object Date Math、、
数据类型的转换
隐式转换：直接转换
vars = "mary";
varn = 10;
varb1 = true;
varb2 = false;
alert(s+ n);//mary10
alert(s+ b1);//marytrue
alert(n+ b1);//11
alert(b1+ b2);//1
显示转换：调用方法
"mary"+ 10.toString()--mary10
toString
parseInt
parseFloat
typeof
isNaN(是非数字吗)
运算符：
相等和严格相等== ===
三元运算符 表达式？value1:value2;
流程控制
js中的对象
Sting对象
创建：var s="";var s=new String();
属性：length
方法：toLowerCase/toUpperCase indexOf/lastIndex substring charAt/charCodeAt replace(oldstr,newstr) split
结合正则表达式使用regexp正则表达式，实现对字符串的匹配和替换
search(regexp)
match(regexp)
replace(regexp);
//global全局
//ignour忽略大小写
数组：存储一些类似的数据
创建数组、赋值
varv=new Array();
r[0]="mary";//r[0]=[10,“mary“]二维数组也可以
r[1]=10；
r[2]=true;
var r= new Array(10,"mary",false);
varr=[1,"mary",false]
属性：length
方法
a.concat(...);//a拼接...
x.join(bystr);
x.toString();
reverse 翻转
sort:默认按照字符比较；可以自定义一个用于比较的方法，由sort方法调用
slice(start,end)等价于substring
Math对象
属性：Math.E(自然数) Math.PI Math.LN2
方法：sin(x) cos(x) tan(x) asin(x)acos(x) sqrt(x) log(x) exp(x) abs(x) max(x,y,...) random() round(x) floor(x)
Number对象 toFixed方法
正则表达式
varreg=/^[a-zA-Z0-9]{3,5}$/;
varreg=/^[\u4e00-\u9fa5]{3}$/;
Date日期对象
创建日期对象
vard= new Date();--当前日期的时间
vard=new Date("2013-01-01 12:12:12")
方法：
toXX:转化为某种格式的字符串，常用于界面的显示，如：toDateString/toTimeString
getXX:读取时间，getDate getMonth
setXX:修改时间：setDate setMonth
<html>
<head>
<scriptlanguage="javascript" src="first.js"></script>
<scriptlanguage="javascript">
functionfirstMethod()
{
varss = "10";
varn = 10;
if(ss== n)alert("equal");
if(ss=== n)alert ("same");
//字符串数据类型
alert("ma\"ry\n\u4e00\u9fa5");
alert("你好！");
alert("您好！");
alert("你好");
//声明一个变量来保存数据
vari = 12;
vars = "mary";
var b = true;
}
</script>
</head>
<body>
<form>
<inputtype="button" value="第一个按钮" οnclick="alert('Hello world');"/><br/><br/>
<inputtype="button" value="第一个方法"οnclick="firstMethod();"/><br/><br/>
<inputtype="button" value="第二个方法按钮"οnclick="secondMthod();"/><br/> <br/>
<inputtype="button" value="数据的隐式转换"οnclick="convertData();"/><br/><br/>
<inputtype="text" id="textdata"/>
<inputtype="button" value="算平方" οnclick="getSquare();"/><br/> <br/>
<!--三元运算服才数字 -->
猜数字:
<inputtype = "text" id="txtNum"οnblur="guess();"/><br/><br/>
求和：
<inputtype = "text" id="aa"οnblur="getSum();"/><br/><br/>
统计js数量：
<inputtype="text" id = "txtString" οnblur="trystring();"/><br/><br/>
将js替换为＊；
<inputtype="text" id = "txtStr"οnblur="thstring();"/><br/><br/>
将js替换为＊；
<inputtype="text" id = "ttStr"οnblur="thtring();"/><br/><br/>
数组的各种操作
<inputtype="text" id="sdfs" value="123,2,4,54,67,6"/>
<inputtype="button"value="翻转"οnclick="operateArray(1);"/>
<inputtype="button"value="按字符排序"οnclick="operateArray(2);"/>
<inputtype="button"value="按数值排序"οnclick="operateArray(3);"/><br/><br/>
<inputtype="button" value="随即整数" οnclick="randomNumber();"/><br/><br/>
输入验证：用户名3-5位的数字和字母的组合
<inputtype="text" id="tname"οnblur="justname();"/><br/><br/>
<inputtype="button" value="获得日期"οnclick="fDate();"/><br/><br/>
</form>
</body>
</html>
first.js
//只能些js代码 /**/
function secondMthod(){
alert('secondbutton');
}
function convertData(){
vars = "mary";
varn = 10;
varb1 = true;
varb2 = false;
alert(s+ n);//mary10
alert(s+ b1);//marytrue
alert(n+ b1);//11
alert(b1+ b2);//1
}
//计算页面文本框中录入数值的平方
function getSquare(){
//得到文本框中的文本内容
vars = document.getElementById("textdata").value;
//isNaN是非数字马？
if(isNaN(s)){
alert("请重新你录入！");
}else{
//数据类型的转换
vardata = parseFloat(s);
alert(data* data);
}
}
function guess(){
vars= document.getElementById("txtNum").value;
varn=parseInt(s);
varresult = (n > 10) ? "too big":(n < 10 ? "toosmall":"good");
alert(result);
}
function getSum(){
varn=parseInt(document.getElementById("aa").value);
varsum=0;
for(vari=1;i<=n;i++){
sum+=i;
}
alert(sum);
}
function trystring(){
vars=document.getElementById("txtString").value;
varindex=s.indexOf("js");
varcount=0;
while(index>-1){
count=count+1;
index=s.indexOf("js",index+2);
}
alert(count);
}
//使用string对象的方法
function thstring(){
vars = document.getElementById("txtStr").value;
varindex = s.indexOf("js");
while(index> -1){
s= s.replace("js","*");
index= s.indexOf("js",index + 1);
}
document.getElementById("txtStr").value=s;
}
function thtring(){
vars = document.getElementById("ttStr").value;
// var result = s.replace(/js/gi,"*");//global全局ignour忽略大小写
//不允许录入数字，将数字替换为＊
varresult = s.replace(/\d+/g,"*");
document.getElementById("ttStr").value= result;
}
function operateArray(tt){
vars=document.getElementById("sdfs").value;
vararr=s.split(",");
switch(tt){
case1:
arr.reverse();//翻转
break;
case2:
arr.sort();
break;
case3:
arr.sort(sortFunc);//自定义比较规则，将方法对象
break;
}
alert(arr.join(";"));
}
//方法：按照数值的大小比较
function sortFunc(a,b){
returna-b;
}
function randomNumber(){
varmax=50;
varmin=5;
varr=Math.random();
varresult=Math.floor(r*(max-min)+min);
alert(result);
}
function justname(){
vars=document.getElementById("tname").value;
//定义正则表达式regular expression
// var reg=/^[a-zA-Z0-9]{3,5}$/;
varreg=/^[\u4e00-\u9fa5]{3}$/;
if(!reg.test(s))
alert("请重新录入");
}
function fDate(){
vard=new Date();
d.setDate(d.getDate()-3);
alert(d.toDateString("yyyy-MM-dd"));
}
=============================================================================1 function 对象
定义函数／方法：function 函数名（参数）{} 使用function关键字，参数直接定义，使用return实现返回
重载：
js中，方法的名称相同，覆盖（以最后一次定义的为准）
arguments对象：当前方法的参数数组 arguments.length/arguments[i]
js中定义方法：
方法一：function关键字明文的定义一个方法
方法二：使用function对象，创建一个方法的实例－－最后一个参数是方法体，其他参数是方法的参数
方法三：使用匿名函数，常用于实现内部方式
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<h4>方法重载</h4>
<input type="button"value="模拟重载" οnclick="tryArguments(12,30);"/>
functiontryArguments(){//function关键字创建方法
if(arguments.length==1){
vardata=arguments[0];
alert(data*data);
}
elseif(arguments.length==2){
alert(arguments[0]+arguments[1]);
}else{
alert("NaN");
}
}
<input type="button"value="内部方法" οnclick="ttFunc();"/>
//js中定义方法
/*方法一：function关键字明文的定义一个方法
* 方法二：使用function对象，创建一个方法的实例－－最后一个参数是方法体，其他参数是方法的参数
*/
function ttFunc(){//function对象创建方法
varf1=new Function("a","b","alert(a+b);");
f1(10,20);
}
<input type="button"value="内部方法排数组" οnclick="testFunc();"/>
function testFunc(){
vararray=[12,3,10,5,34];
//使用Function对象定义内部使用的方法，实现数组按照数值大小的排序
varsortFunc=new Function("a","b","return a-b");
array.sort(sortFunc);
alert(array.toString());
}
<input type="button"value="匿名函数" οnclick="nimingfunc();"/>
//方法三：使用匿名函数，常用于实现内部方式
function nimingfunc(){
varf1=function(a,b){
alert(a+b);
};
f1(10,20);
}
<input type="button"value="匿名排序" οnclick="nimingpaixu();"/>
function nimingpaixu(){
vararray=[15,3,10,2,7,25,8];
varsortFunc=function(a,b){
return b-a;
};
array.sort(sortFunc);
alert(array.toString());
}
全局函数：parseInt/parseFloat/isNaN/eval/decodeURI/encodeURI
decodeURI:对encodeURI()函数编码国的URI进行解码
encodeURI:把字符串作为URI进行编码
eval（str)：计算某个字符串
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<h4>模拟计算器</h4>
<inputtype="text" id="textdata"/>
<input type="button"value="1" οnclick="cal(this.value);"/>
<input type="button"value="2" οnclick="cal(this.value);"/>
<input type="button"value="3" οnclick="cal(this.value);"/>
<input type="button"value="4" οnclick="cal(this.value);"/>
<input type="button"value="5" οnclick="cal(this.value);"/>
<input type="button"value="6" οnclick="cal(this.value);"/>
<input type="button"value="7" οnclick="cal(this.value);"/>
<input type="button"value="8" οnclick="cal(this.value);"/>
<input type="button"value="9" οnclick="cal(this.value);"/>
<input type="button"value="0" οnclick="cal(this.value);"/>
<input type="button"value="+" οnclick="cal(this.value);"/
<input type="button"value="-" οnclick="cal(this.value);"/>
<input type="button"value="*" οnclick="cal(this.value);"/>
<input type="button"value="/" οnclick="cal(this.value);"/>
<input type="button"value="=" οnclick="cal(this.value);"/>
<input type="button"value="%" οnclick="cal(this.value);"/>
function cal(str){
if(str== "="){
varexpression=document.getElementById("textdata").value;
varexpression=document.getElementById("textdata").value=eval（expression);
}
else{
document.getElementById("textdata").value+=str;
}
}
2 DHTML－－动态的html
什么是DHTML：利用js的对象及其方法实现动态效果
DHTML对象模型树
location--导航地址栏
history--历史访问记录
event
navigator
document--整个html文档
3 window 对象
属性：document:窗口中显示的html文档
history
location
name
opener:打开当前窗口的window对象
对话框：alert(str)/confirm(str) prompt(str,value):输入对话框，采用文本框输入信息，str为提示信息，value为初始值，确定返回输入值，其他返回undefined;
打开窗口：window.open(rul)--代码中动态的打开某个页面
定时器方法:setInterval/clearInterval setTimeout/clearTimeout
------------------------------------------------------------------
//弹出的窗口是固定的不可以被修改
<input type="button"value="删除"οnclick="deleteData();"/>
function deleteData(){
varr=window.confirm("是否真的要删除？");
alert(r);
window.prompt("请输入");
}
//其中id 可以防止打开多个，高宽可以设置打开窗口的的大小，toolbar可以设置工具菜单是否被打开
<input id="aaa"type="button" value="打开窗口 " οnclick="openData();"/>
function openData(){
window.open("http://tts6.tarena.com.cn","aaa","width=400,height=600,toolbar=yes");
}
//时间
<input type="text"id="txtTime"/>
<input type="button"value="显示时间" οnclick="showTime();">
<input type="button"value="启动时钟" οnclick="startTime();">
<input type="button"value="停止时钟" οnclick="stopTime();"/>
function showTime(){
varnow=new Date();
document.getElementById("txtTime").value=now.toLocaleTimeString();
}
//启动动态时钟
var timer;
function startTime(){
//每个1s调用showTime方法：每隔一秒执行function对象
timer=window.setInterval("showTime()",1000);
}
//停止时钟
function stopTime(){
window.clearInterval(timer);定时器方法:setInterval/clearInterval setTimeout/clearTimeout
}
//5S后弹出hello
<input type="button"value="一次性弹出菜单" οnclick="wait();"/>
如果想取消此操作，请点击<a href="javascript:cancelwait();">这里</a>
var timer1;
function wait(){
timer1=window.setTimeout("alert('hello!')",5000);
}
function cancelwait(){
window.clearTimeout(timer1);
}
4. document 对象：代表的就是整个html文档 ,将整个文档做成一棵树,以树形的方式操作它－－DOM操作－－标准DOM操作（适应性好，繁琐）
1） 找到节点对象：遍历树
document.getElementById－－根据id精确查找
层次结构查询
parentNode/
childNodes/
lastChild/
firstChild
document.getElementsByTagName--根据标签的名称查找
<imgsrc="a.jpg"/>
node--节点，并不知道什么节点
node.src/value/type
--------------------------------------------------------------------------
例：修改图像、链接、段落、以及样式
<input type="button"value="实验DOM operation"οnclick="testDOM();"/>
<img width="300px"height="" id="img1"src="blue.jpg">
<a id="link"href="#">click me</a>
<p id="p1">段落</p>
<h3id="h3">h3</h3>
function testDOM(){
//页面上有多少input元素
varn=document.getElementsByTagName("input").length;
alert(parseInt(n));
//修改图像
varobj=document.getElementById("img1");
obj.src="only.jpg";
//修改链接
varlinkObj=document.getElementById("link");
linkObj.href="http://tts6.tarena.com.cn";
linkObj.innerHTML="aaaa"
//修改段落
varpObj=document.getElementById("p1");
pObj.innerHTML="newtext";
pObj.style.color="red";
pObj.style.backgroundColor="gray";
pObj.style.fontSize="20pt";
//修改h3的样式类
varh3Obj=document.getElementById("h3");
h3Obj.className="style1";
//获得子点（其中包含空格和回车）
varulObj=document.getElementById("ul");
varcount=0;
for(vari=0;i<ulObj.childNodes.length;i++){
if(ulObj.childNodes[i].nodeName=="LI"){
count++;
}
}
returncount;
}
2) 读取或者修改节点的信息：将html标记对象
<inputtype="text"/>
a.将html标记对象化：img.src/a.href/input.value/type
b.innerHTML:标记中间的文本
c.style.color/fonSize/display:修改简单的样式，每次只能修改一个
d.className="";--复杂样式定义
e)nodeName---得到全大写的节点的名称
onXXXX = "returnfalse;"可以取消事件
------------------------------------------------------------
例如：模拟用户输入验证
用户名：<input type="text" id="uName"οnblur="valiName();"/>
<span id="nameinfo">3-5位的字母数字的组合</span><br/>
电话：<input type="text" id="utel"οnblur="valiTel();"/>
<span id="telinfo">5位的数字的组合</span><br/>
<input type="submit"value="保存" οnclick="returnvaliAllData();"/>
//验证用户名
function valiName(){
varname=document.getElementById("uName").value;
varreg=/^[a-zA-Z0-9]{3,5}$/;
varspanObj=document.getElementById("nameinfo");
if(reg.test(name))
spanObj.style.color="green";
else
spanObj.style.color="red";
returnreg.test(name);
}
//验证电话
function valiTel(){
vartel=document.getElementById("utel").value;
varreg=/^\d{5}$/;
varspanObj=document.getElementById("telinfo");
if(reg.test(tel))
spanObj.style.color="green";
else
spanObj.style.color="red";
returnreg.test(tel);
}
//逐一验证所有的项
function valiAllData(){
varr1=valiName();
varr2=valiTel();
alert(r1&&r2);
returnr1&&r2;
}
<h5>模拟购物车</h5>
<table border="1"id="table1" >
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>aaa</td>
<td>10.00</td>
<td><inputtype="button" value="-"οnclick="sub(this);"/><input type="text"value="1"/>
<inputtype="button" value="+"οnclick="add(this);"/></td>
<td></td>
</tr>
<tr>
<td>sdfaa</td>
<td>28.00</td>
<td><inputtype="button" value="-"οnclick="sub(this);"/><input type="text"value="1"/>
<inputtype="button" value="+"οnclick="add(this);"/></td>
<td></td>
</tr>
</table>
总计：<span id="sp1"οnblur="calSum();"></span>
//增加购物车的数量
function add(btnObj){
//得到td对象的子对象
varnodes=btnObj.parentNode.childNodes;
for(vari=0;i<nodes.length;i++){
varchild=nodes[i];
if((child.nodeName=="INPUT")&& child.type=="text"){
varn=parseInt(child.value);
n++;
child.value=n;
}
}
calSum();
}
function sub(btnObj){
varnodes=btnObj.parentNode.childNodes;
for(vari=0;i<nodes.length;i++){
varchild=nodes[i];
if(child.nodeName=="INPUT"&&child.type=="text"){
varn=parseInt(child.value);
if(n>1){
n--;
child.value=n;
}
}
}
calSum();
}
/*价格在第二个td里，数量在地三个td里的第二个input里
row.getElementsByTagsName("td")[1].innerHTML;
row.getElementsByTagsName("td")[2].getElementsByTagsName("input")[1].value
*/
function calSum(){
//找到所有的tr
vartotal=0;
vartObj=document.getElementById("table1");
varrows=tObj.getElementsByTagName("tr");
for(vari=1;i<rows.length;i++){
varrow=rows[i];
varprice=parseFloat(row.getElementsByTagName("td")[1].innerHTML);
varcount=parseInt(row.getElementsByTagName("td")[2].getElementsByTagName("input")[1].value);
varsum=price*count;
row.getElementsByTagName("td")[3].innerHTML=sum.toFixed(2);
total+=sum;
}
document.getElementById("sp1").innerHTML=total.toFixed(2);
}
3.为文档添加新内容
document.createElement(elementName)
parentNode.appendChild(newNode)
parentNode.insertBefore(newNode,refNode)--refNode参考节点
==========================================
<form id="form1">
<input type="button"value="添加新节点" οnclick="addnewNode();"/>
function addnewNode(){
//找到服元素
varformObj=document.getElementById("form1");
//按钮后添加一个文本框
vartxtObj=document.createElement("input");
txtObj.type="text";
txtObj.value="mary";
document.getElementById("form1").appendChild(txtObj);
//文本框后添加一个段落
varpObj=document.createElement("p");
pObj.innerHTML="段落的文本";
document.getElementById("form1").appendChild(pObj);
//在第一个节点前加一个段落
varpObj=document.createElement("p");
pObj.innerHTML="段落的文本";
document.getElementById("form1").insertBefore(pObj,formObj.firstChild);
//文本框后添加一个按钮
varbtnobj=document.createElement("input");
btnobj.type="button";
btnobj.value="newButton";
//事件定义
btnobj.οnclick=function(){alert("helloworld");};
formObj.appendChild(btnobj);
}
=========
parentNode.removeChild(childNode)
a 创建新节点createElement("");
b 设置节点的信息
c 加入文档 appendChild/insetBefore新节点已经加入父节点
4 删除节点node.parentNode.removeChild(childNode);
eHTML DOM:原有的DOM基础上，对一些常用的操作进行封装，简化代码。－－将所有的元素封装为对象，比如input对象 A对象
1 select和option
sel.options
sel.add
varo=new Option(text,value);
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
省：<select id="sel1">
<option>--清选择--</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
城市：<select id="selCity">
<option>--清选择--</option>
</select>
//设计数据存储：二维数组
var array=new Array();
array[0]=["清选择"];
array[1]=["海淀","朝阳"];
array[2]=["石家庄"];
array[3]=["郑州","新乡"];
//选择城市
function createCity(){
//第一个下拉框的选项
varindex=document.getElementById("sel1").selectedIndex;
//当前需要的数据
vardata=array[index];
varselCity=document.getElementById("selCity");
//删除原有的选项
while(selCity.childNodes.length>2){
selCity.removeChild(selCity.lastChild);
}
//加入新选项
for(vari=0;i<data.length;i++){
varobj=document.createElement("option");
obj.innerHTML=data[i];
selCity.appendChild(obj);
}
}
//使用封装的方式实现相同的功能
function createCity(){
//第一个下拉框的选项
varindex=document.getElementById("sel1").selectedIndex;
//当前需要的数据
vardata=array[index];
varselCity=document.getElementById("selCity");
//删除原有的选项
selCity.options.length=0;
//加入新选项
for(vari=0;i<data.length;i++){
varobj=new Option(data[i]);
selCity.options[i]=obj;
// selCity.add(obj);
}
}
2 table
table.insertRow(index)--返回新创建的行对象
row.insertCell(index)－－返回新创建的单元格对象
cell.innerHTML="mary"
Table对象
属性：rows/cells
方法：insertRow(index) deleteRow(index)
TableRow对象
属性：cells/innerHTML/rowIndex
方法：insertCell(index) deleteCell(index)
TablCell对象
属性：cellIndex/innerHTML/colSpan/rowSpan
增加表格
ID:<inputtype="text" id="tID"/>
Name:<inputtype="text" id="tName"/>
<input type="button"value="增加表格" οnclick="addRow();"/>
<table border="1"id="t1">
<tr>
<td>ID</td>
<td>姓名</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
</tr>
</table>
//为表格添加行以及单元格
function addRow(){
vart=document.getElementById("t1");
varrow=t.insertRow(t.rows.length);
//为行添加单元格
varcell1=row.insertCell(0);
cell1.innerHTML=document.getElementById("tID").value;
varcell2=row.insertCell(1);
cell2.innerHTML=document.getElementById("tName").value;
}
window其他子对象
1 screen对象(没有方法)屏幕的信息
属性：width/height/availWidth/availHeight(可用的高)
2 history对象：历史访问记录
属性：length
方法：back()/forward()/go(num)
3 location对象：地址栏
属性：href
location.href="";//保留历史记录
方法：replace(url)/reload()
location.replace("");//不会保留历史记录
location.
<input type="button"value="使用location对象"οnclick="testLocation();">
function testLocation(){
location.href="http://tts6.tarena.com.cn"
//location.replace("http://tts6.tarena.com.cn");
}
A页面－－B页面
a静态/window.open动态在新窗口中打开/location动态，不在新窗口打开
4 navigator对象：浏览器软件的相关信息
代码动态的遍历某个对象的所有属性
<input type="button"value="使用navigator对象"οnclick="testNavigator();">
function testNavigator(){
varstr="";
for(varr in navigator){
str+=r+":"+navigator[r]+"\n";
}
alert(str);
}event:
1 事件的分类：鼠标事件 键盘事件 状态改变事件
鼠标事件：onclick ondblclick onmousedown onmouseup onmouseover onmouseout
键盘事件：onkeydown onkeyup
状态事件：（onload onunload－－body）onchange onfocus onblur onresize(onsubmit--form)
2 事件可以取消
onXXXX="returnfalse;"
3 js中，事件有冒泡机制
如果层次元素定义了相同的事件，从最底层开始触发，层层向上
利用冒泡机制，解决事件重复定义－－使用父元素，比如;div包含，定义div的onclick
计算器
<div οnclick="cal(event);">
<inputtype="button" value="1"/>
<inputtype="button" value="2"/>
<inputtype="button" value="3"/>
<inputtype="button" value="4"/>
<inputtype="button" value="5"/><br/>
<inputtype="button" value="6"/>
<inputtype="button" value="7"/>
<inputtype="button" value="8"/>
<inputtype="button" value="9"/>
<inputtype="button" value="0"/><br/>
<inputtype="button" value="+"/>
<inputtype="button" value="-"/>
<inputtype="button" value="*"/>
<inputtype="button" value="/"/>
<inputtype="button" value="%"/><br/>
<inputtype="button" value="="/>
<inputid="resultare"type="text"/>
</div>
//简化计算器e.target火狐浏览器认识 IE谷歌浏览器只认识e.srcElement
function cal(e){
//得到出发事件的那个对象元素
varnode=e.target||e.srcElement;
vartxtObj=document.getElementById("resultare");
//是否点击的是按钮
if(node.nodeName== "INPUT" && node.type == "button"){
//是不是＝
if(node.value== "="){
txtObj.value= eval（txtObj.value);
}else{
txtObj.value+= node.value;
}
}
}
4 event对象：只要有事件发生，event对象，其中会有数据
event.clientX/clientY
event.srcElement/target--触发事件的对象
event.srcElement
5 元素定义事件
静态定义：<element onxxxx=""/>
动态定义：obj.οnclick=functin 对象；
6 面向对象基础：数据和行为的封装
js中如何实现封装
封装：
自用：js代码中使用，随便使用某种方式
他用：数据封装后传递给服务器端，采用大家都认识的格式－－JSON
<input type="button"value="实现数据封装"οnclick="testObject();">
function testObject(){
//对象：name 为mary，age为18，方法sing调用弹出hello
//o必须是一个对象，封装了两个数据一个方法
varo = new Object();
o.name= "mary";
o.age= 18;
o.sing= function(){alert("Hello");};
alert(o.name);
alert(o.age);
o.sing();
}
a> 使用Object对象实现简单封装
创建一个object对象，直接定义属性和方法不能实现重用
b> 实现自定义封装 构造函数，实现真正的凤凰钻过
<input type="button"value="自定义封装" οnclick="testPerson();">
//定义Person
function Person(n,a){
this.name= n;
this.age= a;
this.introSelf=function(){
varstr="i am "+this.name+", i am "+a+" years old.";
alert(str);
};
}
//测试Person
function testPerson(){
varp1=new Person("mary",18);
alert(p1.name+":"+p1.age);
p1.introSelf();
varp2=new Person("tom",20);
alert(p2.name+":"+p2.age);
p2.introSelf();
}
c> JSON
使用名/值对的方式定义
名称使用“”引起来
多对定义之间使用，隔开
<input type="button"value="使用JSON封装" οnclick="testJSON();">
//使用JSON语法封装数据--交换（往往只封装属性）
function testJSON(){
varp={
"name":"jerry",
"age":18
};
alert(p.name+":"+p.age);
}
/*18 mary/20 tom/30 jerry
varp1={"name":"mary","age":18};
varp2={"name":"tom","age":20};
varp3={"name":"jerry","age":30};
var array=[p1,p2,p3];
*/
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
