JavaScript（一）

一、JavaScript基础

1.     JavaScript组成

ECMAScript 解释器、翻译 几乎完全兼容

DOM：Document Object Model文档对象模型 有兼容性问题

BOM：Browser Object Model 浏览器对象模型 几乎完全不兼容

2.     变量类型

typeof运算符

typeof x;

number string boolean undefined object function

数据类型转换：显式类型转换(强制类型转换) 隐式类型转换

parseInt() parseFloat()

3.     闭包

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

4.     命名规范

匈牙利命名法 类型前缀 首字母大写

5.     函数返回值

函数可以没有return或者return;

一个函数应该只返回一种类型的值

6.     函数传参

arguments数组是函数的参数数组

7.     取非行间样式 兼容

if(obj.currentStyle){

        console.log(obj.currentStyle[attr]);

}

else{

        console.log(getComputedStyle(obj,false)[attr]);

}

8.     数组

添加

push(元素)从尾部添加 unshift(元素)从头部添加

删除

pop()从尾部弹出

shift()从头部弹出

排序

sort(比较函数) 返回值大于0会改变2数顺序

//从小到大

arr.sort(function(num1,num2){

return num1-num2;

})

 

转换

concat(数组2)连接2个数组

join(分隔符)将数组转换为字符串

split(分隔符)将字符串转换为数组

splice 插入 删除 替换

splice(开始位置，要删除的长度) 删除

splice(开始位置，0，要插入的元素…) 插入

splice(开始位置，要删除的长度，要插入的元素…) 替换

9.     input文本框为只读不可编辑的方法

方法1：onfocus=this.blur() 当鼠标放上就离开焦点

<input type="text" name="input1" value="中国" onfocus=this.blur()>   

方法2：readonly

<input type="text" name="input1" value="中国" readonly>   

<input type="text" name="input1" value="中国" readonly="true"> 

方法3：disabled 文字会变成灰色

<input type="text" name="input1" value="中国" disabled="true">

10.   eval(string) 计算其中的字符串，并执行其中的js代码

11.   input文本框中的内容从右到左

方法1：text-align:right

<input style="text-align:right" />

方法2：dir=”rtl”

<input type="text" dir="rtl" />

12.   截取字符串

string.slice(start,end)

string.substring(start,stop)

stringObject.substr(start [, length ])

13.   字符串的替换

var str = 'abcadeacf';

var str1 = str.replace('a', 'o');//只替换第一个

alert(str1); 

 

// 打印结果： obcadeacf

 

var str2 = str.replace(/a/g, 'o');//替换所有

alert(str2); 

 

//打印结果： obcodeocf,

二、DOM

1.     DOM节点

nodeType 节点类型 元素1 属性2 文本3

childNodes子节点 children是children的兼容版

parentNode 父节点

offsetParent 最近的显示指定位置的元素 position是absolute的offsetParent是最近的父的relative的元素

firstChild/firstElementChild 首子节点 有兼容性问题 火狐

lastChild/lastElementChild 尾子节点 有兼容性问题

nextSibling/nextElementSibling 兄弟节点

previousSibling/previousElementSibling 有兼容性问题

 

childNodes和nodeType结合 //火狐中空白地方也当作文本节点

if(nodex.childNodes[i].nodeTypw==1){…}

2.     元素属性操作

第一种：oDiv.style.display=’block’;

第二种：oDiv.style[‘display’]=’block’;

第三种：

               getAttribute(名称)获取

               setAttribute(名称，值)设置

               removeAttribute(名称)删除

3.     用className获取元素

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;

}

 

4.     创建和插入节点

var oLi=document.createElement('li');//创建

oLi.innerHTML=oTxt.value;

//父.appendChild(newNode);

oUl.appendChild(oLi);//插入

//父.insertBefore(newNode,某子节点)

oUl.insertBefore(oLi,aLi[0]);//在某节点前插入

如果原来没有子节点，不能insertBefore  可以判断一下有没有子节点

       如果父元素没有子节点则appendChild()，否则insertBefore()

5.     文档碎片

理论上可以提高dom的性能，实际上并不能 只有面试可能会问

window.onload=function(){

      var iStart=new Date().getTime();

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

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

      var oFrag=document.createDocumentFragment();

      var i=0;

      for(i=0;i<i<10000;i++){

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

        oFrag.appendChild(oLi);

      }

      oUl.appendChild(oFrag);

      console.log(new Date().getTime()-iStart);

    }

 

三、BOM

1.     打开网页

window.open('http://www.baidu.com/','_blank');

第二个参数可选，_blank在一个新窗口打开，_self在当前窗口打开

window.open('about:blank');//空白页

window.open()返回值是新打开的页面

2.     document.write(‘…’)

在网页上写…

如果是在文档加载完后执行，会清空页面

3.     关闭网页

 window.close();

chrom可以直接关闭

ie提示是否关闭

火狐不允许关闭 只能要关闭open出来的网页

4.     userAgent

alert(window.navigator.userAgent);

当前浏览器的版本

5.     location

alert(window.location);//显示当前路径

 window.location='http://www.baidu.com/';//打开这个网页

 

6.     尺寸及坐标

可视区尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

滚动距离

document.body.scrollTop

document.documentElement.scrollTop

 距可视区顶部的距离oEvent.clientY

7.     系统对话框

 alert(‘…’);//警告框 只能确定

confirm(‘…’);//选择框 有确定和取消2个选项 返回用户的选项true/false

prompt(‘…’,’…’);//输入框 第一个参数是问题，第二个参数是默认值 返回输入的内容 没有内容返回null

8.     window对象的常用事件

onload

onscroll//当页面滚动时

onresize

9.     document的本质是最外面的一层标签

document.childNodes[0].tagName=html

10.   获取event对象

var oEvent=ev||event;//为了兼容性

11.   取消冒泡

oEvent.cancelBubble=true;

12.   键盘按键

onkeydown 按键按下

onkeyup 按键抬起

onpress=onkeydown+onkeyup

onclick=onmousedown+onmouseup

13.   keycode 键值

document.onkeydown=function(ev){

      var oEvent=ev||event;

      alert(oEvent.keyCode);

    }

 

14.   解决卡顿问题

设置定时器

上下左右设置为布尔变量

onkeydown设置某方向为true if或switch

onkeyup设置所有方向为false

15.   ctrlKey shiftKey altKey

按着ctrl时 ctrlKey为true

16.   右键菜单

 document.oncontextmenu=function()

{

}

当点击右键时，…

有返回值 return false;可以阻止弹出右键的菜单

17.   浏览器自带的行为都能用return false屏蔽

右键菜单

form提交

按键输入input

18.   拖拽

按下的点与div的左上角距离不变

onmousedown 存储距离

onmousemove 根据距离计算div最新的位置

onmouseup

四、