javascript基础知识总结

Js是单线程语言,从上到下依次执行

获取本地年月日 new Date().toLocaleDateString()

获取本地时间toLocaleTimeString()

外部引用js

Js事件

举例:

其他事件:

Onclick:点击事件onfocus:获得焦点事件onblur失去焦点事件 onchange:内容改变事件

Onmousedown鼠标按下事件onmousemove鼠标移入事件(在区域内只要一动就触发)onmouseout鼠标移出事件

Onmouseover到某个原宿上方的时候

备注:onmousemove和onmouseover的区别是onmousemove只要在区域内移动就一直触发,onmouseover在区域内移入的时候触发一次

在<a href=中也可以写js代码></a>

Js方法使用

示例代码如下

//定义方法

function sayHello() {

var x = 100;

alert(x);

}

//调用方法

sayHello();

</script>

Js变量作用域范围

Js的变量有作用域范围,不过跟C#部分类似,但不相同

当在js方法外,内部声明的变量外部是访问不到的(跟C#一样)

当在js方法内,内部声明的变量,方法内的外部可以访问(js的特点)

当块内的变量不加var的时候,会被认为是全局变量(块外部的变量),不建议不用var.代码可读性差,而且全局变量等到占内存.

//举例说明:

//举例1:

function sayHello() {

if()

var x = 100;

alert(x);

}

//调用方法

sayHello

//报错访问不到x的

alert(x);

//举例2:

Function sayHello(){

Var x=100;

If(x=100){

Var y=x+1;

alert(y);

}

//因为块级内部是可以调用,不报错

Alert(y);

}

//举例3

Var x='啊啊';

Function my(){

Y='呜呜';

}

My();

Alert(x);

//不报错,因为定义y的时候没有var,被认定为全局变量,但不建议不用var.代码可读性差,而且全局变量等到占内存.

Alert(y);

Js数据类型

Boolean(布尔)Number(数字)String(字符串)Undefined(未定义,未赋值)

Null(空对象)Object(对象类型)

除了Object以外,其他的都是基本数据类型

Undefined类型,和Null类型都只有一个值的数据类型,分别是undefined和null

String也是基本类型,但不能为String添加动态属性,而引用类型是可以的.

//可以看到该变量的数据类型

Var n=Typeof(变量名);

//获取网站标题,就是<title>标签内的文字

Document.title

Js的严格等于,与非严格等于

//==非严格等于 ===严格等于

举例说明:

var x=10;

var y='10';

if(x==y){

alert('相等');

}else{

alert('不等');

}

//答案:相等

var x=10;

var y='10';

if(x===y){

alert('相等');

}else{

alert('不等');

}

//答案:不等

判断变量是否可用:

Var x=10;

If(typeof(x))!='undefined'&&x!=null){

Alert('变量可用');

}else{

Alert('变量不可用');

}

类型转换:

语法:数据类型名(变量名)

示例:var x=10;

Alert(Boolean(x));

如何将字符串的js代码执行:

当一段js代码放到了字符串变量中想要执行,需要用到eval()方法

//示例:

Var js='var n=1;n++;';

Js+='alert(n);';

//执行这段代码

Eval(js);

Js方法的覆盖

Js中没有方法重载

当js两个方法同名的时候,会覆盖同名之前的方法,执行同名最后一个方法

//示例:

Function fun1(){

Alert("第一个");

}

Function fun2(){

Alert("第二个");

}

//调用

fun1();

//结果是"第二个"

Arguments对象

Js中没有方法重载

arguments为方法传递参数,类似于.net中的params关键字的作用

在js中方法可以不写参数(匿名参数),可以通过arguments关键字,获取到传进来的参数

Arguments是一个数组

//示例代码:

Function myFunc(){

For(var i=0;i<argumennts.length;i++){

Document.write(arguments[i]);

Document.write('<br/>');

}

//调用

myFunc('张三',20,'男');

匿名函数

第一种

Var f1=function(){

Alert('我是匿名函数');

}

//调用

f1();

第二种

(function(n1,n2){alert(n1+n2)})(20,30);

第三种

调用内部的Function类,类似于c#中的构造方法

规定最后一个参数是js代码.

Var fun1=new Function("n1","n2","n3","alert(n1+n2+n3)");

//调用

fun1(1,2,3);

Js伪面向对象

Js没有真正的面向对象,它的面向对象的概念是通过方法构造出来的,看起来像面向对象.

Js定义对象规范首字母要大写开头,跟方法区分开来,方法名要小写开头.

"对象"和方法内部的字段可以用this.表示

示例:

//示例1调用的时候写对象,并且赋值

//定义一个伪对象

Function Person()

{

}

//调用对象,使用时候定义成员

Var p=new Person();

P.name='张三';

P.age=20;

p.sayHello=function(){

Alert('大家好我是'+this.name+'我今年'+this.age);

}

//示例2在创建对象的时候定义成员

//定义对象,定义的时候如果有参数,写参数,类似于c#中的构造方法

Function Person(name,age){

This.name=name;

This.age=age;

this.sayHello=function(){

Alert(this.name+','+this.age);

}

//调用对象

Var p=new Person('张三',20);

p.sayHello();

Alert(p.age);

//获取对象内的字段也可以这么写,类似于字典集合,通过键,找到值.

Alert(p['age']);

Js扩展方法prototype

//当要给一个对象扩展方法的时候用对象名.prototype.方法名=function(){方法体;}

示例:想要给Person对象扩展一个名为sayHello方法.

Person.prototype.sayHello=function(){

Alert('hello');

}

Js中对字符串的操作

Length属性:获取字符串字符的个数

charAt(index)方法:获取指定索引位置的字符(索引从0开始)

indexOf('字符串',startindex)方法:获取指定字符串第一次出现的位置,startindex表示从第几个开始搜索.

Split('分隔符'limit)方法:根据分隔符将一个字符串返回为一个数组.limit表示返回的数组的最大长度.

Substr(startindex,length)方法:从startlndex开始,截取length个字符.

Substring(startindex,stopindex)方法:从startindex开始,截取到stopindex位置(不包括stopindex所在的字符).

toUpperCase()方法:转换大小写.

toLowerCase()方法:转换小写.

Match()replace()search()方法:正则表的方法

Js中Array对象(数组对象Array,键值对对象D)

定义数组:

例子1:

Var names =new Array();

Names=[0]='张三';

Names=[1]='李四';

例子2:

Var names=['张三','李四',123,false]

循环遍历数组:

For(var i=0;i<names.length;i++)

{

Alert(names[i]);

}

Forin循环:

//用来遍历键值对集合的一种js特有的循环,"类似"于c#中的foreach循环

//js中的forin与c#中的foreach又不太一样,因为foreach遍历的是元素的内容,而forin相当于把集合看做成一个键值对集合,forin遍历的只是集合中的键.

//forin也可以遍历js的对象,将对象的成员遍历出来.

Forin(var k in names){

//得出结果仅是names的键值.

Alert(k);

//如果想得到其值,需要

Alert(names[k]);

}

键值对集合:

//当使用键值对集合的时候是不能使用for遍历的,因为集合中的length始终为0

//只能用forin遍历

例子1:

//定义键值对数组

第一种格式:

Var names=new Array();

names['zs']='张三';

names['ls']='李四';

names['ww']='王五';

names['zl']='赵六';

第二种格式(json格式):

Var Names={'zs':'张三','ls':'李四','ww':'王五','zl':赵六};

//遍历键值对集合

//只能用forin遍历

Forin(var k in names){

Alert(names[k]);

}

Json格式

Json格式是一种常用键值对格式.(前面是key,后面是值)

他的格式:var name={'zs':'张三','ls':'李四','ww':'王五','zl':赵六};

Js dom

动态设置事件:

//通过id获取元素对象

document.getElementById('id名')

//通过id给元素的属性赋值

document.getElementById('id名').属性名=值;

//通过id给元素动态注册事件

//元素对象.事件=方法名;

//document.getElementById('id名').事件=方法名;

例如:

Function fun1(){

Alert('方法1');

}

//获取

document.getElementById('btn1').onclick=fun1;

</head>

<body>

//动态注册事件

<inputtype="button"id="btn2"onclick="document.getElementById('btn1').onclick=fun1;"/>

备注:

使用Document.getElementById与直接在标签的onclick后写方法的区别是,前者是注册事件,而onclick是调用方法.虽然能够达到同样的效果,但是原理不一样.

使用动态注册事件的时候,document.getElementById('id名').事件=方法名; 的后面不要加(),如果加上括号就是直接执行该方法了.

Window对象(dom中的顶级对象)

Window对象代表当前浏览器窗口

使用window对象的属性,方法的时候可以省略window.

比如:window.alert('hello');可以省略成alert('hello');

Window.document可以省略成document

Window.confirm('要删除么');//确定/取消对话框,返回true/false

Window.location.href="url";//js网页跳转语句(页面重定向)

disabled页面是否可用

//禁止使用disabled="disabled"允许使用disabled=false;

示例代码:<input type="button" name="btn1" value="请仔细阅读协议(10)" disabled="disabled" />

return false; 终止执行

示例代码:<a href="http://www.baidu.com" onclick="return false;">百度</a>

onCopy方法:启用/禁止复制操作,用于在body中启用禁止复制操作.

示例代码:<body oncopy="return false;">//禁用复制

onPaset禁止粘贴,与onCopy一样

setTimeout(code,delay)//过多少秒之后执行这段代码(参数1:执行的代码"function(){}",参数2:间隔时间(毫秒))

window.setInterval(code,delay)//每隔一段时间执行指定的代码(类似于winForm中的Timer控件)第一个参数:指定的代码字符串第二个参数:时间间隔(毫秒)

window.clearInterval(intervalld)//停止计时器,clearInterval()取消setInterval 的定时执行,相当于Timer中的Enabled=False.因为setInterval可以设定多个定时,所以claerInterval要执行清楚哪儿个定时器的表示,即setInterval的返回值.

//示例:走马灯效果:

<title>我爱北京天安门,天安门上太阳升</title>

//参数1:要执行的方法代码参数2:时间间隔(毫秒)

setInterval(function(){

//获取title

Var t=document.title;

//截取f中第一个char字符

Var f=t.charAt(0);

//从第二个开始截取以后所有的字符

Var other=t.substring(1);

//将字符串从新拼接,并且赋给title

document.Title=other+f;

},1000)

</script>

Window.event属性

用来获取发生事件时的信息,事件不局限于window对象的事件,所有元素对象都可以,通过event属性渠道相关信息,类似于winForm中的e(EventArgs)

用event监控是否按下了Ctrl键

Window.onload(){

document.getElementById('text1').onChange=funciton(){

If(window.event.ctrlKey){

Alert('您按下了ctrl按键');

}else{

}

获取对于当前窗口鼠标坐标,用到event属性中的clientX,clientY

获取指针偏移量,相对于div等块级内部的xy坐标,而不再是整个页面的坐标offsetX,offsetY

获取对整个屏幕的指针坐标,而不再是仅限浏览器窗口中的xy坐标,screenX,screenY

srcElement属性

获取当前元素中的属性,用window.event.srcElement属性

功能类似于this,但是与this唯一不同的是,谁一开始触发的就表示谁.(在事件冒泡中能够体现出来)

而this是动态变化的.

示例代码:获取input 中value值

Function fun1(){

Alert(window.event.srcElement.value);

}

....

Button属性

获取鼠标按下的是哪儿一个键1按下左键,2按下右键,4按下中滑轮

Window.screen获取屏幕信息

Window.screen.width获取当前客户端宽的分辨率

Window.screen.hight获取当前客户端高的分辨率

window.showModalDialog

弹出模态子窗口window.showModalDialog('地址',需要给子窗口传递的参数,弹出窗体样式css)

//子窗口获取值(参数)

window.dialogArguments;

//子窗口回传值到父窗口

window.parent.returnValue=....;

//父类获取子类传回的值

直接用变量接收=window.showModalDialog();

例如:var v=window.showModalDialog('sub.html',document.getElementById('txt1').value);

window.showModalDialog弹出模态窗口,注意showModalDialog必须在onclick等用户手动触发的事件中才会被执行,否则最新版本的浏览器会当成广告而拦截.

在弹出的页面中调用window.close()可关闭窗口.注意,这里面不能省略window,只有在对话框中调用window.close()才会自动关闭窗口,否则浏览器会提示用户进行确认.

window.showModelessDialog弹出非模态窗口,使用方法跟showModelDialog一样

window.clipboardData粘贴版对象

setData("text",val);设置粘贴板 (参数1:数据类型,参数2:要粘贴的值)

getData("text");读取粘贴板的值,返回值为粘贴板中的内容;

clearData("text");清空粘贴板

//示例代码: 再粘贴板复制后,加上其他文字(作者.....)

Window.onload=function(){

Document.body.oncopy=function(){

//这个地方必须用到setTime间隔一段时间,否则追加无效,因为没等复制过程完毕就直接进行粘贴操作了,所以无效

setTime(function(){

Var oldData=clipboardDAta.getData('text');

oldData+='<br/>作者某某某';

clipboardData.setData('text',oldData);

},100)

}

Window.history操作历史记录对象

Window.history.back()后退Window.history.fonward()前进

Window.history.go(-1)后退Window.history.go(1)前进

Body和document对象的事件

Onload:页面加载完毕

在<body>加载之前,使用document.getElementById('btn1').onclick=function(){alert('是想要的结果么?')};会报错,因为页面还没有加载<body>标签里面的id位btn1的button按钮呢

这就用到了onload事件.

示例代码:

Var fun1=Function(){

document.getElementById(btn1).onclick=funciton(){

Alert('这样是可以的');

}

</script>

....

或者用:window.onload=function(){这里写代码};

Onunload:页面卸载完毕,例如关闭浏览器,点击刷新等

Onbeforeunload:页面卸载之前,出发的事件(点不出来,因为不是标准的,但是大多数浏览器都会支持)

Window.document属性文档属性

Write:里面可以放html标签,可以动态生成元素,但是Write的缺点将会覆盖已有的元素.

Document.wirte('<a href="http://www.baidu.com">百度</a>');

Document.write('hello write');

Document.writeln('hello writeln');//是在代码中换行,在在浏览器中看不到的

递归遍历页面的每一个元素(麻烦,但必须掌握.最好的方法是用getElementByTagName())

Window.onload=function(){

//获取当前页面的根节点html

//document.documentElement找到根节点

//调用

dg(document.documentElement);

//循环根节点下的所有子节点,把每个子节点名输出

//定义

Function dg(objHtml){

For(var i=0;i<objHtml.childNodes.length;i++)

{

Alert(objHtml.childNodes[i].nodeName);

If(objHtml.childNodes[i].childNodes.length>0){

dg(objHtml.childNodes[i]);

}

getElementsByName()根据name获取元素数组

示例代码:

//获取name=gander的radio元素

Var eles=document.getElementsByName('gander');

//遍历该元素,

//注意:对于元素集合遍历,通常使用for,不要使用forin遍历

For(var i=0;i<eles.length;i++){

Alert(eles[i].value);

}

getElementsByTagName()根据标签,获取指定标签名称的元素数组集合

例如<p>标签document.getElementsByTagName('p')

<div>标签内document.getElementsByTagName('div')

<input>标签内document.getElementsByTagName(input)

示例代码:

如果想要获取id为dv1,中的所有input元素,该这样做

document.getElementById('dv1').getElementsByTagName('input');

事件冒泡:

当元素嵌套包含的时候,如果点击最里面的元素,从点击的元素开始,依次从内向外执行,

document.creatElement动态创建元素.

可以调用document.creatElement方法来动态创建元素,然后通过调用某个元素的appendChild();方法将新创建的元素追加到相应的元素下.

父元素.removeChild(子元素).删除元素

//示例代码1:

//在点击btn1按钮的时候触发该事件的方法

document.getElementById('btn1').onclick=function(){

//创建一个input标签.参数:标签名

//注意这个时候还没有真正的创建出来呢,只在内存中创建出来.

Var eleObj=document.createElement('input');

//在标签中给属性赋值.

eleObj.type='button';

eleObj.value='我是新的按钮';

//只有执行了appendChild()才是真正的创建出来该标签对象

//追加到body里面

document.body.appendChild(eleObj);

//追加到div中

document.getElementById('div1').appendChild(eleObj);

}

//示例代码2:删除div中的所有元素

Function clsEles(){

//获取名为div1.这个div(包括里面所有的元素)

Var dvObj=document.getElementById('div1');

//firstChild获取当前元素下的第一个子元素,如果发现返回该元素,没有返回null.

//放到while中,如果是null,隐式转换成false.终止循环.

While(dvObj.firstChild){

document.removeChild(dvObj.firstChild);

}

//示例代码3:动态创建表格

Var tr=document.creatElement('tr');

Var td1=document.creatElement('td1');

Var td2=document.creatElement('td2');

tr.appendChild(td1);

tr.appendChild(td2);

document.getElementById('div1').appendChild('tr');

innerText和innerHTML

innerText:将整个包含的文本全部显示出来,不显示html代码

innerHTML:将整个包含的标签和文本全部显示出来,显示html代码

//示例代码1:

你好<a href="http://www.baidu.com">你好啊</a>你好

</div>

//结果是:你好你好啊你好

//结果是:你好<a href="http://www.baidu.com">你好啊</a>你好

//示例代码2:

Var str1='我的字体蓝色的';

......

//结果是:我的字体是蓝色的

//结果是:我的字体是蓝色的

动态创建表格(推荐使用)

创建行用insertRow(-1),创建列用insertCell(-1),必须写-1,-1代表追加

//创建一个table

Var talObj=document.createElement('table');

talObj.boreer='1';

//为table创建一些行和列

Var trObj1=tblObj.insertRow(-1);

Var td1=trObj1.insertCell(-1);

td.innerHTML='我是第一行第一列';

Var td2=trObj1.insertCell(-1);

td.innerHTML='我是第一行第二列';

//将table追加到body中

document.body.appendChild(tblObj1);

用innerHTML和用creatElement创建元素的不同

1.对于进行大量节点操作时,使用innerHTML的方式要好于dom方式,因为innerHTML有一个专门用c++写的html解析器,效率比较高.所以在一定情况下innerHTML优于creatElement.先将页面的html代码写好,然后调用innerHTML一次全部创建完毕.

2.避免重复多次使用innerHTML,例如循环用innerHTML插入元素,这样效率很低,不如使用creatElement.因为每次循环都需要那个解析器解析,很消耗资源.用到循环对元素操作时,需要用dom方式.

3.对于使用innerHTML=''的方式删除节点,在某些情况下会存在内存问题.比如:div下面有很多其他元素,每个元素都绑定有事件处理程序.此时,innerHTML只是把当前元素从节点树上移除了,但是那些事件处理程序依然占有内存.当如果这些元素绑定了事件必须的用removeElement删除.

Js调用css

//获取一个对象

Var dvObj=document.getElementById('div1');

//Js对象.style.css样式

dvObj.style.width='200px';

dvObj.style.color='red';

dvObj.style.fontFamily='幼圆';

Js正则表达式

Test()判断是否是正则表达式

Function zz(txt){

//创建正则表达式对象,正则表达式要写在//之间./正则表达式/

Var reg=new RegExp(/正则表达式/);

//创建正则表达式也可以这么写(推荐)

Var reg=/正则表达式/;

//调用test()方法,检验表达式是否合法,相当于c#中的IsMatch();

If(reg.test(txt.value)){

Alert('合法正则表达式');

}else{

Alert('非法正则表达式');

}

......

exec()进行搜索匹配,相当于C#中的match()和matches()

1.如果匹配成功,则返回一个结果数组(完全匹配的字符串以及提取数组结果),匹配失败返回null,要提取多个需要反复调用exec()类似于matches()方法.//注意全局模式.

2.在非全局模式下,调用依次exec()相当于match();在全局模式下连续多次调用相当于matches()

3.全局模式:当有多个匹配结果的时候,需要在正则表达式后加个g(例如:/..../g),开启全局模式,这样才会将多个结果依次显示出来,否则(不开启全局模式)将仅会输出第一个匹配结果(或第一个匹配结果的集合)

//示例代码1:匹配一个结果

Var str='中国联通10010,中国移动10086,中国电信10000,';

//创建一个正则表达式;

Var reg=\/d+\;

//用test判断是否匹配

If(reg.test(str)){

//仅输出10010,类似于match

//仅匹配出第一个,结果为10010.要想匹配其他的,需要用到全局模式,见示例2.

Alert(reg.exec(str));

}

//示例代码2:匹配多个结果(全局模式)

Var str='中国联通10010,中国移动10086,中国电信10000,';

Var reg=/\d+/g;

If(reg.test(str)){

//用来保存匹配后的值

Var r='';

While((r=reg.exec(str))!=null){

Alert(r);

//结果:依次匹配了alert(10010),alert(10086),alert(10000)

}

//示例代码3:匹配多个数组的结果集

Var str='中国联通10010,中国移动10086,中国电信10000,';

//正则表达式分组匹配两个结果,例如10010匹配成:10010,1010086,86...

Var reg=/\d+(\d{2})/g;

If(reg.test(str)){

//用来保存匹配后的数组

Var r='';

While((r=reg.exec(str))!=null){

Alert(r);

//结果:依次匹配了alert(10010,10),alert(10086,86),alert(10000,00)

}

字符串的match(/正则表达式/)方法 ,更为简便

1.match方法同样可以使用全局模式

//语法:变量.match(/正则表达式/);

Var str='中国联通10010,中国移动10086,中国电信10000,';

//直接以数组的形式返回

Var r=Str.match(/\d+(\d{2})/g)

Alert(r);

//输出结果是:alert(10010,10086,10000)

正则表达式替换replace()方法

语法:变量名.replace(/正则表达式/,'要替换的文本');

示例代码1:

//遵循全局模式

Var phones='我的电话13588888888,你的电话18688888888,他的电话13388888888';

//将所有8的替换成6

Val phones2=phones.replace(/8/g,'6')

Alert(phones2);

//输出结果是:alert(13566666666,16666666666,13366666666')

示例代码2:有分组的情况

Var phones='我的电话13588888888,你的电话18688888888,他的电话13388888888';

//有分组的情况,分组用$代替,跟C#一样,以第一个前括号为标准,是第一个分组.

Val phones2=phones.replace(/(\d{3})\d{4}(\d{4})/g,'$1****$2');

Alert(phones2);

//输出结果是:alert(135****8888,186****8888,133****8888')

posted @ 2012-05-24 12:08 愤怒的小鹏阅读(450) 评论(0) 编辑收藏举报

刷新页面返回顶部

愤怒的小鹏 AngryXiaopeng

javascript基础知识总结

公告