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,}