JavaScript基础与DOM、BOM



l 基本知识点（C#基础之后）

l 对象的创建、正则使用

l Dom与Bom常用事件

l 增删改查

l Window对象
1. 基本类型和空类型为值类型(字符串是值类型)，对象是引用类型。整形数据十六进制以0x开头，八进制以0开头，十进制不能以0开头。
2. 在js中==符号只会判断两个数据值是否相同（“123”==123），
特例：
1）“true”==true 输出false，因为比较的具体值并不确定。
2）Null=”” 输出 false
3）Number(“ ”) 输出0
用=== 判断数据是否相同
1<2<3 返回true
3>2>1 返回false
3.函数的大括号，一个写在函数后边。（防止默认结束语句）
4.For in 访问中的item 是数组的索引，键值对的键。
5.数字0开头为八进制，0x开头为十进制。
6.NaN表示不是数字。（它本身是数字类型）var n=”a”/10;n的值为NaN.
7.Javascript中的main函数m是小写（C#中是大写）。
8.可以用数值变量的toString（进制数）方法将变量转换为对应的进制数。
9.10/0 这种写法在javaScript中不会报错，输出值为infinity(无穷大)。
可以用函数isNaN（数据）确定数据是否为数字，是数字返回false,不是返回true.因为NaN表示不是数字。
可以用函数isFinite（数据） 确定数据是否是有限的，是则返回true.（可以是表达式）如：isFinite(10/0); 返回false.
10.lambda函数要写在调用之前。声明函数可以写在调用之后。Lambda函数最后以分号结束。
11.递归调用时，不用函数名本身，而是使用arguments.callee代替函数名。
12.Javascript中不存在重载，后声明的函数会取代原来的函数。
13.函数有一个默认的对象arguments,它非常像数组，可以用来存储任意个数的参数。
function sum(){
var sum=0;
var s=arguments;
for(var i=0;i<s.length;i++)
{
sum+=s[i];
}
return sum;
}
var ff=sum(1,2,3,3);
alert(ff);
15.除了函数里面声明的变量，在任何地方声明的变量都是可以使用的。（在声明之前使用为undifined)函数可以创建作用域，子域可以访问父域成员，但是必须保证子域中没有定义该成员。访问规则，首先在当前作用域中找，如果没有再到父域中找。
var numberone=10;
function d(){
alert(numberone);
var numberone=20;
}
d(); 输出结果：undifined;
16.写一个字符串数组： var sts=[“1”,”2”,”3”,”4”,”5”]
也可以写成var strs="1,2,3,4,5".split(",");
或者调用function：
var arr = "[1,2,3,4,5]";
var a = (new Function("return " + arr))();
还可以使用eval方法:
Var arr=eval(“(”+strs+”)”);
17.取反两次可以将数据转换成bool类型，！！Expression
数字0为false,其余都为true；字符串转换时，“”为false,其余都为true；对象转换时，null或undefined为false,其余为true。
18.parseInt(str)（整形） parseFloat(str) （浮点类型） 将字符串前面的数字转换为数字
var str="23.1a";
var num=parseInt(str);
var num1=parseFloat(str);
alert(num); 输出23
alert(num1); 输出23.1
19.声明式函数 参数无类型
function 函数名(参数列表) {
函数体
返回值（可有可无）
}
匿名函数(Lambda函数)
var f = function() {
函数体
};
自调用函数
(function(){方法体})();
沙箱模式。
20.javaScript中变量使用原则：
1.在开头处声明变量
2.不重复声明变量
3.使用var 关键字声明变量
21.Function的使用语法
var func = new Function(参数1, 参数2, ..., 参数N-1, 参数n);
等价于
function func(参数1, 参数2, ..., 参数N-1) {
参数N
}
参数都是字符串类型，用此方法将方法写成字符串动态生成。
例如：
var func2 = new Function("var sum = 0; for (var i = 0; i < arguments.length; i++) {sum+=arguments[i]; } return sum;");
传递多个参数求和。
22.function f(){}
alert(typeof f()); 输出undefined,
alert(typeof f); 输出function
23.编码：
encodeURI(编码前str) 输出编码后str
解码：
decodeURI(编码后str) 输出编码前str
24.对象的创建
javaScript中没有占位符的概念，在方法中使用当前对象的属性要用this表示该对象进行引用,this在对象的方法中是指该对象,函数中也有this，他表示全局对象，在浏览器中就是window.
字面值方式创建对象（键值对）
var ae=19;
var ss="李杨";
var se="男";
//对象
var bin={
name:ss,
sex:se,
age:ae,
sayHello:function(){
alert("我叫"+this.name+",是个"+this.sex+"生"+",今年"+this.age+"岁")
}
};
bin.sayHello();
构造函数创建对象（赋值语句）
function Person(nae,sx,ae){
this.name=nae;
this.sex=sx;
this.age=ae;
this.sayHello=function(){
alert("我叫"+this.name+",是个"+this.sex+"生"+",今年"+this.age+"岁")
};
}
var p=new Person("宾宾","男",21);
p.sayHello();
25.对象的几个特征：
1.对象具有数组特征，除了用对象.成员调用成员，还可以使用对象[“成员名”]调用。
2.对象具有动态特征，对象.成员=值
如果存在该成员就给该成员赋值，如果不存在就动态创建该成员并赋值。
26.几个关键字
delete 可删除对象的该成员，删除成功返回true(不存在也返回true) ,Delete 对象.成员
In 判断对象是否包含该成员，“成员名” in 对象
Instanceof 判断对象是否由指定的构造函数创建，对象 instanceof 构造函数名
27.javaScript 也可以重写toString 方法。
28.只有有了构造函数，才能实现javaScript中的继承，对象间的继承。通过原型从外部给构造函数添加成员（例如扩展方法），系统自带的不能修改。
29.数组
直接定义：
var array2 = [1,2,3, "4", true, {name:"赵小虎"}];
使用构造函数定义：
var array4 = new Array(1,2,3, "4", true, {name:"赵小虎"});
var array5 = new Array("10");// 创建一个长度为1的数组，里面是字符串"1"
var array6 = new Array(10);// 创建一个长度为10的空数组
动态添加元素：
Var res=[];
res[res.length]=值
30.异常检测
try {
throw new Error("异常文字");
} catch ( e ) {
alert(e);
} finally {
alert("执行");
}
31.正则：
匹配：
1.正则表达式对象.test(字符串)
Var regex=/正则表达式/;
regex.test(str); 返回bool值判断是否匹配

2.使用构造函数创建

Var r=new RegExp(“正则表达式”)
r.test(str);

提取：
在正则表达式后面加g(表示全局匹配),然后使用while循环，提取完毕后返回null。(如果不加g始终会匹配第一个，当然如果之后做了移除替换等除外)
Var regex=/正则表达式/g;
例如：将字符串中给所有的数字提取出来
var regex=/\d+/g;
var c;
var array=[];
//循环匹配提取
while((c=regex.exec("abnns123ffdf45ff"))!=null){
//加入数组中
array[array.length]=c;
}
alert(array);
构造函数方式：
var r=new RegExp("\\d+","g");
var c;
var array=[];
while((c=r.exec("abnns123ffdf45ff"))!=null){
array[array.length]=c;
}
alert(array);
替换：
语法：旧字符串.replace(/正则表达式/, 需要替换的内容)
例如：
var str="从1前2有3座4山5，6山7里8有9个0庙";
var arr=[],number;
while((number=(/\d/).exec(str))!=null){
arr[arr.length]=number;
str=str.replace(/\d/,"-");
}
alert(arr); //输出1,2,3,4,5,6,7,8,9,0
alert(str); //输出 从-前-有-座-山-，-山-里-有-个-庙
alert("2013年12月19日".replace(/(\d+)年(\d+)月(\d+)日/,"$2/$3/$1")) //输出12/19/2013
32. 不用类型转换判断一个字符是不是数字：
function isNum(strnumber){
var regex=/(^-?\d+$)|(^-?\d+\.\d+$)/;
return regex.test(strnumber);
}
alert(isNum("-2.2"));
33.扩展方法
通过对象的prototype设置扩展方法
例如：
var str="abc";
//str为字符串类型，用String对象为其添加扩展方法
String.prototype.AddWJX=function(){
return "☆"+this+"☆";
}
alert(str.AddWJX());
var test="123";　　
alert(test.AddWJX());
如果直接往prototype上添加方法或对象，则只能添加一个：
function person(){
name:"宾宾"
}
var o={age:21};
var r={sex:"男"};
person.prototype=o;
person.prototype=r;
var p=new person();
alert(p.age);
alert(p.sex);
此时，r将会覆盖o,最后输出undefined和男。
通过正则与扩展方法模拟trim方法（js中字符串没有）：
onload = function () {
String.prototype.trim = function () {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
var str = " s ";
alert(str.length); //输出20
str=str.trim();
alert(str.length); //输出1
}
34.包装对象：在Js底层，number,boolean与string都有一个对应的对象，分别是Number,Boolean和String，这个对象提供基础类型所需要的方法等。
Dom
1.将html页面看做是对象，每一个标签与属性和文本甚至是任何元素都是一个对象，根据html页面的组织结构可以描述成一棵dom树。
2.整个HTML结构看做一棵Dom树，上面的每一个对象都是一个节点，最常见的为元素标签（nodeType为1），属性节点（nodeType为2），文本节点（nodeType为3）
3.各种常用事件：
onload事件，在页面（图片或layer）加载完成后发生(通常将会改变html结构的代码写在其中以便用通过dom操作)、onunload页面卸载后发生、onbeforeunload页面卸载前发生；
onclick点击事件、ondblclick连续两次快速单击时发生；
onkeydown按键按下后发生、onkeyup按键抬起时发生（延时提交时使用）、 onkeypress按键时发生；
onmousedown鼠标点下后发生、 onmouseup鼠标点击抬起时发生, onmousemove鼠标移动时发生, onmouseover鼠标移动到对象处发生, onmouseout鼠标离开对象后发生；
onfocus获得焦点时发生，onblur失去焦点时发生；
oncopy复制时发生；
onsubmit表单提交时发生、onreset表单重置时发生；
（可以直接用对象.事件名指定函数）

onload=function(){

//代码
}
节点.onclick=function(){
//代码
}
//onkeyup的延迟响应示例，半秒无输入则将文本传送至txt1
onload = function () {

//获取对象
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var time;
txt2.onkeyup = function () {
clearTimeout(time);
time = setTimeout(function () {
txt1.value = txt2.value;
}, 500);

}
}
4.整个dom树的根节点为document，大部分的操作方法都由其引用。Document.body可以直接获取body元素标签对象。
5.增删改查

查：

node.nodeName 获取对象姓名

node.nodeType 获取对象类型

node.nodeValue 获取对象的value值（只针对文本节点和属性节点）

部分Dom树

<body>

<p id="first">123456</p>

<p>abcdef</p>

</body>

1)document.getElementById(“id”); //通过对象（节点）的Id属性查找该节点
例如：

onload=function(){

var p=document.getElementById("first");

p.innerHTML="chinese";

}

页面加载后Id为first的p标签中间的内容将被改为chinese。

2)document.getElementsByTagName(“标签名”)[索引]
该方法返回的是元素标签节点数组，要获取某一个节点需要用索引；此处的document也可以是某个具体的节点，此时检索范围将为该节点的所有子节点中标签名的对象；
若要遍历返回的数组一般使用i-数组的length属性而不是for-in，因为该数组内还包含其他对象。
例如：
onload=function(){

//获取对象数组
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].innerHTML="chinese";
}
}
页面加载后所有p标签内的内容都编程chinese.
3)基于某个节点查找关联节点
node.parentNode //获取父节点
例如：
onload=function(){
var p=document.getElementsByTagName("p")[0];
var parent=p.parentNode;
alert(parent.nodeName);
}
输出：BODY；
node.childNodes //获取子节点集合
例如：
onload=function(){
var p=document.body.childNodes;
for(var i=0;i<p.length;i++){
alert(p[i].nodeName);
}
}
输出：#text(空文本) P #text P #text
node.firstNode //获取子节点中第一个节点
node.lastNode //获取子节点中最后一个节点
node.nextSibling //获取下一个兄弟节点
node.previousSibling //获取上一个兄弟节点
例子：
部分dom树
<body>
<a>ss</a><p id="first">123456</p><p>abcdef</p>
</body>
onload=function(){
var p=document.body;
alert(p.firstChild.nodeName); //输出#text
alert(p.lastChild.nodeName); //输出#text
var firstp=document.getElementById("first");
alert(firstp.nextSibling.nodeName); //输出P
alert(firstp.previousSibling.nodeName); //输出A
}
4）获得属性
node.getAttribute(“属性名”) 获取对象属性
增：
创建： document.createElement(“标签名”) 创建标签对象
document.createTextNode(“文本”) 创建文本节点
追加：node.appendChild(节点对象) 向node节点子集添加节点对象
插入：node.insertBefore(新节点，旧节点) 向node节点下的旧节点前添加新节点
修改属性：node.setAttribute(“属性名”，值)
为标签插入文本：node.innerHTML=”str”;（能识别HTML标签） node.innerText=”str”;不能识别HTML标签。

例如：
部分dom树
<body>
</body>
onload=function(){
var newp=document.createElement("p");
var body=document.body;
//设置属性body.setAttribute("style","background-color:red"); //添加子节点
body.appendChild(newp);
var text=document.createTextNode("飞翔的企鹅");
newp.appendChild(text);
var newtext=document.createTextNode("前面的小企鹅，打败了");
newp.insertBefore(newtext,text);

var div=document.createElement("div");
div.innerHTML="<br/> 奥比岛";
body.appendChild(div);
}
页面加载后背景色变为红色，输出“前面的小企鹅，打败了飞翔的企鹅”；换行输出“奥比岛”；
删：
node.removeChild(t节点); 删除node子节点中的t节点
node.removeAttribute(“属性”) 删除节点属性
例如：
部分dom树：
<body>
<font size="6">我们歌唱</font>
<p >伟大的祖国</P>
<p id="second">日渐强盛</P>
<font size="6" >缅怀</font>
<div>那些永远的英雄</div>
<span>愿今日的青年</span>
<a>不负厚望</a>
<br><label >加倍努力！</label></br>
</body>
脚本：
onload=function(){
var body=document.body;
var p=document.getElementById("second");
body.removeChild(p);
var font=document.getElementsByTagName("font")[0];
font.removeAttribute("size");
}
输出后，我们歌唱字体不会变大，日渐强盛不会打印。
改：
node.setAttribute(“属性”,值)
setAttribute方法，如果属性存在则更改，不存在则添加。
标准属性可以用node.属性名=值 进行修改
修改文本：文本节点.nodeValue=值
node.clssName=”样式名”
可用于设置节点的css样式
6.其他
document.write(“内容”) 向页面打印内容，会重写加载页面（一般用于调试和页面新闻）
7.对创建节点的方法进行封装：
//参数分别是：对象名，属性对象（键值对），style（键值对）
var create = function(tag, attr, style) {
var ele = document.createElement(tag);
if(attr) {
for(var attrKey in attr) {
ele.setAttribute(attrKey, attr[attrKey]);
}
}

//style单独设置
if(style) {
for(var styleKey in style) {
//style对象关联索引设置属性
ele.style[styleKey] = style[styleKey];
}
}
return ele;
};
例如：
var img = create("img",
{src:"0.jpg", title:"美女图片"},
{width:"400px", height:"300px", border:"5px dashed pink"}
);
如此就创建了一个包含各种属性的img对象。
8.对于任何引用类型(包括数组)与null在使用typeof以后都是object。判断数组用isAarray
9.在表中添加行和列
表对象.insertRow(index) 添加行
行对象.insertCell(index) 添加列
当index为-1时，默认从最后面添加。0表示从第零个添加（最新的在最前面）。任意其他数字表示插入到指定的位子，其原来的元素往后移动（注意数字不要超过索引）
创建表的javascript代码：
function createTable(rows, cols) {
var table = document.createElement("table");
table.border = "1px solid red";

//表格间距
table.cellSpacing = "0";
table.width = "400px";
table.height = "300px";
for (var i = 0; i < rows; i++) {
var tr= table.insertRow(-1);
for (var j = 0; j < cols; j++) {
tr.insertCell(-1).innerHTML=" ";
}
}
return table;
}
10. window对象
Window相当于当前窗口（浏览器），默认情况下该对象引用的方法等可以省略window引用。如下列出几个window对象常用的引用。
属性：
document ：window对象对页面文档对象引用。
History ： 该对象记录了在该窗体下浏览过的url，主要方法有：back()加载上一个url,forward()加载下一个url,go(number) number为正向前,为负向后。Number的绝对值指定了跳过的页面个数
location：该对象记录了和url相关的信息。主要方法有：
reload() 重新加载页面 一般用于设置点击刷新页面等
replace（newurl） 用新url的文档页面替换当前页面 (不会在history中生成新纪录)
location属性： href: 获取或设置链接（可用于添加复制链接，跳转其他页面等，不能设置新窗口打开方式（window.open（）方法可以））
Navigator : 记录了关于浏览器的信息，通过该属性对象引用方法获取浏览器的方式叫做”嗅探“，一般用于针对不同浏览器兼容性问题提出对应的解决方法。
Screen: 获取显示器的相关信息。screenX screenY （火狐、谷歌） screenLeft screenTop （IE） 获取对象的屏幕坐标（因为每个浏览器版本等兼容差距，使用时应重新查阅测试）
方法：
alert() 带按钮弹窗（类似与messagebox）
setInterval(函数，时间) 按指定的时间差来调用函数,返回的ID可以作为clearInterval()的参数来是setInterval函数停止
例如：该方法将会根据文本框的输入信息而不断的增长div
function exe4(){
var label = document.createElement("label");
label.innerText = "请输入增长值";
document.body.appendChild(label);
var text = document.createElement("input");
text.type = "text";
document.body.appendChild(text);
var div = document.createElement("div");
div.style.border = "1px solid red";
div.style.width = "300px";
div.style.height = "300px";
document.body.appendChild(div);

//间隔事件重复函数
setInterval(function () {
//排除非法文本 if(parseInt(text.value!="Indefinity"|text.value!="-Indefinity"|text.value!="NaN"))
{
dvw = parseInt(div.style.width)+parseInt(text.value);
dvh = parseInt(div.style.height)+parseInt(text.value);
div.style.width = dvw + "px";
div.style.height = dvh + "px";
}
}, 1000);
}
setTimeout(函数，延迟时间) 设置时间延迟，只执行一次，返回值可作为clearsetTimeout()的参数用于终止setTimeout（）（在给文档追加版权时可使用此函数（向IE浏览器的剪贴板复制文档中添加自定义内容））
例如： document.body.oncopy = function () {
var txt;
setTimeout(function () {
txt = clipboardData.getData("text");
txt += "小二郎出品";
clipboardData.setData("text", txt);
}, 1);
}
当页面发生复制事件时，该方法将被执行。需要添加延迟事件来使系统自定义copy方法执行。

Confirm（） 显示消息，有确定和取消按钮，确定则返回true,取消则返回false.常用于重置按钮按下等事件中，当返回false时，默认事件将不被执行。
Open() 打开新窗口
11.针对IE浏览器的剪贴板
clipboardData.setData("text", value); //设置剪贴板内容
clipboardData.getData("text");//获取剪贴板内容
clipboardData.clearData("text");//清空剪贴板
禁止复制：
<script>
onload = function () {
document.body.oncopy = function () {
return false;
}
}
</script>
#top {
position:fixed;
z-index:100;
left:0;
top:0;
right:0;
bottom:0;
}
<div>内容...</div>
<div id="top"></div>
12.事件对象
1.）获取事件对象
事件=function（e）{
//默认情况下e会被事件对象赋值（IE某些版本不支持，其中该对象问event），用它可以获取鼠标坐标，按键对象等
}
例：下面代码中演示了获取鼠标坐标的方法
<style>
#dv {
border:1px solid red;
width:400px;
height:300px;
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
}
</style>
<script>
onload = function () {
var p = document.getElementById("p");
var secondp = document.getElementById("secondp");
var press = document.getElementById("press");
var dv=document.getElementById("dv");
dv.onmousemove = function (e) {
var a = window.event||e; //为了兼容不同浏览器，在此做判断，如果有event对象则使用event，没有使用e
p.innerHTML = "红框基准坐标："+a.clientX + "|" + a.clientY;
secondp.innerHTML = "屏幕基准坐标：" + a.screenX + "|||" + a.screenY;
}
dv.onmousedown = function (e) {
var a = window.event || e;

//按下的键会返回true
press.innerHTML = "按键：" + a.button + " ctrl：" + a.ctrlKey + " shift:" + a.shiftKey + " alt:" + a.altKey;
}
}
</script>
</head>
<body>
<div id="dv"></div>
<p id="p"></p>
<p id="secondp"></p>
<span id="press"></span>
</body>
2.)事件冒泡
多个层互相关联时，若几个层都有某一事件，则可能发生事件冒泡，取消事件冒泡的方法是：window.event.cancelBubble = true;
或者： e.stopPropagation();
3.)事件中调用事件
事件中可以调用其他事件的执行方法类似于C#winform的多个事件指向一个事件执行方法。