本文详细介绍了JavaScript的基础知识，包括概述、使用方法、基础语法、常用对象等，并深入探讨了DHTML、DOM操作、事件处理等内容。
1.javascript概述
2.如何使用
3.基础语法
4.常用对象
a.js中的对象
b.String对象
c.数组：存储一些类似的数据
d.Math对象：常见的数学计算
e.Number 对象
f.正则表达式对象
g.Date 日期对象
h.Function 对象
1).定义函数/方法
2).重载
3).js中定义方法
i).全局函数
5.DHTML--动态的 HTML
a) 什么是 DHTML
b) 对象模型树
c) window 对象
d) document 对象
1).找到节点对象：遍历树
2).读取或者修改节点的信息
3).为文档添加新的内容
4).删除节点
e) HTML DOM
1).Select和Option
2).Table
f) screen 对象
g) history 对象
h) location 对象
j) event：事件
1).事件的分类
2).事件可以取消
3).js中，事件有冒泡机制
4).event 对象：
5).元素定义事件
6.面向对象基础：数据和行为的封装
a).使用 Object 对象实现简单封装
b).实现自定义封装：构造函数，实现真正的封装
C).JSON语法实现封装
-----------------------------------------
1、javascript概述
什么是 javascript：一种基于对象和事件驱动的解释性的脚本语言，
内嵌到 html 页面上，由浏览器解释运行
作用：为 html 页面添加动态效果，
常用于 页面元素的动态显示、输入验证、客户端计算等
js语言的组成：标准的 js 代码 + jquery + ajax
2.如何使用 js 代码
方式1：onXXXX=""
方式2：script代码块---封装当前页面的代码
<head><script>代码
方式3：js文件---建议使用
代码写入单独的 js 文件
页面使用 <script src 引入
3.基础语法：js 类似于 c/java
a、基础
常量和变量
声明变量 var 变量名称 = 初始值 ;
标识符： 由字母、数字、下划线、$组成，不能以数字开头；不能与系统关键字重复
注释 // /**/
大小写敏感，以 ; 代表一行代码的结束
b、数据类型
基本类型：string、number、boolean
number:存储的都是浮点类型 1----1.00000000000000001/0.99999999999999999999
特殊类型：null、undefiend
复杂类型：Date、Math、Array、Object
...
c、数据类型的转换
隐式转换：直接转换--规则
显式转换：调用方法---parseInt/parseFloat/toString/typeof
额外的方法： isNaN---是否为数值
--------------------------------
练习：求平方
.html:
<input type="text" id="txtData" />
<input type="button" value="计算" onclick="getSquare();"/>
.js:
function getSquare(){
var s= document.getElementById("txtData").value;
if(isNaN(s)){
alert("清重新输入 ");
}else{
var data=parseFloat(s);
alert(data*data);
}
}
-------------------------
d、运算符
相等和严格相等 == ===
三元运算符 表达式?value1:value2;
---------------------------------
练习:利用三元运算符猜数字
.html:
<input type="text" id="txtNum" onblur="guess();"/>
.js:
function guess(){
var s=document.getElementById("txtNum").value;
if(isNaN(s)){
alert("清重新录入");
}else{
var n=parseInt(s);
var result= n>56?"大了":"小了";
result = n==56?"对了":result;
alert(result);
}
}
------------------------------------------
e、流程控制
条件
if/else
switch/case
循环
for
while
------------------------------------
练习：
.html:
<input type="button" value="1－50的和" onclick="getSum();"/>
.js:
function getSum(){
var sum=0;
for(var i=1;i<=50;i++){
sum+=i;
}
alert(sum);
}
------------------------------------
---------------------------------------------------------------------------------------
4、js对象
------------------------------------------------
a、js中的对象
内置对象
简单对象：String/Number/Boolean
复杂对象：Array/Date/Math/Regex...
浏览器对象
DOM对象
ActiveX对象
------------------------------------------------
b、String对象
创建：var s=""; var s = new String();
属性： length
方法：
常用方法
toLowerCase/toUpperCase
indexOf/lastIndexOf
charAt/charCodeAt
substring
replace(oldstr,newstr)
split
结合正则表达式使用，实现对字符串的搜索、匹配和替换---常用于操作字符串
search
match
replace
------------------------------------
练习:计算字符串中出现js的次数
.html:
<input type="text" id="txtString" onblur="tryString();" />
.js:
function tryString(){
var s=document.getElementById("txtString").value;
var count=0;
var index=s.indexOf("js");
while(index>-1){
//abcjsjkjsd
// 012345 6789
count++;
index=s.indexOf("js",index+2);
}
alert(count);
}
---------------------------------
练习:用正则表达式代换字符串中的数字
.html:
<input type="text" id="txtString" onblur="tryString();" />
.js:
function tryString(){
var s = document.getElementById("txtString").value;
var s= s.replace(/\d+/g,"*");
document.getElementById("txtString").value=s;
}
----------------------------------------
------------------------------------------------
c、数组：存储一些类似的数据
创建数组、赋值
var r = new Array();
r[0] = "mary";
r[1] = 10;
r[2] = true;
var r = new Array(100,"mary",false);
var r = [100,"mary",false];
属性：length
方法
toString/join：链接，常用于输出
concat：相加
reverse:翻转
sort：默认，按照字符比较；可以自定义一个用于比较的方法，由sort方法调用
slice:
------------------------------------
练习:翻转，排序方法，用传参数的方法
.html:
<input type="text" id="txtArray" value="123,2,3,56,789,6" />
<input type="button" value="翻转" onclick="operateArray(1);"/>
<input type="button" value="默认按字符排序" onclick="operateArray(2);"/>
<input type="button" value="按数值排序" onclick="operateArray(3);"/>
.js:
function operateArray(t){
var s= document.getElementById("txtArray").value;
var array =s.split(",");
//判断操作的类型
switch(t){
case 1:
//翻转
array.reverse();
break;
case 2:
//排序--按照字符排序
array.sort();
break;
case 3:
//按照--数值排序
array.sort(sortFunc);
break;
}
//用分号连接和输出
alert(array.join(";"));
}
//自定义的比较方法
function sortFunc(a,b){
return a-b;
}
-------------------------------------
------------------------------------------------
d、Math对象：常见的数学计算
使用，不需要new ，直接使用
属性：数学常数
方法：round/random/floor/ceil/abs/max/...
------------------------------------
练习:指定一个范围获取随机数
.html:
<input type="button" value="范围" onclick="randomNumber();"/>
.js:
function randomNumber(){
var r=Math.random();//得到的是一个随机的小数 0 =< r < 1
var max=30;
var min=1;
var result=Math.floor(r*(max-min)+min);
alert(result);
}
------------------------------------------------
e、Number 对象
toFixed 方法
------------------------------------------------
f、正则表达式对象
var r = /\d{3}/;
r.test(string);---true/false
正则表达式:/ /
/^ $/ 从头到尾
/ /gi , g全局 i不区分大小写
汉字的范围:\u4e00-\u9fa5
-----------------------------
实现录入的验证
用户名：_________ 必须是3到5个长度的大、小写字母、数字的组合 [a-zA-Z0-9]{3,5}
练习:实现对文本的验证
.html:
<input type="text" id="txtName" onblur="judgeName();" />
.js:
function judgeName(){
var name=document.getElementById("txtName").value;
//定义一个正则表达式
var reg=/^[\u4e00-\u9fa5]{3}$/;
//验证string,并判断，提示
if(!reg.test(name))
alert("清重新录入");
}
------------------------------------------------
g、Date 日期对象
创建日期对象
var d = new Date();---当前日期和时间
var d = new Date("2013-01-01 12:12:12");
* 对Date的扩展，将 Date 转化为指定格式的String
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
* 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* eg:
* (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
方法
toXXX：转换为某种格式的字符串，常用于界面的显示，如 toDateString/toTimeString/.
...
getXXX：读取时间，如getFullYear/getMonth/getDate
setXXX:修改时间，如setDate/setMonth/...
---------------------------------------------------------------------------------------
-----------------------------------------------------------
--------------第二天-------------
--------------------------------------------
h, function对象
函数的参数 不用写数据类型
1.使用 function关键字，参数直接定义，使用return返回值
2.不能定义重载的方法，新的方法覆盖旧的方法
重载：js中方法名相同，覆盖(以最后一次为准)
模拟方法重载的实现:(只需要一个方法就可以)用arguments
arguments:当前方法的参数数组
arguments.length-----得到个数
xxx[index]------得到元素
练习 :
.html:
<input type="button" value="模拟重载" onclick="tryArguments(12);" />
.js:
function tryArguments(){
if(arguments.length==1){
var data=arguments[0];
alert(data*data);
}else if(arguments.length==2){
alert(arguments[0]+arguments[1]);
}
}
3.定义方法
方式一：function 声明(一般方式)
方式二：使用function对象,创建一个方法的实例,最后一个参数是方法体，其它参数是方法的参数
例子:function对象
function testFunc(){
var array=[1,12,56,789];
//function对象
var sortFunc =new Function("a","b","return a-b;");
array.sort(sortFunc);
alert(array.toString);
}
方式三：使用匿名函数实现(优先使用)
var f1=function(a,b){
alert(a+b);
};
f1(10,20);
例子:匿名函数
function testFunc(){
var array=[1,12,56,789];
//匿名函数
var sortFunc =function(a,b){
return a-b;
};
array.sort(sortFunc);
alert(array.toString);
}
4.全局方法
parserInt/parseFloat
isNaN
eval 用于计算某个字符串 "1+2-3+5" -> 5
decodeURI/encodeUrI
解码/编码
练习:模拟简单的计算器
.html:
<input type="button" value="1" onclick="cal(this.value);" >
<input type="button" value="2" onclick="cal(this.value);" >
<input type="button" value="3" onclick="cal(this.value);" >
<input type="button" value="4" onclick="cal(this.value);" >
<input type="button" value="5" onclick="cal(this.value);" >
<input type="button" value="6" onclick="cal(this.value);" >
<input type="button" value="7" onclick="cal(this.value);" >
<input type="button" value="8" onclick="cal(this.value);" >
<input type="button" value="9" onclick="cal(this.value);" >
<input type="button" value="0" onclick="cal(this.value);" >
<input type="button" value="+" onclick="cal(this.value);" >
<input type="button" value="-" onclick="cal(this.value);" >
<input type="button" value="=" onclick="cal(this.value);" >
<input type="text" id="txtData" >
.js:
function cal(str){
if(str=="="){
var v=document.getElementById("txtData").value;
document.getElementById("txtData").value=eval(v);
}else{
document.getElementById("txtData").value+=str;
}
}
--------------------------------------------------------------------------------
5.DHTML---------动态的HTML----
-----------
a.DHTML：利用js方法和对象，实现动态效果
b.对象模型树DOM
window
-history
-navigator
-document
-location-------导航栏
-event----------事件
c.window对象 window.xxx
window对象表示浏览器中打开的窗口
常用属性:
-document：整个html文档
-history:历史访问记录
-location:导航地址栏
-name:
-opener:
对话框
alert(str)
confirm(str);//确认对话框, str 提示信息, 有返回值true/false
prompt(str,value);//输入框,str提示信息 ,s有返回值
窗口的打开和关闭
open---- 代码中动态的打开某个页面
open(url);
open(url,name);//为窗口取了名字不会重复打开
open("url","name","width=xxx,height=xxx,toolBar=yes");
例子;
.html:
<input />
.js:
window.open("url");
定时器方法:时钟
setInterval(对象或则代码,时间例如1000毫秒);周期性触发代码，返回一个定时器对象
clearInterval(定时器对象);停止定时器对象
setTimeout(,);一次性触发,时间倒计时
例子:每隔1s调用showTime方法
.html:
<input type="text" id="txtTime" />
<input type="button" value="显示时间" onclick="showTime();" />
<input type="button" value="启动时钟" onclick="startClock();" />
<input type="button" value="停止时钟" onclick="stopClock();" />
.js:
function showTime(){
var now =new Date();
document.getElementById("txtTime").value=now.toLocaleTimeString();
}
var timer;
function startClock(){
//每隔一秒地调用showTime对象
timer=window.setInterval(showTime,1000);
//window.setInterval("showTime();",1000);//也可
}
function stopClock(){
window.clearInterval(timer);
}
例子:一次性倒计时时间，和取消
.html:
<input type="button" value="一次性" onclick="wait();" />
如果想取消此操作清点击<a href="javascript:cancelWait();">这里</a>
.js:
var timer1;
function wait(){
timer1= window.setTimeout("alert('hello');",5000);
}
function cancelWait(){
window.clearTimeout(timer1);
}
d.document对象:代表整个html文档, 将整个文档做成一颗节点树,以DOM的方式操作document
DOM(文档对象模型)节点树 根元素－html-head body --...
((增删改查))
1.找到节点对象:遍历树(三种查找方法)
*.document.getElementById();------根据id精确查询
*.层次结构查询:
parentNode/childNodes/lastChild/firstChild
返回对象(不同的名字使用)
length属性 , 空白算一个子节点,每个子节点的属性nodeName
*.getElementsByTagName(标签名字)---根据标签的名称,返回一个数组
2.读取或者修改节点的信息:将html标记对象化,对象可用标记的属性
1).将html标记对象化; 例如:xxx.src,xxx.href,xx.value
2).innerHTML ; 改变标记中间文本 ;
3).style.color/fontsize/dispaly;修改简单样式,每次只能修改一个
4).className="";修改复杂样式(先定义一个样式类,再调用)
5).nodeName 属性;得到全大写的节点名称(不知道是什么节点的时候)
onxxx="return false;";取消事件
例子:修改html,js
.html:
<input type="button" value="按钮" onclick="testDOM();" />
<img id="img1" src="xxx.jpg" />
<a id="link1" href="#"> Click me </a>
<p id="p1">段落</p>
<h3 id="h3">h3 text</h3>
.js:
function testDom(){
//修改图片
var obj=document.getElementById("img1");
obj.scr="xxx.jpg";
//修改链接
var linkObj=document.getElementById("link1");
linkObj.href="http://www.google.com";
linkObj.innerHTML="google";
//修改简单样式
var pObj=document.getElementById("p1");
pObj.innerHTML="new text";
pObj.style.color="red";
pObj.style.backgroundColor="gray";
pObj.style.fontSize="30";
//修改复杂样式
var h3Obj=document.getElementById("h3");
h3Obj.className="style1";
}
例子:模拟输入验证
.html:
用户名:<input style="text" id="txtName" onblur="valiName();" />
<span id="nameInfo">3-5位字母和数字的组合</span>
<br/>
电话:<input type="text" id="txtPhone" onblur="valiPhone();" />
<span id="phoneInfo">5位数字</span>
<input type="button" value="保存" onclick="return validateDate();" />
.js:
//验证姓名
function valiName(){
var name=document.getElementById("txtName").value;
var reg=/^[a-zA-Z0-9]{3,5}$/;
var spanObj=document.getElementById("nameInfo");
if(reg.test(name)){
spanObj.style.color="green";
}else{
spanObj.style.color="red";
}
return reg.test(name);
}
//验证电话
function valiPhone(){
var phone=document.getElementById("txtPhone").value;
var reg=/^\d{5}$/;
var spanObj=document.getElementById("phoneInfo");
if(reg.test(phone)){
spanObj.style.color="green";
}else{
spanObj.style.color="red";
}
return reg.test(phone);
}
逐一验证所有的项
function validateDate(){
var r1=valiName();
var r2=valiPhone();
return r1&&r2;
}
例子:模拟购物车
.html
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>aaa</td>
<td>10.0</td>
<td>
<input type="button" value="-" onclik="sub(this);" />
<input type="text" value="1"/>
<input type="button" value="+" onclick="add(this);" />
</td>
<td></td>
</tr>
<tr>
<td>bbb</td>
<td>20.0</td>
<td>
<input type="button" value="-" onclik="sub(this);" />
<input type="text" value="1"/>
<input type="button" value="+" onclick="add(this);" />
</td>
<td></td>
</tr>
</table>
总计：<span id="totalPrice"> </span>
.js:
function sub(btnObj){
var nodes=btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
var child=nodes[i];
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value);
if(n>0){
n--;
child.value=n;
}
}
}
//计算
calSum();
}
function add(btnObj){
var nodes=btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
var child=nodes[i];
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value);
n++;
child.value=n;
}
}
//计算
calSum();
}
//表行：价格在第二个td里，数量在第三个td里的第二个input里
/*循环行
;*/
function calSum() {
//找到所有的tr表行
var tableObj = document.getElementById("table1");
var rows = tableObj.getElementsByTagName("tr");
//从第二行开始循环
var total = 0;
for(var i=1;i<rows.length;i++)
{
//得到当前行
var row = rows[i];
//先找到价格
var price = parseFloat(row.getElementsByTagName("td")[1].innerHTML);
//找到数量
var quantityStr = row.getElementsByTagName("td")[2].
getElementsByTagName("input")[1].value;
var q = parseInt(quantityStr);
//计算小计：显示第4个td，计算总计
var sum = price * q;
row.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
//计算总计
total += sum;
}
//显示总计
document.getElementById("totalPrice").innerHTML = total.toFixed(2);
}
------------------------------------------------------------------------------------------
----------第二天------------
------------------------------------------------------
3.为文档添加新的内容
a)创建新节点createElement("")
b)设置节点的信息
c)加入文档appendChild/insertBefore
新节点必须加入某个父节点
创建新节点
document.createElement(标签名字);
添加新节点(作为已有节点的子节点添加)
parentNode.appendChild(newNode);默认在最后添加
添加新节点,加在谁(refNode)之前
parentNode.insertBefore(newNode,refNode)
删除节点
parentNode.removeChild(childNode);删除某个子节点
例子:添加节点
.html:
<form id="form1">
<input type="button" value="添加一个新节点" onclick="addNewNode()" />
</form>
.js:
function addNewNode(){
var formObj=document.getElementById("form1");
//按钮后添加一个文本框
var txtObj=document.createElement("input");
txtObj.type="text";
txtObj.value="java";
formObj.appendChild(txtObj);
//按钮前添加一个段落
var pObj=document.createElement("p");
pObj.innerHTML="段落的文本";
formObj.insertBefore(pObj,formObj.firstChild);
//文本框后添加一个按钮，为按钮添加设置单击事件
var btnObj=document.createElement("input");
btnObj.type="button";
btnObj.value="new button";
btnObj.onclick=function(){
alert("hello");
};
formObj.appendChild(btnObj);
}
例子:
onchange事件
.selectedIndex 获取被选择的option下标
.html:
省:<select id="sel1" onchange="createCities">
<option>请选择</option>
<option>北京</option>
<option>山东</option>
<option>济宁</option>
</select>
城市:<select id="selcity">
<option>请选择</option>
</select>
.js:
var array=new Array();
array[0]=["请选择"];
array[1]=["海淀","朝阳"];
array[2]=["济南","青岛","济宁"];
array[3]=["邹城","曲阜","任城"];
function createCities(){
var index=document.getElementById("sel1").selectedIndex;
var data=array[index];
var selCity=document.getElementById("selcity");
while(selCity.childNodes.length>0){
selCity.removeChild(selCity.lastChild);
}
for(var i=0;i<data.length;i++){
var obj=document.createElement("option");
obj.innerHTML=dara[i];
selCity.appendChild(obj);
}
}
--------------------------------------------------------------------------------
e.HTML DOM :原有的DOM基础上，对一些常用的操作进行封装 ，简化代码－－－将所有的元素封装为对象
比如Input对象，A对象，Select对象,Table对象等
1.Select 对象
Select对象代表HTML表单中的一个下拉列表
<select>标签表示一个Select对象
常用属性:
options,selectedIndex,size
常用方法:
add(option),remove(index)
事件:
onchange
Option对象
Option对象代表HTML表单中下拉列表中的一个选项
<option>标签表示一个Option对象
创建对象
var o=new Option(text,value);
常用属性:
index,text,value,selected
-------
sel.options
sel.add
var o = new Option(text,value);
例子:
function createCities(){
var index=document.getElementById("sel1").selectedIndex;
var data=array[index];
var selCity=document.getElementById("selcity");
selCity.options.length=0;
for(var i=0;i<data.length;i++){
var obj=new Option(data[i]);
//selCity.options[i]=obj;
selCity.add(obj);
}
}
2.Table
Table对象代表一个HTML表格
<table> 标签表示一个table对象
常用属性:
rows,cells
常用方法
indertRow(imdex),返回TableRow对象
deleteRow(index)
TableRow对象
TableRow对象代表一个HTML表格行
<tr>标签表示一个TableRow对象
常用属性
cells,innerHTML,rowIndex
常用方法
insertCell(index):返回TableCell对象
deleteCell(index)
TableCell对象
TableCell对象代表一个HTML表格单元格
<td>标签表示一个TableCell对象
常用属性
cellIndex,innerHTML,colSpan,rowSpan
rows属性:所有的行,有length,
insertRow(index);行，index是索引，行放的位置,返回新创建的行对象
row.insertCell(index);单元格,返回新创建的单元格对象
.html:
ID:<input type="text" id="txtID" />
名称:<input type="text" id="txtName" />
<input type="button" value="增加" onclick="addRow();" />
<table id="t1" border="1">
<tr>
<td>ID</td>
<td>名称</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
</tr
<tr>
<td>2</td>
<td>bbb</td>
</tr>
</table>
.js:
//为表格添加行及单元格
function addRow(){
//最后添加(t.rows.length)
var t=document.getElementById("t1");
var row=t.insertRow(t.rows.length);
//为行添加单元格
var cell1=row.insertCell(0);
cell1.innerHTML=document.getElementById(txtID).value;
var cell2=row.insertCell(1);
cell2.innerHTML=document.getElementById(txtName).value;
}
--------------------------------------------------------------------------------
f.screen 对象:屏幕的信息
包含有关客户端显示屏幕的信息
获取分辨率和色彩
只有属性没有方法
属性:读取
方法:改变行为
常用属性:
width/height
availWidth/avilHeigth
g.history对象:所有的历史访问记录
属性:
length属性:浏览器历史列表中的URL数量
方法:
back()后退
forward()前进
go(num)去访问过的页面,+前-后
h.location对象:当前的地址栏
href属性 ：实现网页跳转,原网页在历史记录
方法:
replace("");实现网页跳转,原网页不会保留历史记录,避免重复提交时
reload();
例子:
.html:
<input type="button" value="网页跳转" onclick="testLocation();" />
.js:
function testLocation(){
location.href="http://www.google.com";
location.replace("http://www.google.com");
}
总结:
A页面------->B页面
跳转页面的三中方式:
a:静态
window.open:动态，在新窗口打开
location:动态，不需要在新窗口打开 (需不需要保留记录)
i.navigator:浏览器软件的相关信息
代码动态的遍历某个对象的所有属性
//js中对象所有的属性以数组的方式存在
//低层的封装location.href==location["href"]
.html:
<input type="button" value="得到所有的属性" onclick="testNavigator();" />
.js:
function testNavigator(){
var str="";
for(var r in navigator){
str+=r+":"+navigator[r]+"\n";
}
alert(str);
}
j.event:事件
事件触发后将产生一个event对象
1).事件的分类
鼠标事件:onclick,...
键盘事件:onkeydown,onkeyup...(return false;事件失效)
状态改变事件:onfocus,onchange,onblur,onload onunload(加载,body),onsubmit(提交,form)
2).事件可以取消
onxxx="return false;"
3).js中,事件有冒泡机制
就是在大框架上定义的事件在里面的小元素内也有作用
如果层次元素定义了相同的事件，从最底层开始触发，层层向上，直到最高层---就是冒泡机制
(底层元素能够触发高层的事件)
利用冒泡机制,解决大量事件重复定义问题
4).event对象:只要有事件发生，event
事件触发后产生一个event对象,记录(位置，键盘的按键信息，和触发对象)
火狐浏览器: 在页面中获得event传入js
其他浏览器:页面或则js中直接使用event
event.srcElement/target;得到触发事件的对象
eObj.target||eObj.srcElement(解决浏览器兼容问题)
例子:改进计算器
.html:
<div onclick="cal(event);">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="0" />
<input type="button" value="+" />
<input type="button" value="-" />
<input type="button" value="=" />
<input type="txt" id="txtData" />
</div>
.js:
function cal(e){
var node=e.target||e.srcElement;
var txtObj=document.getElementById("txtData");
if(node.nodeName=="INPUT"&&node.type=="button"){
if(node.value=="="){
txtObj.value=eval(txtObj.value);
}else{
txtObj.value+=node.value;
}
}
}
5).元素定义事件
静态定义:onxxx="";大多数用的
动态定义:onxxx=function对象;//function(){};
--------------------------------------------------------------------------------------
6.js的面向对象基础:数据和行为的封装
封装的数据:
自用：js代码中用,(简单封装,自定义封装)
他用：数据封装后传递给服务器端，通用的代码格式,(JSON)
js中如何实现封装
a).使用Object对象实现简单封装
创建一个Object对象，直接定义属性和方法不能实现重用
b).实现自定义封装,打包数据
构造函数,实现真正的封装
undefined???
c).JSON
JSON是一种轻量级的数据交换格式
一般只封装数据,不封装方法
语法: var p={
"":"",
"":""
};
例子 :简单封装
.html:
<input type="button" value="封装" onclick="testObject();">
.js:
function testObject(){
//实现封装
var o = new Object();
o.name="java";
o.age=18;
o.sing=function(){alert("hello");};
//测试封装
alert(o.name);
alert(o.age);
o.sing();
}
例子:自定义封装
定义
function Person(n,a){
this.name=n;
this.age=a;
this.introSelf=function(){
var str="i am " +this.name+",i am " +this.age +"years old.";
alert(str);
};
}
测试
function testPerson(){
var p1 = new Person("j",20);
p1.introSelf();
var p2 = new Person("s",30);
p2.introSelf();
}
例子:JSON封装
function testJSON{
var p={
"name":"java",
"age":20
};
}
----------------------------------------------------------------------------------
扫一扫
3351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
