JavaScript 学习总结

精选翻译

三杯水 2014-07-04 21:31:23 博主文章分类：脚本语言

文章标签 Java 编程语言 display 印度尼西亚交互性 文章分类 Java 后端开发

JavaScript 学习总结

第一章认识JavaScript

1，JavaScript是什么

JavaScript是一种可以用来给网页增加交互性的编程语言。

脚本语言(Scripting language)

包含在HTML页面内部（通常放在<head>部分）

存储在外部文件中<script src=“外部文件名”>

2，Java和Javascript区别

Java和Javascript的区别就像印度和印度尼西亚的区别，名字中有点相同的东西。

3，关于Ajax

Ajax（Asynchronous Javascript XML）异步JavaScript和XML：是一种创建交互式网页应用的网页开发技术。

包括技术

XHTML

CSS

使用JavaScript访问DOM

XML

XMLHttpRequest

4，JavaScript与面向对象

对象、属性和方法组合在一起：点号语法（的）

document.getElementById('div1').style.display

5，处理事件

事件(event)：用户在访问页面时执行的操作。

例如：

当鼠标移入时，display属性取值block；鼠标移出时dispay属性取值为none。

onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById ('div1').style.display='none';"

div和span：标识范围

div：块级元素，元素周围自动换行

span：行内元素，前后不会换行

class和id选择器区别

class样式可以使用多次，id样式只能使用一次，id选择器的优先级大于类别选择器

6，值和变量

typeof检测变量类型

用法：alert(typeof a);

undefined类型：未定义；或者虽然定义了但未赋值。

什么叫Object？

简单解释：不是基本类型，是复合类型。除了number（整数、实数），string，boolean，undefined，其他的都是Object。

注意：

JavaScript区分大小写。

变量值： JavaScript弱类型。规范：一个变量应该只存放一种类型的数据。

==：先把两边的东西转成一样的类型，然后再比较（隐式类型转换）

===：不转换，直接比较

加法：字符串连接、数字加法。优先选择第一种。

命名规范及必要性

可读性——能看懂

规范性——符合规则（字母数字下划线$，不能以数字开头）

匈牙利命名法

类型前缀

首字母大写

例如：alert(parseInt(n/60)+'分'+n%60+'秒'); parseInt将字符串转换成整数

赋值：=、+=、-=、*=、/=、%=

关系：<、>、<=、>=、==、===、!=、!==

逻辑：&& 与、|| 或、! 否

运算符优先级：括号

7，结构，表现和行为（这是核心）

结构、表现和行为相分离

HTML（结构）：包含页面的内容和结构

CSS（表现）：控制页面的外观和表现

JavaScript（行为）：控制页面的行为

例子：

在页面中使用CSS样式表

单击事件：onclick

onclick="document.getElementById('link1').href='css1.css';"

将行为分离出来（把JS代码放在标签里，放在行间，代码可读性差，修改起来工作量过大。）

window.onload=function(){

var oBtn1 = document.getElementById('btn1');

oBtn1.onclick=function(){

document.getElementById('link1').href='css1.css';

}

var oBtn2 = document.getElementById('btn2');

oBtn2.onclick=function(){

document.getElementById('link1').href='css2.css';

}

将JavaScript代码写在.js文件中

补充：

取值用value

alert(oTxt1.value+oTxt2.value);

关于NaN的手册信息：NaN not a number

var a=parseInt('abc');

var b=parseInt('aaa');

alert(a==NaN); //false

alert(a==b); //false

处理：isNaN()函数

var a=parseInt('abc');

alert(isNaN(a)); //true

变量作用域（作用范围）

局部变量：只在本函数内使用。

全局变量：不定义在任何一个函数里，可以在任何地方使用（尽量不要使用全局变量）

什么是闭包

子函数可以使用父函数中的局部变量

实例：隔行变色（aLi相当于数组，aLi.length是表示数组里面有多少元素）

例子：

window. (){

var oUl=document.getElementById('ul1');

var aLi= oUl.getElementsByTagName('li');

var i=0;

for(i=0;i<aLi.length;i++){

if(i%2==0) { //0,2,4,6,8,10...

aLi[i].style.background='#CCC';

}

};

</script>

</head>?

<body>

</ul>

</body>

综合总结如下：

js的组成:

ECMAScript

DOM：操作文档（页面）

BOM：操作窗口

关于变量：

var

typeof():number,string,boolean,object,undefined,null,function

关于运算：

隐式：==,-

显式: parseInt/NaN

==/===

关于事件：

事件的处理不放在行间

window.onload=function(){...}

元素名.事件名 =function(){...}

获取元素：

getElementById(元素的id名字)

getElementsByTagName("") 按标签名字取-〉数组

数组.length

关于数组：

数组.sort()

字符串.split(解析分隔符)

数组.join(元素之间的连接符)

关于样式：

style.display=block/none

style.background=颜色

复选框.checked=true/false

结构、表现、行为相分离：

1、布局---html

2、样式---<link href="" > (.css)

<style>

</style>

3、js

文本转换为数字的方法

parseInt

parseFloat

原理：从最左侧的字符开始，到第一个不是数字的字符为止（即使文本中包含非数字，也可以转化）

当不能转化时，返回一个NaN

判断NaN的方法: 使用isNaN()函数

第二章，程序流程控制，数组，函数

1，什么是真、什么是假：

真：true、非零数字、非空字符串、非空对象

假：false、数字零、空字符串、空对象、undefined

2，分支

switch

？：

3，循环

while

for

do-while

for…in：通常用来枚举对象的属性

例子：

window.onload=function(){

var oBtn = document.getElementById('btn');

var aInput=document.getElementsByTagName('input'); //通过标签名获取元素

oBtn.onclick=function(){

//alert(aInput.length);

for(var i=0; i<aInput.length; i++)

aInput[i].checked=true;

}

};

</script>

4，数组

数组的定义

使用Array关键字定义

例如：var arr=new Array();

var arr=new Array(1,2,3,4);

使用[]定义

例如：var arr=[1,2,3,4]

数组的属性

数组的长度：length属性

数组的方法

push：向数组尾部添加元素

pop：从数组尾部弹出一个数据

shift：从数组头部删除一个元素

unshift：向数组头部添加一个元素

sort：排序

排序规则：字母序对字符串进行排序

比较函数

concat：连接两个数组

split：解析字符串为数组

join：输出数组时元素之间的分隔符

例子：

数组的排序，从小到大排序

var arr=[96, 8, 12, 72, 33, 118];

arr.sort(function (num1, num2){

return num1-num2;

});

alert(arr);

</script>

5，函数

函数的返回值

没有return/return ;：undefined

规则：令一个函数只返回一种类型的值

函数的参数

一般的参数：

参数类型

参数个数

arguments：参数数组，可变参，不定参

例子：

function show(){

alert(arguments[1]);

}

show(12, 5);

</script>

上面会显示5，数组里面的第2个元素

例子：

模拟“重载”的处理

function sum(){

var result=0;

var i=0;

for(i=0;i<arguments.length;i++){

result+=arguments[i];

}

alert(result);

}

sum(12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12);

</script>

6，CSS函数

css(‘background’)

css(‘background’,’red’);

第三章，DOM（Ducument Object Model）

1，获取节点

getElementById

获取子节点：childNodes

子节点的个数

操作子节点

例子：

window. (){

var oUl=document.getElementById('ul1');

oUl.childNodes[0].style.background=yellow';//ul的第一个子节点，也就是下面的li

}

2，检测节点的类型

nodeType

元素节点：1

文本节点：3

属性节点：2

例子：

window. () {

alert(document.body.childNodes[1].nodeType);

}

</script>

3，父节点parentNode

父节点只有一个

例子：隐藏父节点

window. (){

var aA=document.getElementsByTagName('a');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

this.parentNode.style.display='none';

}

this：指向调用该方法或属性的对象。

4，offsetParent

获取当前元素用于定位的父节点

5，子节点

firstChild，firstElementChild

lastChild, lastElementChild

例子：

window. (){

var oUl=document.getElementById('ul1');

//IE低版本

//oUl.firstChild.style.background='red';

//FF，IE11

//oUl.firstElementChild.style.background='red';

var oFirst=oUl.firstElementChild||oUl.firstChild;

oFirst.style.background='red';

}

6，DOM元素的查找

用id选择元素

用tagName选择元素

用className选择元素

选出所有元素

利用if做筛选

封装为函数

function getByClass(oParent, sClass){

var aEle=oParent.getElementsByTagName('*');

var aResult=[]; //可能存在多个，放在数组中

var i=0;

for(i=0;i<aEle.length;i++) {

if(aEle[i].className==sClass){

aResult.push(aEle[i]);

}

return aResult;

}

window. (){

var oUl=document.getElementById('ul1');

var aBox=getByClass(oUl, 'box');

var i=0;

for(i=0;i<aBox.length;i++){

aBox[i].style.background='yellow';

}

7，创建、插入和删除元素

创建DOM元素

createElement(标签名) 创建一个节点

appendChild(节点)

追加一个节点

例子：为ul插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

oLi.innerHTML=oTxt.value;

oUl.appendChild(oLi);

}

InnerHTML是一个标签内部的东西

这里是标签内部的东西，存储在innerHTML中

</div>

插入元素

insertBefore(节点, 原有节点) 在已有元素前插入

例子：倒序插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

var aLi=oUl.getElementsByTagName('li');

oLi.innerHTML=oTxt.value;

if(aLi.length==0){

oUl.appendChild(oLi);

}

else{

oUl.insertBefore(oLi, aLi[0]);

}

删除DOM元素

removeChild(节点) 删除一个节点

例子：删除li

window. (){

var aA=document.getElementsByTagName('a');

var oUl=document.getElementById('ul1');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

oUl.removeChild(this.parentNode);

}

第四次课处理事件

1，在document上加事件

document. (){

alert('a');

}

2，从event对象获取点击坐标（考虑到不同浏览器的兼容性问题）

document.onclick=function(ev){

if(ev){

alert(ev.clientX+","+ev.clientY);

}else{

alert(event.clientX+","+event.clientY);

}

3，或运算

非0---true 0/null/false

12 || false 12

0 || ’abc’ ‘abc’

‘’ || true true

12 || 0 12

12 || null 12

null || ’abc’ ‘abc’

‘abc’ || 12 ‘abc’

利用或运算处理浏览器兼容性

document. (ev){

var oEvent=ev||event; //将特殊的放在前面

alert(oEvent.clientX+', '+oEvent.clientY);

};

4，事件流

事件像冒泡一样从DOM层次结构的底层往上一级级升

事件处理：避免事件冒泡带来的干扰

window. (){

var oBtn=document.getElementById('btn1');

var oDiv=document.getElementById('div1');

oBtn. (ev){

var oEvent=ev||event;

oDiv.style.display='block';

oEvent.cancelBubble=true; //阻止冒泡

};

document. (){

oDiv.style.display='none';

};

5，鼠标事件

鼠标位置

document. (ev)

{

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

oDiv.style.left=oEvent.clientX+'px' ;

oDiv.style.top=oEvent.clientY+'px' ;

};

滚动位置

鼠标跟随改进：

document. (ev){

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ; //横向滚动处理

oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ; //纵向滚动处理

};

6，键盘事件

对比鼠标事件：onclick=onmousedown+onmouseup

键盘事件：onpress= onkeydown+onkeyup

键值keycode

document.onkeydown=function (ev){

var oEvent=ev||event;

alert(oEvent.keyCode);

}

offsetWidth: div的宽度

border:1px; +

padding(内边距):10px +

margin(外边距):20px -

offsetLeft：div的左边距

offsetTop

offsetRight

键盘控制移动：上下左右移动

document.onkeydown=function (ev){

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

if(oEvent.keyCode==37){//左

oDiv.style.left=oDiv.offsetLeft-10+'px';

}else if(oEvent.keyCode==39) {

oDiv.style.left=oDiv.offsetLeft+10+'px';

}else if(oEvent.keyCode==38) {

oDiv.style.left=oDiv.offsetTop-10+'px';

}else if(oEvent.keyCode==40) {

oDiv.style.left=oDiv.offsetTop+10+'px';

}

};

使用鼠标点击留言:

window. (){

var oBtn=document.getElementById('btn1');

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

oBtn. () {

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

};

Enter键留言：

window. (){

……

oTxt2.onkeydown=function (ev){ //注意加事件的对象

var oEvent=ev||event;

if( oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

ctrl+enter提交：

window. (){

……

oTxt2.onkeydown=function (ev){ //注意加事件的对象

var oEvent=ev||event;

if( oEvent.ctrlKey && oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

7，默认行为

什么是默认行为？

不需要自己编写，浏览器自己即具备的功能。

右键打开快捷菜单（oncontextmenu事件（上下文菜单）：右键菜单）

文本框输入

表单提交

阻止默认行为的一般的写法：return false

弹出自定义右键菜单：

document.oncontextmenu=function (ev){

var oEvent=ev||event;

var oUl=document.getElementById('ul1');

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;

var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oUl.style.display='block';

oUl.style.left= oEvent.clientX+scrollLeft+‘px’ ;;

oUl.style.top= oEvent.clientY+ scrollTop +‘px;

return false; //阻止系统右键菜单

};

弹出自定义右键菜单：

document. (){

var oUl=document.getElementById('ul1');

oUl.style.display='none';

};

8，拖拽

存储距离

onmousemove：根据距离计算DIV最新位置

window. ()

{

var oDiv=document.getElementById('div1');

var disX=0;

var disY=0;

oDiv. (ev)

{

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document. (ev)//放在onmousedown事件下，防止鼠标移出去

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<0)

{

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

{

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

};

document. ()

{

document.onmousemove=null;

document.onmouseup=null;

};

return false;

};

</script>

最后总结：

1、事件对象--注意兼容性

function(ev)

var oEvent = ev ||event;

2、事件流

父节点，子节点相同事件

oEvent.cancelBubble=true; 阻止事件冒泡

3、鼠标事件

鼠标点击位置：

oEvent.clientX 鼠标距可视区的左边距

oEvent.clientY 鼠标距可视区的上边距

带滚动条的滚动位置（注意兼容性）：

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

div定位： oDiv.style.left= scrollLeft+oEvent.clientX +'px';

oDiv.style.top = scrollTop+oEvent.clientY +'px';

4、键盘事件

oEvent.keyCode

取值：测试

常用取值：13--回车

第5次课 BOM

1，打开窗口

window.open(页面地址, 打开方式);

打开方式：在哪个框架中打开？

_blank:新窗口，默认

_self：当前窗口

例子：

oBtn. (){

window.open(‘ www.126.com/', '_self');

};

运行代码：

document.write()：向页面输出内容

举例：document.write(‘aaa’);

运行并查看页面源代码

window. (){

var oTxt=document.getElementById('txt1');

var oBtn=document.getElementById('btn1');

oBtn. () {

var oNewWin=window.open('about:blank');

oNewWin.document.write(oTxt.value);

};

<body>

</body>

2，关闭窗口

window.close()

window. (){

var oBtn=document.getElementById('btn1');

oBtn. () {

window.close();

};

<body>

</body>

3，常用属性

window.navigator.userAgent：浏览器版本号

window.location：当前页面地址

读

alert(window.location);

写

window.location='http://www.126.com/'

4，系统对话

var b = confirm('今天下雨了吗？');

alert(b);

var str = prompt('请输入你的姓名', ‘song');

alert(str);

5，尺寸及坐标

可视区尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

滚动距离

document.body.scrollTop

document.documentElement.scrollTop

侧边栏例子：

window.onscroll=function (){

var oDiv=document.getElementById('div1');

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

oDiv.style.top=scrollTop+t+'px';

};

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}

</style>

需要解决的问题

页面刚加载

页面大小改变

window.onresize=window.onload=……接上面，这样无论怎样都可以居中右靠

上一篇：JavaScript 代码分析

下一篇：yum 源安装MongoDB

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

JavaScript 学习总结

JavaScript 学习总结

51CTO博客