JavaScript零散笔记
javascript基础
js组成：DOM BOM ECMAScript
ECMAScript：“翻译功能” js中最核心的部分，专业叫做解释器 几乎没有兼容
DOM： Document Object Model 操作HTML的能力---》document 有一些不兼容
BOM： Browser Object Model 操作浏览器能力---》window 兼容的源头
变量的类型：number string boolean function object undefined(未定义/定义未赋值)
变量类型转换：
显式类型转换（强制类型转换）：
parseInt() -->从左到右匹配字符串，提出字符串中最前面的数字
若字符串中没有数字，则返回一个NaN; NaN和NaN不相等
parseInt 会将小数转成整数，要小数用parseFloat()
隐式类型转换： 5=='5' ---》 true
'12'+'5'=125 加号用来做字符串连接 '12'- '5' ---》 7
变量的作用域和闭包：
作用域：局部变量：只能在定义该变量里的函数里面使用
全局变量：在所有函数的外面声明
闭包：子函数可以用父函数的局部变量
JS命名规范：
可读性---能看懂
规范性---符合规则
匈牙利命名法：
类型前缀：数组(a),布尔值(b)，浮点数(f)，函数(fn)，整数(i)，对象(o)，正则(re)，字符串(s)，字体变量(v)
首字母大写:驼峰命名
运算符：求模% ----》应用（秒转成时间）
var s = 156; alert(parseInt(s/60)+'分'+s%60+'秒')
!== 和 === 相反的意思
程序流程控制：
判断----if,switch,?:
switch(变量){
case 值1:
语句1；
break；
.......
default：
语句；
}
三目（元）运算符：?:
条件？语句1：语句2
跳出：break 中断整个语句
continue 中断本次，继续执行后面的
真假：
真：true，非零数字,非空字符串,非空对象
假：flase，数字零，空字符串，空对象，null，undefined
JSON：｛｝基于js，用来存数据
数组和json循环：for(var i in arr/json){}；
函数的返回值：
return 可以返回函数里面的数字，字符串等，一次只能返回一种类型的值
函数传参 arguments（可变参/不定参）
函数求和：
function sum(){
var result = 0;
for(var i=0;i<arguments.length;i++){
result += arguments[i];
}
return result;
}
sum(2,4,5,7,24,756,34); ---》括号里可以放N个数
取非行间样式：
当样式写在行间时，可以直接通过oDiv.style.xxx来取
非行间样式通过oDiv.currentStyle.xxx来取（IE），但是存在兼容问题
getComputedStyle(oDiv,第二个参数随便放null/false).width
简单兼容处理
if(oDiv.currentStyle){
oDiv.currentStyle.xxx
}else{
getComputedStyle(oDiv,第二个参数随便放null/false).width
}
function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle){
return obj.currentStyle(attr)
}else{
obj.getComputedStyle(attr,false)
}
}else{
obj.style[attr]=value
}
}
css中的样式
复合样式如：background，border
要去复合样式则用具体的如backgroundColor,borderCorlor
单一样式如：width，height
数组基础：
var a = new Array(1,2,3)或者 var a = [1,2,3]
数组中的length既可以读取，也可以写入，如length=0则让数组清空了
数组尾部添加push() -->往数组后面添加
数组尾部删除pop() -->删除数组最后一个数
数组头部添加unshift()
数组头部删除shift()
数组删除 splice(起点，长度)
arr.splice(2,3) --->从第二个元素开始算，三个元素被删除
arr.splice(2,3，a,d,e) --->从第二个元素开始算，三个元素被删除,然后在添加ade
数组连接concat() ---> a.concat(b) a,b为两个数组
数组拼接join() ---> a.join('-') a为一个数组
数组排序sort() 首位开始从小到大排序（a,b,c,d,.....；12,2,34,9,...）
sort() 只认识字符串 ,其有一个function参数；
sort(function(n1,n2){
if(n1<n2){return -1};
else if(n1>n2){retuan 1};
else {return 0};
或者return n1-n2;
})
定时器：
setInterval() 定时器
setTimeout() 延时器
clearInterval(name) 关闭定时器
clearTimeout(name) 关闭延时器
日期时间
var oDate = new Date();
oDate.getHour s() //获取小时
charAt()和[]的功能是一样的
DOM基础：
FF 支持率99%
IE IE6-8 10%
Chrome 60%
子节点 childNodes(文本节点+元素节点) 空行或者换行也算节点 在IE6-8中没有问题
nodeType 节点类型
nodeType --->3 文本节点
nodeType --->1 元素节点
children 元素节点 只算第一层节点，所以子节点中还有节点不算
父节点 parentNode(文本节点)
offsetParent 获取到相对定位的那个父级
firstChild 低版本IE版本支持
有兼容问题 firstElementChild 其他版本浏览器支持,同下
lastChild/lastElementChild
nextSibling/nextElementSibling
previousSibling/prviousElementSibling
元素属性操作方法有三种
1、.方法 任何出现.的地方都可以用[]代替
2、[]的方案
3、setAttribute(名称，值) getAttribute(名称) removeAttribute(值)
createElement document.createElement('li')
appendChild 插入元素，元素被添加最后 ul.appendChild(子节点)
先把元素从原有的父级中删除然后在插入到新的父级
insertBefore 插入元素，ul.insertBefore(子节点，在谁之前)
removeChild 删除元素 ul.removeChild(子节点)
文档碎片 1、创建文档碎片 document.createDouementFragment()；
2、将创建的元素放入在文档碎片中
3、将文档碎片插入到元素中
表格应用
可以通过tBodies/tHead/tFoot/rows/cells获取表格的tBody,tHead,tFoot, 行,列
搜索：
忽略大小写-------toLowerCase()
模糊搜索 -------search 让搜索的内容不为-1即可
var str = 'abcdef'; str.search('a')返回位置下标值，找不到返回-1
多关键字搜索
split()将字符串切成数组
排序：
原理:将要排序的内容的值放入一个素组中，然后用sort（）进行排序，最后利用 appendChild()方式插入原有序列中去
表单应用
向服务器提交数据，表单中的name很重要，后台通过name来查找
事件：onsubmit 提交时发生
onreset 重置时发生
JS运动基础
定时器的运用
定时器每次运行开始前最好先关闭定时器，保证只有一个定时器在运行
停止定时器和开始运动分开，用if/else分开
透明度
filter:alpha(opacity:30);opacity:0.3
写缓冲运动时一定要对速度取整
多物体运动框架
多物体开多个定时器；
所有东西不能共用
event对象
document代表整个网页，
event.clientX/event.clientX 鼠标点击的横纵坐标位置，火狐不兼容
滚动事件
window.onscroll = function(){}
窗口变化事件
window.onresize = function(){}
事件流
阻止事件冒泡 e.cancelBubble=true
鼠标事件
经验：但凡用到clientX和clientY就一定要加上scrollLeft，scrollTop；
键盘事件
keyCode 键盘码表
altKey/shiftKey/ctrlKey
ctrl+回车----发送消息 if(e.keyCode == 13 && e.ctrlKey){....}
onkeydown/onkeyup
默认行为
oncontextmenu 右键菜单事件
document.oncontextmenu = function(){return false} --->右键菜单消失
事件绑定
IE方式 attachEvent(事件名称，函数)
div.attachEvent('onclick',function()｛......})
chrome/FF方式 addEventListener(事件名称，函数,false/true)
div.addEventListener('click',function()｛......},false)
解除事件绑定
IE方式 detachEvent(事件名称，函数)
chrome/FF方式 removeEventListener(事件名称，函数,false/true)
禁止文字选中
return false chrome/FF
obj.setCapture() IE专用
事件捕获 将网页中所有的事件集中在某个元素中去
setCapture()
解除事件捕获
obj.releaseCapture() IE专用
对象：好比一个黑盒子，不了解内部结构，但是知道表面的各种操作
面向对象(OO):不了解内部原理的情况下会使用其功能
面向对象特性：
用对象的人和写对象的人
1、抽象：（抽）--》将对象中里面最核心的特性抽出来处理，抓住核心问题
2、封装： 不考虑内部实现，只考虑功能使用（看不到里面的东西，用好表面的功能）
3、继承（遗传）： 已有对象上，继承出新对象（从从父类上继承出一些方法和属性，子类又 有一些自己的特性）
多重继承：继承多个父类的方法和属性
多态：js不常用
对象的组成：
方法：---函数：过程，动态的
属性：---变量：状态，静态的
this： 当前事件发生的对象
当前的方法属于谁，this就属于谁
不能在系统对象中随意附加方法、属性，否则会覆盖已有的方法和属性
object对象
Object对象上没有属性和方法，可以在其上面加功能实现面向对象
工厂方式（原材料，加工，出厂）
问题：没有new
函数重复-->资源浪费
原型prototype：
css class--->一次给一组元素加样式
行间样式--->一次给一个元素加样式
原型就和class一样的概念
类，对象
类：（模子）
对象：（成品）
如： var arr = new Array(1,1,3,4,5,4）
Array ---->类
arr ------>对象
总结：用构造函数加属性，用原型加方法
用json实现面向对象（单体），，简单，但是不适合多个对象
命名空间：可以让相同名字的函数同时存在，用json实现
将面向过程的函数改为面向对象
//面向过程的程序改写成面向对象程序不能有函数嵌套
//将window.onload初始化整个程序改为构造函数初始化整个对象
//将面向过程中的变量改为属性
//将面向过程中的函数改为方法
继承：
call（）
系统对象：
本地对象：(非静态对象)Array,Object,Function,Number.....,需要new一下
内置对象：(静态对象) Math，Global 无需new出来，直接用
宿主对象：由浏览器提供的对象 DOM BOM
BOM
打开窗口 window.open('http://www.baidu.com','_self');
第二参数是打开的方式
window.open('about:blank'); 打开一个空白页面
关闭窗口 window.close('http://www.baidu.com');
document.write('abc') --->先清空，在写入内容
常用属性
window.navigator.userAgent 当前浏览器版本
window.location 当前网页的地址
window.location = 'www.baidu.com' 也可以用来赋值，跳转新页面
尺寸/距离
document.documentElentment.clientWidth 可视区宽度
document.documentElentment.scrollTop 页面上下滚动的距离
document.body.clientWidth
系统对话框
选择框：confirm("提问的内容")，返回boolean
输入框：prompt()，返回字符串或者null
COOKIE:页面用来保存信息的
特性：同一套网站（同一个域名）只有一套cookie
数量（<50条数据），大小有限（4k-10k）
过期时间
document.cookie;
数据格式为 属性=属性值
cookie不会被覆盖，写两条就显示两条
正则表达式（一套规则）：强大的字符串匹配工具
search()
substring()
charAt() 返回字符串的某位
split()
match() 把所有匹配的内容提取出来
replace() 替换
[] 或
^ 除了，排除
出去html标签的正则 re = /<[^<>]+>/g
{n} 正好出现n次
{n,m} 最少n次，最多m次
{n,} 最少n次，最多不限次
? 表示{0,1}
* 表示{0,}
