js中小细节注意

1.编写js的流程：

布局：html+css

属性：确定修改那些属性

事件：确定用户做哪些操作

编写JS:在事件中，用js来修改页面元素的样式

2.obj.style.opition  option的值html中怎么写，js中就怎么写（特例：class写成className）

3.任何标签都可以加ID,包括link

4.变量不加引号，变量的值不固定；字符串加引号

5.obj.value相当于obj[‘value‘]

6. .style修改的是行内样式，优先级比className要高

7.样式优先级

*<标签<class<id<行间样式

8.前端行为(js)样式(css)结构（html）三者分离有利于代码维护

9.window.onload = function(){

//页面加载完在执行其中的代码
}

10.获取一组元素：getElementsByTagName('div')获取相同标签名的元素

objs[0].style.background = 'red';

var aDiv = getElementsByTagName('div');

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

objs[i].style.background = 'red';

}

11.数组定义var arr = [1,2,3]

数组使用：arr[i]

12.js的组成

ECMAScript:解释器翻译   几乎没有兼容性问题

BOM  有一些操作不兼容

DOM 完全不兼容

13.typeof来判断变量类型

14.undefined 真的没定义的时候，虽然定义了没有给东西都是undefined类型

15.强制类型转换

字符串转整数 parseInt(变量名)   字符串转化小数 parseFloat

隐式类型转换

== (先转换类型然后比较)      ===（不转换类型直接比较）      -  (var a='12'  var b='5'  alert(a-b)会将字符串自动转换成数字)  

+ 两种作用 字符串拼接和数字相加   计算机永远选择最简单的一条路，所以会选择字符串拼接

16.NaN     not a number不是一个数字，判断一个东西是否是NaN   isNaN(a)

17.闭包

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

18.命名规范：匈牙利命名法

类型前缀  首字母大写    oTxt

数组 a 布尔型 b 浮点型 f 函数 fn 整数 i 对象 o 正则表达式 i 字符串 s 变体变量 v

19. 运算符：

算数（加减乘除取余数），赋值（=，加减乘除取余数=），关系（>,<,>=,<=,==,===,!=,!===），逻辑（或【||】并且【&&】否）

运算符优先级（）

20.流程控制

判断：if（条件） 

switch（变量）｛case 值1：语句1  break;...default:｝ 

?三目运算符 条件？语句1：语句2   a%2=0?alert('单数'):alert(‘双数’)

循环：while for

跳出：break (中断整个循环)continue（跳过本次循环继续下次循环）

21.true 非零数字，非空字符串,非空对象

fales 数字0，空字符串，null，空对象，undefined

22.json 

数组用的方括号；json用的花括号，里边存值键值对alert(json.a)

json下标是字符串  数组下标是数字

arr.length两种方式都可以循环for和for in   json for( var i in json)

23.函数返回值

可以返回数字，字符串，算式a+b

函数可以没有返回值

函数只能有一个返回值

24.函数传参

arguments可变参和不定参 arguments是一个数组，具有length属，可以循环找东西

函数返回值是将函数内部东西传到函数外，函数传参是将函数外部东西传入函数内用

25.获取非行间样式

oDiv.currentStyle.width只兼容IE

火狐下用getComputedStyle(oDiv,false).width (第二个参数随便放) ie9支持

js里边百分之99.999%的兼容都是通过if  else实现的

26.复合样式 border background

27.数组的使用

var arr=[1,2,3,4];

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

数组的属性

length

数组中最好只存一种类型的变量

数组添加删除

push（尾部添加）  pop unshift(头部添加)  shift  

splice（）从中间添加或删除元素  

1.两个参数splice（2,0）从2位置开始删，删除长度个元素 

2.splice（2,0,‘a’,‘b’,‘c’）从2位置删除0的元素，插入元素

3.splice（2,2,‘a’,‘b’）数组替换操作

数组连接 concat（连接两个数组）a.concat(b)  

 数组转换字符串join（） arr.join('-')将数组中的东西用-链接起来生成字符串

将字符串转换成数组 spilt

数组的排序 arr.sort()

28.定时器

setInterval 间隔性setInterval（函数名，1000）无限执行

setTimeout  延时性setTimeout（函数名，1000）只执行以此   clearTimeout

oBtn.onclick = function(){

timer=setInterval(function(){

alert('a');

},1000);

}

停止一个定时器

oBtn.onclick = function(){

clearInterval(timer)

}

29.时间函数Date

var oDate = new Date();

alert(oDate.getHours()+oDate.getMinutes()+oDate.getSeconds())

获取年 getFullYear() 

获取月份 getMonth()+1 js中的月份是从0开始的

获取日期 getDate()

获取星期几 getDay() (0代表星期日)

30.字符串 str='acbdef'  获取str[0]高版本浏览器兼容，低版本浏览器兼容str.charAt(i)

31.offsetLfet获取div的左边距

offsetTop

offsetWidth

offsetHeight

32.DOM兼容问题

IE6-8  10%支持

Chrome 60%支持

FF  99%支持

33.获取子节点  oUl.childNodes.length

<ul>1<li>2</li>3</ul> 空文本节点，ie6-71个节点,ie8以上3个节点

34.nodeType==3 文本节点 nodeType==1 元素节点

35.oUl.children.length不会算文本节点，都兼容这个子节点，只算第一层的

36.oLi.parentNode 父节点

37.offsetParent  获取一个元素用来定位的父节点

38.firstChiled 在高版本浏览器下有兼容问题，会指向空文本节点

高版本的浏览器用 firstElementChild

last ,nextSbling,previousSbling是一个道理

39.oTxt.value='sdsd'

oTxt['value']='sdasd'

oTxt.setAttribute('value','fadfadfas') 还有get和 remove

40用className选取元素 aLI[i].className=='box'

41.追加节点 appendChild

插入元素 insertBefore(子节点，在谁之前)oUL.insertBefore(oLi,aLi[0])

删除元素 父级.removeChild

42.表格

tbody主动写上

oTab.tBodies[0].rows[1].cells[1].innerHTML

tHead tFoot

添加和删除表格中的行

获取表格 创建tr 创建td

给td中innerHTML 

oTr. appendChild(oTd)

oTab.tBodies[0].appendChild(oTr)

删除行的时候一定要在tBody中删除

oTab.tBodies[0].removeChild(this.parentNode.parentNode)

删除之后避免DI和原来异样

var id = oTab.tBodies[i].rows.length+1

 innerHtml=id++

表格搜索

查询名字

oTab.tBodies[0].rows.length循环所有行

if  oTab.tBodies[0].rows[i].cell[1].innerHTML = = oTxt.value

sTab.toLowerCase() 让字符串小写

str.search('a')模糊搜索函数-1 为没有找到东西

多关键词搜索

字符串转数组

var arr = sTxt.split('')

排序 aLi不真正意义的数组，是元素集合

appendChild

var arr=[]

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

arr[i]=aLi[i]

｝

arr.sort(function(li1,li2){

var n1=parseInt(li1.innerHTML);

var n2=parseInt(li2.innerHTML);

return n1-n2

});

oUl.appendChild(arr[i]);

43.表单

onsubmit

oForm.onsubmit

onreset

44.js中的运动

div运动 div绝对定位 left=offsetLeft+10+'px'  定时器30

保证只有一个定时器的办法

函数开始添加clearInterval(timer)

运动中的bug 不会停止，速度取某些值会无法运动，到达位置后再点击还会运动，连续点击会加快速度

运动开始时关闭已有定时器，把运动和停止隔开

图片淡入淡出 filter:alpha(opcitty:30)  ; opcity:0.3

oDiv.style.filter='alpha(opcity:'+alpha+')'

45.缓存是同一个url读取一次

阻止缓存

‘a.txt?t=’+new Date().getTime()

eval(str)可以将字符串样式的字符串转换成数组