当前位置： →
→ 关于js给动态生成的标签属性赋值的有关问题,高手请围观
关于js给动态生成的标签属性赋值的有关问题,高手请围观
& 作者：佚名 & 来源： 互联网 & 热度：
&收藏到→_→：
摘要: 关于js给动态生成的标签属性赋值的问题，高手请围观呀！ function&success(data){ var&arr&=&&...
"关于js给动态生成的标签属性赋值的有关问题,高手请围观"：：
关于js给动态生成的标签属性赋值的问题，高手请围观呀！
function&success(data){
var&arr&=&&&//把获取到的字符串赋值给arr
&&&&&&&//动态的生成表格的行
&var&tab&=&document.getelementbyid("autotable");
&//删除现表格中的所有数据
&var&rownum&=&tab.rows.
&for(var&i=0;i&i++&){
&&&&&tab.deleterow(i);
&&&&&&&&&rownum=rownum-1;
&&&&&&&&&i=i-1;
for(var&i=0;i&arr.i++){
//截取字符串
var&initseftpath&=&arr[i];
&&&&&&&&var&subpath&=&arr[i].substring(arr[i].lastindexof("\\")+1)&//截取路径，保留d:\aa\bb最后一个'\'后的内容&即&&bb
var&newtr&=&&tab.insertrow(-1);
var&newtd0&=&newtr.insertcell(0);
var&newtd1&=&newtr.insertcell(1);
newtd0.innerhtml&=&'&input&type=checkbox&id="box4"&';
newtd1.innerhtml=&'&a&href="#"&style="text-decoration:&color:&font-size:&14px"onclick="show(this)"&selfpath="&%=initseftpath%&"'+subpath+'&/a&';
我动态生成的第二个单元格中是一个的形式，在的位置我想显示截取后的内容，但是完整的内容我想赋给这个（a标签）的一个属性保存，但是不知道为什么，我这个属性的值就是保存不了，按我上面写得代码，当我获取selfpath属性时候获取到的是="&%=initseftpath%&，请问我怎么样才能获取到&&initselfpath的内容？我的代码该怎么修改？&
------解决方案--------------------表格用纯js操作，是只读的吧&&你用可以试试。------解决方案--------------------&%=initseftpath%&&这是标签你放到js中是取不到的。
1，你可以把initseftpath&以名值对的型式放到共享对象中用el表达式取，js中可以直接使用el表达式。
2，你可以声明一个全局的js变量，&&比如：var&&s=&%=initseftpath%&&;之后js中就可以使用这个变量了。------解决方案--------------------类似这种&&&c:set&var="basepath"&value="${pagecontext.request.contextpath}"/&
然后&你就可以用${basepth}------解决方案--------------------&%=initseftpath%&
最好写到input&type=hidden中，比如
&input&type="hidden"&id="initpath"&value="${initseftpath}"&
var&path&=&document.getelementbyid("initpath").
alert(path); 搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
上一篇：没有了
关于js给动态生成的标签属性赋值的有关问题,高手请围观_JavaWeb相关文章
JavaWeb_总排行榜
JavaWeb_最新
JavaWeb_月排行榜
JavaWeb_周排行榜
JavaWeb_日排行榜下次自动登录
现在的位置:
& 综合 & 正文
JavaScript 学习笔记(内容非常多,即使高手也未必全懂)
Java Script 基础
一、 JS的简介
JavaScript是一种网页编程技术，经常用于创建动态交互网页
JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法
事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标
不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样
二、 JS的基本语法
0. 有两种JavaScript写法：
a. 直接在 html 中嵌入，程序写法:
&script type="text/javascript" language="JavaScript" charset="UTF-8"&
...程序...
b. 调用独立JavaScript文件：在html中写 &script type="text/javascript" src="test1.js"& &/script&
&script& 不能用空标志。 JS脚本文件中不需要脚本开始和结束声明，直接写 function
1. 在HTML中大小写是不敏感的，但标准的JavaScript是区分大小写的
2. 分号表示语句结束。有换行，分号允许不加(建议加上，以免错误和歧义)
程序忽略缩进：提倡加上空格或TAB增强程序可读性
3. 标识符：成份是 不以数字开头的字母、数字 和下划线(_)、美元符($)
ECMA v3标准保留的JavaScript的关键字：
instanceof
4. 变量的声明： var x,y; (变量没类型；未声明的变量也可以用，且是全局的；函数体内声明的变量则是局部的)
x=1; y="hello world!";
(变量的类型由所赋的值决定)
5. 函数： function 函数名 (参数){ 函数体; return 返回值;}
参数没类型或顺序，且可变长；可以使用变量、常量或表达式作为函数调用的参数
声明函数时，参数可不明写，调用时用 arguments[number] 接收。参数是值传递的。
函数由关键字 function 定义； 函数名的定义规则与标识符一致，大小写是敏感的
返回任意类型(不需写返回类型)； 返回值必须使用return
//参数数量是可变的,若要限定参数数量,如下做法: (指定参数数量为0)
if ( arguments.length !== 0 ) throw Error.parameterCount();
caller: 调用此函数的函数。没有被调用则此变量为 null
arguments: 此函数的参数列表。
arguments.caller: 调用此函数的参数列表,没有被调用则为 undefined
arguments.callee: 此函数本身的一个引用。在匿名函数里会需要用到。
6. 数据类型：
基本类型: Number：数字、 String：字符串、 Boolean：布尔
特殊类型: Null：空、
Undefined：未定义
组合类型: Array：数组、
Object：对象
7. Number 数值类型：所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是 ±1.3157 x 10^308；能表示的最小值是 ±5 x 10^ -324
10进制的整数的精确表达的范围是 -0992 (-2^53) 到 )
16进制数据前面加上0x，八进制前面加0
8. String 类型：字符串常量首尾由单引号或双引号括起
没有字符，只有字符串(所有字符都按字符串处理)
常用转义符： \n换行
(字符串中部分特殊字符必须加上右划线\)
汉字常使用特殊字符写，如： \u4f60 --&"你"
\u597d --&"好" (可避免乱码)
9. Boolean 类型：仅有两个值：true和false，实际运算中true=1,false=0
也可以看作on/off、yes/no、1/0对应true/false；主要用于JavaScript的控制语句
10.null, undefine 类型：
null 在程序中代表变量没有值；或者不是一个对象
undefined 代表变量的值尚未指定；或者对象属性根本不存在
有趣的比较：
null 与空字符串:
不相等, null 代表什么也没有，空字符串则代表一个为空的字符串
null 与 false :
不相等, 但是 !null 等于 true
不相等，(但是在C++等其它语言中是相等的)
null 与 undefined : 相等，但是 null 与 undefined 并不相同
11.数据类型转换：JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型；变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换(优先级：布尔--&数字--&字符)
数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
函数parseInt：强制转换成整数(如果包含字符串，则转换到字符串为止，后面不再理) //如 parseInt("13a2")=13
函数parseFloat： 强制转换成浮点数
函数eval：将字符串强制转换为表达式并返回结果，亦可将字节或变量转成数值。
函数typeof：查询数据当前类型(string / number / boolean / object ) ，未定义则返回“undefined”
12.运算符：(同java)
算术运算符: 加/字符连接(+)、 减/负号(-)、 乘(*) 、除(/)、 余数(% )； 递增(++)、 递减(--)
逻辑运算符: 等于( == )、 不等于( != ) 、 大于( & ) 、 小于( & ) ； 大于等于(&=) 、小于等于(&=)
与(&&) 、或(||) 、非(!) ；
恒等(===)、不恒等(!==)
左移(&&) 、有符号右移(&&)；无符号右移(&&&)
位与(&) 、位或(|)、异或(^) 、NOT (~)
赋值运算符: 赋值(=) 、复合赋值(+=
(先运行完右边的，再跟左边的进行赋值运算；如 var i=10;i-=5-3;结果8)
13.选择控制语句(同java)
if(...){...} else{...}
if 语句允许不使用else子句；允许进行嵌套
switch(表达式){case 值1:语句1;
case 值2:语句2;
default:语句3;}
14.循环控制语句(类似java)
for (初始化;条件;增量){ 语句1; ... }
for-each遍历: for(var key in objs){var element=objs[key];...} // 注意: in 前面的是 key,而不是下标或者集合里面的元素,获取集合里的元素要使用 集合[key]
while (条件){ 语句1; ... }
do{语句1; ...}while(条件);
break, continue
跳出循环；还可配合标签使用
15.对象：JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素
对象由属性和方法封装而成
javaScript包含四种对象:
内置对象 Date
自定义对象 Cart
浏览器对象 window
ActiveX对象 ActionXObject
16. 异常处理：
try{ ... } catch( e ) { ... } finally { ... }
try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }
try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("错误！"); }
17.选取页面的对象:
var obj = document.forms["FormName"].elements["elementName"];
var obj = document.forms[x].elements[y]; //x和y 是int类型，表示第几个表单，第几个元素
var obj = document.FormName.elementN
var obj = document.all["elementName"];
var obj = document.all["elementID"];
var obj = document.getElementById("elementID");
var obj = document.getElementsByName("elementName"); //返回数组
var obj = document.getElementsByTagName("TagName");
//返回数组
18. typeof 查看类型:
undefined, null, bool, number, string, object, function
也就是 typeof 返回的值只能是上面的其中一个(字符串类型)。
注意:以上单词都是小写，不要与内置对象 Number, String, Object, Function 等混淆。
null: typeof(null) 返回 "object", 但null并非object, 具有 null 值的变量也并非object。未定义的返回"undefined"
number: typeof(NaN) 和 typeof(Infinity) 都返回 NaN参与任何数值的计算结果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN
19.instanceof 判断类型:
instanceof 返回一个 boolean 值, 指出对象是否是特定类的一个实例, 实际上就是检测实例是否有继承某类的原型链。
对于 Array, null 等特殊对象 typeof 一律返回 object，这正是 typeof 的局限性。
instanceof 用于判断一个变量是否某个对象的实例,或者子类,如: var a=new Array();alert(a instanceof Array);会返回 true, 而 alert(a instanceof Object)也会返回 true
再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什么原因)
注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,尽管看起来很像。
另外: (window instanceof Object)返回 false, 这里的 instanceof 测试的 Object 是指js中的对象,不是dom模型对象。而 typeof(window) 会得 "object"
20.in 用法:
通常使用在 for 循环中,作 foreach 用,像 for(var i in obj)...
也可以用在类中,判断类里面是否有此 key。但注意不能有效用在数组中。
如: var ar = {a:false, b:2}; alert('a' in ar)返回因为 ar['a'] 存在。
在数组中使用时,如: var arr=[4,5,6]; alert(2 in arr)会返回 true,因为 arr[2] 存在。而 alert(5 in arr)会返回 false,arr[5] 不存在。
if (key in obj) 相当于 if(!!obj[key])。
数组中也可以使用 for in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);}
值得注意的是,如果对类进行 .prototype.函数 来扩展, for in 时会受到影响,把扩展的内容也循环出来。
所以不赞成对 Object 类进行扩展,也不赞成数组使用 for in(因为数组有可能被扩展了)
三、 JS的内置对象
11种内置对象：Array, Boolean, Date, Math, Number , String
Error, Function, Global , Object, RegExp
在JavaScript中除了null和undefined以外其它的数据类型都被定义成了对象
可以用创建对象的方法定义变量；
String、Math、Array、Date、RegExp是JavaScript中常用的对象
内置对象的分类：
数据对象: Number数据对象； String字符串对象； Boolean布尔值对象
组合对象: Array数组对象；
Math数学对象； Date日期对象
高级对象: Object自定义对象；Error错误对象；Function函数对象； RegExp正则表达式对象；Global全局对象
自动创建对象:调用字符串的对象属性或方法时自动创建对象，用完就丢弃。 如： var str1="hello world";
手工创建对象:采用new创建字符串对象str1，全局有效。 如：var str1= new String("hello word");
1. String 字符串对象：
格式编排:anchor()锚、blink()闪烁、fixed()固定、bold()粗体、italics()斜体、strike()删除线
big()字变大、small()字变小、sub()下标、sup()上标；
fontcolor(color)字体颜色、fontsize(size)字体大小、link(url)超链接
大小写转换:
toLowerCase()返回小写字符串、toUpperCase()返回大写字符串
获取指定字符:charAt(index)返回指定位置字符、charCodeAt(index)返回指定位置字符Unicode编码
用法：str1.bold();//字体变粗；相当于“&b&str1&/b&“
str1.anchor(); //把str1标识为锚
子字符串处理:
截取:str1.substr(start,length);
//返回从索引位置start开始长为length的子字符串
str1.substring(start,end);
//返回start开始end结束的子字符串,不包括最后的一个
str1.slice(start,end);
//同substring，但允许使用负数表示从后计算位置,不包括最后的一个
替换:str1.replace(findstr,tostr); //返回替换finstr为tostr之后的字符串
分割:str1.split(bystr);
//返回由bystr分割成的字符串数组(通常bystr是连接符号，如逗号或横杆)
连接:str1.concat(string2);
//返回 str1 与 string2 连接后的字符串
查询字符串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置
match(regexp)返回匹配的字符串、search(regexp)返回找到字符串的首字符索引
str1.indexOf(findstr,index);//查找字符串从index位置开始的索引，省略index则从0开始找;类似下一句
str1.lastIndexOf(findstr);
//从后面找起;返回findstr在str1中出现的首字符位置下标，没有找到返回-1
str1.match(regexp);
//regexp代表正则表达式或字符串;返回匹配字符串的数组，如果没有匹配则返回null
str1.search(regexp);
//返回匹配字符串的首字符位置下标;作用同indexOf方法,但可写正则表达式
//获取字符串长度；汉字、字母长度均为1；返回大于或等于0的整数
2. Array 数组对象：
1) 创建数组：
var a = new Array();
a[0] = "元素1"; a[1] = "元素2";
var a = new Array(){"元素1", "元素2"};
var a = new Array("元素1","元素2");
//一维数组，效果同上
var a = new Array();
a[0] = new Array();
//二维数组
简略的数组创建方法：
var a = ['元素1', '元素2'];
// 效果等同于: var a = new Array("元素1","元素2");
2) 删除数组：
delete 数组名;
3) 数组操作：
//获取数组元素的个数；返回大于或等于0的整数
连接数组： (原数组不变)
arr.join(bystr);
//把数组的各元素由bystr连接起来作为字符串；与字符串的split功能刚好相反
arr.toString();
//返回由逗号(,)连接数组元素组成的字符串
document.write(v.toString());document.write(v);
//这两句效果一样
arr2 = arr.concat(元素, ...);
//把元素添加到数组尾端后，返回另一数组；在参数里填入另一数组，返回合并数组
数组排序： (返回排序后的数组；改变原数组)
arr.reverse();
//按原顺序倒着排序
arr.sort();
//按字典顺序排序
获取子数组： (返回被删/被截取的元素数组)
arr.slice(start,end);
//从start下标开始，截取到end；返回被截取的元素数组；不改变原数组
//start和end可用负数表倒数(-1代表最后一个元素)；end&start时不截取；忽略end，截取start后的所有元素
arr.splice(start,n,value, ...);
//从start下标开始删除n个，再插入value(可理解为替换)；改变原数组
//start为负数时表倒数；n&1表不删除；可忽略value(不插入)；可忽略n，表删除后面所有；返回被删元素数组
4) 栈：(数组的基础； 改变原数组)
arr.pop(); //删最后的一个元素；返回删除的元素
arr.push(元素, ...);
//添加元素到最后位置；返回数组长度; 等价于: arr[length] = newV
arr.unshift(元素, ...);
//添加元素到最前位置(多个参数，则按参数顺序同时插入)；返回数组长度
arr.shift();
//删最前的一个元素；返回被删除的元素
5) toString 和 valueOf
把每一项都调用 toString 方法，然后用半角逗号(,)连接每一项。
如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5
toLocaleString 方法在这里不做详细说明了，他的效果与 toString 方法类似，只是每项调用 toLocateString 方法。
4. Math 数学对象：
都是数学常数：(可直接用)
Math.E (自然数)
Math.LN2 (ln2)
Math.LN10 (ln10)
Math.LOG2E (log 2e)
Math.LOG10E (log e)
Math.PI (圆周率)
Math.SQRT1_2 (根号1/2)
Math.SQRT2 (根号2)
三角函数：
Math.sin(x)
计算正弦值； (x在0~2π之间，返回值-1~1)
Math.cos(x)
计算余弦值； (x在0~2π之间，返回值-1~1)
Math.tan(x)
计算正切值； (x在0~2π之间，返回正切值)
反三角函数：
Math.asin(x)
计算反正弦值；(x在 -1与1之间，返回0~2π)
Math.acos(x)
计算反余弦值；(x在 -1与1之间，返回0~2π)
Math.atan(x)
计算反正切值；(x可以为任意值，返回 -π/2 ~π/2)
Math.atan2(y,x)
计算从X轴到一个点的角度；(y,x分别为点的纵坐标和横坐标，返回-π ~π)
计算函数：
Math.sqrt(x)
计算平方根
Math.pow(x,y)
Math.exp(x)
计算e的指数 e^x
Math.log(x)
计算自然对数 (x为大于0的整数)
数值比较函数：
Math.abs(x)
计算绝对值
Math.max(x,y,...)
返回参数中最大的一个
Math.min(x,y,...)
返回参数中最小的一个
* Math.random()
返回0~1之间的一个随机数
//若要整数时，如0~99的随机数： n=parseInt(Math.random()*100);
Math.round(x)
返回舍入为最接近的整数(四舍五入，负数时五舍六入)
* Math.floor(x)
返回下舍入整数 (结果不大于x；正数时直接舍去小数，负数时 -1.1==-2 )
Math.ceil(x)
返回上舍入整数 (结果大于等于x)
5. Date 时间对象：
创建日期对象：
a.不指定参数时：
var nowd1=new Date();document.write(nowd1.toLocaleString( ));
//显示当前时间，如：日 星期一 19时23分21秒
//不用"toLocaleString()"则显示： Mon Nov 24 :21 GMT+0800 (CST)
b.参数为日期字符串： var nowd2=new Date(" 11:12");alert(nowd2.toLocaleString());
//显示： 日 星期六 11时12分00秒
var nowd3=new Date("08/03/20 11:12");alert(nowd3.toLocaleString( ));
//显示： 日 星期六 11时12分00秒
//按 月、日、年 的顺序
c.参数为毫秒数：
var nowd3=new Date(5000); alert(nowd3.toLocaleString( ));
//显示： 日 星期四 08时00分05秒 //显示本国的时间
alert(nowd3.toUTCString()); //显示西方的时间： Thu, 01 Jan :05 GMT
d.参数为年月日小时分钟秒毫秒： var nowd4=new Date(,11,12,0,300);
alert(nowd4.toLocaleString( )); //毫秒并不直接显示；月份参数从0~11，所以这里10对应11月份
//显示： 日 星期一 11时12分00秒
获取和设置日期、时间的方法：
setDate(day_of_month)
日期 (1~31)
星期 (1~7;
没set方法)
getMonth()
setMonth (month)
月份 (0~11; 别忘加1)
getFullYear()
setFullYear (year)
完整年份(-760)
setYear(year)
年 (范围同上； 1900年计算为0)
getHours()
setHours (hour)
小时 (0~23)
getMinutes()
setMinutes (minute)
分钟 (0~59)
getSeconds()
setSeconds (second)
getMilliseconds()
setMillliseconds (ms)
毫秒(0-999)
setTime (allms)
累计毫秒数(从 00:00:00开始)
注意：set方法对任意整数有效，影响上一级的数；如setDate(-1)设为上个月30号。 但对小数没效。
日期和时间的转换：
getTimezoneOffset()
返回本地时间与GMT的时间差，以分钟为单位(中国为-480；差8小时)
toUTCString()
返回国际标准时间字符串(默认)
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从 00:00:00到x的本地时间，忽略秒以下的数字)
Date.UTC(x)
返回累计毫秒数(从 00:00:00到x的UTC时间) 不明UTC是什么
四、 自定义对象
1. 基本语法：
使用 function 指令定义。其属性用“this.属性名”定义。
如： function ObjectName(yName,yAge) {
this.name = yN
this.age = yA
var myObject
= new ObjectName("kk",80); // ObjectName 里面的函数会被执行
document.write("name = " +
myObject.name +
"&br& age = " + myObject.age);
2. 使用简略语句快速创建对象
正常写法：
var car = new Object();
car.color = "red";
car.wheels = 4;
car.hubcaps = "spinning";
简略写法：
var car = {
color: "red",
hubcaps:"spinning"
对象 car 就此创建，不过需要特别注意，结束花括号前一定不要加 ";" 否则在 IE 会遇到很大麻烦。
正常数组是这样写的： var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');
更简洁的写法是： var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];
3)关联数组
这样一个特别的东西。 你会发现很多代码是这样定义对象的：
var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
//遍历的时候
for ( var key in car ) { alert(key + " : " + car[key]); }
3.匿名函数
var myFun = function(args1, args2){ alert('haha'); }
变量 myFun 指向一个匿名函数,这相当于创建函数 function myFun(args1, args2){ alert('haha'); }
由于 javascript 没有类型,所以变量可以指向任意类型,也可以指向一个函数,对它来说都只是一片内存空间而已
匿名函数一般用在只有一次使用的情况下,也是可以传递参数的
如: element.onclick = function(){ alert(0); }
4.JavaScript原生函数
//要找一组数字中的最大数,如下，可以用一个循环
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i&numbers.i++){ if(numbers[i] & max){max = numbers[i];} }
alert(max);
//也可以用排序实现同样的功能：
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
//而最简洁的写法是：
Math.max(12,123,3,2,433,4); // returns 433
//你甚至可以使用Math.max来检测浏览器支持哪个属性：
var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );
5.如果你想给一个元素增加class样式，可能原始的写法是这样的：
function addclass(elm,newclass) {
var c = elm.classN
elm.className = (c === '') ? newclass : c+' '+
//而更优雅的写法是：
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
6.对象的继承，一般的做法是复制所有属性，但还有种方法，就是: Function.apply
函数的 apply 方法能劫持另外一个对象的方法，继承另外一个对象的属性
Function.apply(obj,args) 方法接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args--&arguments）
function Person(name,age){
// 定义一个类，人类
this.name=
this.sayhello=function(){alert("hello " + this.name);};
function Print(){
// 显示类的属性
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
alert(msg.join(" "));
function Student(name,age,grade,school){
Person.apply(this,arguments); // this 继承 Person,具备了它的所有方法和属性
Print.apply(this,arguments); // this 继承 Print,具备了它的所有方法和属性
this.grade=
this.school=
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清华小学");
s1.show();
s1.sayhello();
JavaScript技术
一、 使用DHtml
定义：使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML
DHTML = CSS + Html + JS
是一种浏览器端的动态网页技术
DHTML对象模型(DOM)
将HTML标记、属性和CSS样式都对象化
可以动态存取HTML文档中的所有元素
可以使用属性name或id来存取或标记对象
改变元素内容或样式后浏览器中显示效果即时更新
DHTML对象模型包括浏览器对象模型和Document对象模型
Window对象的常用属性：
* document
对象，代表窗口中显示的HTML文档
窗口中框架对象的数组
对象，代表浏览过窗口的历史记录
* location
对象，代表窗口文件地址，修改属性可以调入新的网页
(defaultStatus)窗口的状态栏信息
窗口是否关闭，关闭时该值为true
窗口名称，用于标识该窗口对象
对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为null
对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口
对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口
对象，指当前Window对象
对象，指当前Window对象，同self
Window对象的常用方法：
(使用这些方法时，通常不加window也没区别；但在特定情况下必须加，如在内嵌页面用open();)
* alert(sMsg);
弹出简单对话框
confirm(sMsg);
选择对话框
prompt(sMsg, sInit);
弹出输入对话框
* close();
open(sURL, sName, sFeatures, bReplace);
打印窗口中网页的内容
设置焦点并执行 onfocus 事件的代码。
失去焦点并触发 onblur 事件。
moveBy(iX, iY);
将窗口的位置移动指定 x 和 y 偏移值。
moveTo(iX, iY);
将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
resizeBy(iX, iY);
更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo(iWidth, iHeight);
将窗口的大小更改为指定的宽度和高度值。
scrollBy(iX, iY);
将窗口滚动 x 和 y 偏移量。
scrollTo(iX, iY);
将窗口滚动到指定的 x 和 y 偏移量。
* setInterval(vCode,iMilliSeconds,sLanguage);
每经过指定毫秒值后执行一段代码。
clearInterval(iIntervalID);
取消 setInterval 方法的事件。
* setTimeout(vCode,iMilliSeconds,sLanguage);
经过指定毫秒值后执行一段代码。(一次性)
clearTimeout(iTimeoutID);
取消 setTimeout 方法设置的超时事件。
window主要功能：
1.窗口的打开和关闭
window.open(url,name,config) 打开新窗口；url:打开的超链接，name:窗口的名称，返回新窗口对象
config为窗口的配置参数：menubar 菜单条、toolbar 工具条、location 地址栏、directories 链接、
status 状态栏、scrollbars 滚动条、resizeable 可调整大小(以上参数值为yes或no，默认yes)；
width 窗口宽，以像素为单位；height 窗口高，以像素为单位(参数值为数值)
* window.close() 关闭窗口
简单对话框：
alert(str)
提示框，显示str字符串的内容；按[确定]关闭对话框
confirm(str)
确认对话框，显示str字符串的内容；按[确定]按钮返回true，[取消]返回false
prompt(str,value) 输入对话框，显示str的内容；按[确定]按钮返回输入值，[取消]关闭，返回null
窗口对话框：
showModalDialog(url,arguments,config)
IE4或更高版本支持该方法
showModelessDialog(url,arguments,config) IE5或更高版本支持该方法
参数:url 打开链接，arguments 传入参数名，config 窗口配置参数
config 外观配置参数：status、resizable、help 是否显示标题栏中的问号按钮、center 是否在桌面中间
dialogWidth 对话框宽、dialogHeight 对话框高、(上一行参数值为yes或no，这两行参数为多少像素)
dialogTop 对话框左上角的y坐标、dialogLeft 对话框左上角的x坐标
window.status
状态栏中的字符串信息允许进行设置或读取
tID1=setInterval(exp,time)
周期性执行exp代码；exp 代码块名，time 周期(毫秒)，返回启动的定时器
clearInterval(tID1)
停止周期性的定时器
tID2=setTimeout(exp,time)
一次性触发执行代码exp；返回已经启动的定时器
clearTimeout(tID2)
停止一次性触发的定时器
5.内容滚动
window.scroll(x,y)
滚动窗口到指定位置；单位为像素
window.scrollTo(x,y)
同scroll方法
window.scrollBy(ax,ay)
从当前位置开始，向右滚动ax像素，向下滚动ay像素
6.调整窗口大小和位置
window.moveTo(x,y)
移动窗口到指定位置；单位为像素
window.moveBy(ax,ay)
向右移动ax像素，向下移动ay像素，参数为负数表示反方向移动
window.resizeTo(width,height) 调整窗口大小为指定大小
window.resizeBy(ax,ay)
放大或缩小窗口；参数为负数表示缩小
7.Screen对象
// 屏幕信息(属于window的子对象；常用于获取屏幕的分辨率和色彩)
screen.width
屏幕分辨率的宽度，例如分辨率下宽度为1024
screen.height
类似上面，屏幕分辨率的高度
screen.availWidth
屏幕中可用的宽
//排除 Windows 任务栏
screen.availHeight
屏幕中可用的高
//排除 Windows 任务栏
screen.colorDepth
屏幕的色彩数
8.History对象
// 窗口的访问历史信息(属于window的子对象,常用于返回到已经访问过的页面)
history.length
历史记录数
history.foward()
history.back()
返回上一页
history.go(0)
刷新。括号里填"-1"就是返回上一页，填"1"就是下一页；其它数字类推
9.Navigator对象
浏览器和OS(系统)的信息 数组
10.Location对象
浏览器地址栏的信息
如： location.href="";
location.assign(href);
前往新地址，在历史记录中，用 Back 和 Forward 按钮可回到之前的地址
location.replace(href);
替代当前文文件，在历史记录中也回不到之前的地址
location.reload(true);
类似刷新，默认 false
// location 各属性的用途
location.href
整个URl字符串(在浏览器中就是完整的地址栏),如: ""
location.protocol
返回scheme(通信协议)，如: "http:", "https:", "ftp:", "maito:" 等等(后面带有冒号的)
location.host
主机部分(域名+端口号)，端口号是80时不显示，返回值如："", ""
location.port
端口部分(字符串类型)。如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符。
location.pathname
路径部分(就是文件地址)，如: "/test/view.htm"
location.search
查询(参数)部分。如: "?id=209&dd=5"
location.hash
锚点，如: "#cmt1323"
应用例子：窗口最大化
window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);
或者： moveTo(0,0); resizeTo(screen.width, screen.height);
//采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度
二、 Dom 元素
处理 XML 文件的 DOM 元素属性：
&element&.childNodes
返回目前元素所有子元素的数组
&element&.children
返回目前元素所有子元素的数组(这个在IE、火狐上也可以用)
&element&.firstChild
返回目前元素的第一个子元素
&element&.lastChild
返回目前元素的最后一个子元素
&element&.nodeValue
指定表示元素值的读/写属性
&element&.parentNode
返回元素的父节点
&element&.previousSibling
返回紧邻目前元素之前的元素
&element&.nextSibling
返回目前元素的后面的元素
&element&.tagName
返回目前元素的标签名(大写)
沿 XML 文件来回移动的 DOM 元素方法：
document.getElementById(id)
取得有指定唯一ID属性值文件中的元素
document.getElementsByTagName(name)
返回目前元素中有指定标签名的子元素的数组
&element&.hasChildNodes()
返回布尔值，表示元素是否有子元素
&element&.getAttribute(name)
返回元素的属性值，属性由name指定
动态建立内容时所用的 W3C DOM 属性和方法：
document.createElement(tagName)
建立由tagName指定的元素。比如以"div"作为参数，则生成一个div元素。
document.createTextNode(text)
建立一个包含静态文字的节点。
&element&.appendChild(childNode)
将指定节点增加到目前元素的子节点中。例如：select中增加option子节点
&element&.getAttribute(name)
取得元素中的name属性的值
&element&.setAttribute(name,value)
设定元素中的name属性的值
&element&.insertBefore(Node1,Node2)
将节点Node1作为目前元素的子节点插到Node2元素前面。
&element&.removeAttribute(name)
从元素中删除属性name
&element&.removeChild(childNode)
从元素中删除子元素childNode
&element&.replaceChild(newN,oldN)
将节点oldN替换为节点newN
&element&.hasChildnodes()
返回布尔值，表示元素是否有子元素
注意：文字实际上是父元素的一个子节点，所以可以使用firstChild属性来存取元素的文字节点。
有了文字节点后，可以参考文字节点的nodeValue属性来得到文字。
读取XML时，须考虑它的空格和换行符也作为子节点。
处理 HTML DOM 元素中3个常用的属性: nodeName、 nodeValue 以及 nodeType
nodeName 属性含有某个节点的名称:
元素节点的 nodeName 是标签名称(永远是大写的)
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue / data
对于文本节点，nodeValue 属性包含文本。可增删改
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。会返回 null
data同样是文本的内容,这个属性下同样可以增删改。对于文档节点和元素节点不可用,返回 undefine
nodeType 属性返回节点的类型。节点类型是：
ELEMENT_NODE
ATTRIBUTE_NODE
CDATA_SECTION_NODE
ENTITY_REFERENCE_NODE
ENTITY_NODE
PROCESSING_INSTRUCTION_NODE :
COMMENT_NODE
DOCUMENT_NODE
// 文档,即 document
DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE
NOTATION_NODE
注： 对于属性节点，可使用 “attr.nodeName”和“attr.nodeValue”来查看或者赋值, 也可以使用“attr.name”和“attr.value”。
只是, attr.nodeValue 会返回真实类型,如 bool,number,string,object 等； 而 attr.value 全是 string 类型(null 则返回"null")
判断是否 dom 元素，一些特殊节点只有nodeName，没有tagName，比如document的nodeName为“#document”，tagName为空值。
三、跨浏览器
1.浏览器判断：
//如果是火狐等浏览器则为“true”
var isNav = (navigator.appName.indexOf("Netscape") != -1);
//如果是IE浏览器则为“true”
var isIE = (navigator.appName.indexOf("Microsoft") != -1); // navigator.appName == "Microsoft Internet Explorer"
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
var isIE6 = (navigator.userAgent && navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")!="-1");
//如果是Opera浏览器则为“true”
var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
//浏览器运行的平台，是 windows 则返回 true
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1);
2.event 事件
在 IE4+ 和 Firefox下的 event
function doEventThing(event)
//获取不同浏览器的 event
event = event || window. // window.event for IE; 参数event for firefox
//获取不同浏览器的键盘输入记录
var currentKey = event.keyCode || event.charC // keyCode 目前兼容了
//获取不同浏览器的事件源
var eventSource = event.target || event.srcE // srcElement for IE; target for firefox
var target = event.relatedTarget || event.toE // 将会去到的元素,像 onmouseout 会触发
//屏蔽Form提交事件
//if ( event.returnValue ) event.returnValue = // for IE
//if ( event.preventDefault ) event.preventDefault(); // for firefox
( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
//添加事件
if ( event.attachEvent ) {
event.attachEvent('onclick', func ); // for IE; 需要加上“on”,如 onmouseover
} else if ( event.addEventListener ) {
event.addEventListener('clcik', func, false); // 不需要加上“on”,直接写“click”
//改变事件; 但上面的绑定事件方法并不改变原有的onclick事件，而是添加事件
event.onclick =
//Firefox 下必须手动输入参数,调用时如: &input type="button" onclick="doEventThing(event);"/&
3. firefox 的 click() 事件,由于 firefox 不支持 click() 事件,代替方式：
// 获取需要触发 onclick() 的元素
var element = document.getElementsByTagName('a')[0];
if ( document.all ) {
element.click();
// FOR DOM2
} else if ( document.createEvent ) {
var ev = document.createEvent('MouseEvents'); //'MouseEvents' 改成 'HTMLEvents' 的话,firfox2不通过
ev.initEvent('click', false, true);
element.dispatchEvent(ev);
4. 跨浏览器技巧：
1) IE不能用setAttribute设定class属性。
解决方法1: 同时使用 setAttribute("class","newClassName") 和 setAttribute("className","newClassName")
解决方法2:
&element&.className = "newClassName"
2) IE中不能使用setAttribute设定style属性。即 &element&.setAttribute("style","fontweight:") 不相容。
解决方法：使用 &element&.style.cssText = "fontweight:"
3) 使用appendChild将&tr&元素直接增加到&table&中，则在IE中这一行并不出现，但其它浏览器却会出现。
解决方法：在&table&下增加&tbody&元素，再添加&tr&
4) IE不能直接添加按钮处理事件。如：addButton.setAttribute("onclick","addEmployee('unid');");不适用。
解决方法：addButton.onclick = function() { addEmployee('unid'); };//用匿名函数调用addEmployee()函数。
此外,onmouseover,onmouseout 等事件也要使用此方法。
5) firefox 不支持 document.all
解决方法: 用 document.getElementsByTagName("*") 替代,可以得到得到所有元素的集合
5.Firefox注册innerText写法
if ( (navigator.appName.indexOf("Netscape") != -1) )
//注册 Getter
HTMLElement.prototype.__defineGetter__("innerText", function(){
var anyString = "";
var childS = this.childN
for ( var i=0; i & childS. i++ ) {
if ( childS[i].nodeType == 1 )
anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerT
else if(childS[i].nodeType == 3 ) {
anyString += childS[i].nodeV
return anyS
//注册 Setter
HTMLElement.prototype.__defineSetter__("innerText",
function ( sText ) { this.textContent = sT }
//在非IE浏览器中使用 textContent 代替 innerText
6.长度：FireFox长度必须加“px”，IE无所谓
解决方法：统一使用 obj.style.height = imgObj.height + "px";
7.父控件下的子控件：IE是“children”，FireFox是“childNodes”
在IE中，XmlHttp.send(content)方法的content可以为空，而firefox则不能为空，应该用send(" ")，否则会出现411错误
9.event.x 与 event.y 问题
问题： 在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;
10.禁止选取网页内容
问题：FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {}
FF: -moz-user-select:
11.各种浏览器的特征及其userAgent。
只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是 window.ActiveXObject 函数。
IE各个版本典型的userAgent如下(其中，版本号是MSIE之后的数字)：
Mozilla/4.0 ( MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 ( MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 ( MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 ( MSIE 5.0; Windows NT)
Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。
Firefox几个版本的userAgent大致如下(其中，版本号是Firefox之后的数字)：
Mozilla/5.0 (W U; Windows NT 5.2) Gecko/ Firefox/3.0.1
Mozilla/5.0 (W U; Windows NT 5.1) Gecko/ Firefox/2.0.0.3
Mozilla/5.0 (W U; Windows NT 5.1) Gecko/ Firefox/1.5.0.12
Opera提供了专门的浏览器标志，就是 window.opera 属性。
Opera典型的userAgent如下(其中，版本号是Opera之后的数字)：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (M PPC Mac OS X; U; en)
Mozilla/5.0 (M PPC Mac OS X; U; en) Opera 8.0
Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。
Safari典型的userAgent如下(其版本号是Version之后的数字)：
Mozilla/5.0 (W U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iP U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
Chrome有一个 window.MessageEvent 函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。
目前，Chrome的userAgent是(其中，版本号在Chrome之后的数字)：
Mozilla/5.0 (W U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
下面是判断浏览器的代码：
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/i)[1];
else if (document.getBoxObjectFor) // 火狐判断出错
Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/i)[1];
else if (window.MessageEvent)
Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/i)[1];
//以下进行测试
if(Sys.ie) alert('IE: '+Sys.ie);
if(Sys.firefox) alert('Firefox: '+Sys.firefox);
if(Sys.chrome) alert('Chrome: '+Sys.chrome);
if(Sys.opera) alert('Opera: '+Sys.opera);
if(Sys.safari) alert('Safari: '+Sys.safari);
四、 摘录：
1. 省略对象名称，用 with() 命令。
如：document.write(".....&br/&");
document.write(".....&br/&");
可省略写为：
with (document) {
write(".....&br/&");
write(".....&br/&");
//把相同的 document 省略掉。
省略对象名称，变量。
如： document.myForm.myText.
可省略写为： f = document.myF
2.页面调试
javascript 加入如下语句，出错时会提示
注意： chrome、opera 和 safari 等浏览器不支持 window.onerror 事件(w3c标准没有此事件),需另外捕获出错信息
&script type="text/javascript"&
* 这是出错调试代码
* 当页面发生错误时，提示错误信息
* @param msg
* @param url
出错文件的地址
* @param sLine 发生错误的行
* @return true 让出错时不显示出错图标
window.onerror = function ( msg, url, sLine ) {
var hostUrl = window.location.
// 判断网址,测试时可以提示出错信息;正式发布时不提示
if ( hostUrl.indexOf("") === 0 || hostUrl.indexOf("") === 0 ||
hostUrl.indexOf(".") === 0 || hostUrl.indexOf("file://") === 0 )
var errorMsg = "当前页面的脚本发生错误.\n\n";
errorMsg += "错误: " + msg + "\n";
errorMsg += "URL: " + url + "\n";
errorMsg += "行: " + sLine + "\n\n";
errorMsg += "点击“确定”消去此错误，“取消”保留此错误。\n\n";
return window.confirm( errorMsg );
// 返回true,会消去 IE下那个恼人的“网页上有错误”的提示
3.把数值变成 奇 \ 偶数(利用位运算)
n = n | 1 ;
//一定得到奇数。如果原本是偶数则加一。
n = (n && 1) &&1;
//一定得到偶数。如果原本是奇数则减一。
n = n ^ 1;
//奇偶互换。对偶数加一，对奇数减一。
4.取出数值的整数部分(取整)。
// 以下第一种方法不受浏览器和版本的影响，后两种受版本影响。
n = ( n & 0 ) ? Math.floor(n) : Math.ceil(n);
n = Number ( (String(n).split("."))[0]);
n = parseInt(n,10);
// 下面做法更简便高效,用位运算来做(右移0位,或者两次取反),且非数值型的值会转成0
alert(5&&0);
alert(~~5);
alert(5.55&&0);
alert(~~5.55);
alert(-98.4&&0);
alert(~~-98.4);
// 值为 -98
alert('absd'&&0); alert(~~'absd'); // 值为 0
alert(null&&0);
alert(~~null);
alert('34.5'&&0); alert(~~'34.5'); // 值为 34
5.取出数值的小数部分。
须先检查小数点是否存在。但有时会发生运算误差。
n = Math.abs(n);
if(n&0) n = n - Math.floor(n); else n = 0;
n = parseInt(n,10) - parseFloat(n);
if((""+n).indexOf(".") & -1) n = Number("0."+(String(n).split("."))[1]); else n = 0;
6.在任意位置插入一行js(单行程序)：
&script type="text/javascript"&alert("中断一下");&/script&
&input type="button" onclick="javascript:formName.DataName.value='';formName.DataName.focus();" /&
7.设置焦点：
//document.all["DateID"].
document.all["DateID"].focus();
formName.DataName.focus();
8.默认参数：
function show() {
alert( arguments[0] );
这个函数会alert出第一个参数，如调用时： show("haha")，则alert("haha");
9.禁止 confirm 與 alert
window.confirm = function(str){};
window.alert = function(str){};
10.获取下拉菜单的内容
&select name="seleName" &
&option value="value1"&Text&/option&
获取选中的下拉菜单的内容：
var seleElement = document.formName.seleN
var optionText = seleElement.options[seleElement.selectedIndex].
11.设置默认值:
edittype = edittype || "text"; //edittype预设为 text
上面一句: 如果 edittype 之前有值,则取之前的值; 之前没有值,则取默认值
12.数值的截取:
numObj.toFixed([fractionDigits])
//numObj:必选项。一个 Number 对象。
//fractionDigits:可选项。小数点后的数字位数。其值必须在 0 – 20 之间，包括 0 和 20。 预设为0
toFixed 方法返回一个以定点表示法表示的数字的字符串形式。对数值进行四舍五入截取到指定位数的小数
如: 55.3654.toFixed(2) //返回55.37
13.IE上的关闭窗口时不提示
window.opener = // 关闭IE6不提示
window.open("","_self"); // 关闭IE7不提示
//关闭窗口
window.close();
14.刷新页面的几种方法：
history.go(0);
window.navigate(location);
document.URL = location.
document.execCommand('Refresh'); //火狐不能用
location.reload();
location =
location.assign(location);
location.replace(location);
15.页面跳转：
location.href = "yourURL"
window.location = 'url'
window.location.href = "url"
window.navigate("top.jsp");
self.location = 'top.htm' //令所在框架页面跳转，大框架不变
top.location = 'xx.jsp';
//在框架內令整個页面跳转
16.页面跳转/刷新 的注意：
需要先执行其他代码，然后再页
【上篇】【下篇】}