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)可以将字符串样式的字符串转换成数组