1,JS特点:
解释型:不需要编译,浏览器直接解释执行
基于对象:可以直接使用JS已经创建的对象,如String,Math等
事件驱动:可以对已事件驱动的方式相应客户端的输入,无须经过服务器端程序
安全性:不允许访问本地硬盘,不能将数据写入服务器,不能
跨平台:与操作系统无关
2,在网页中直接写入Javascript代码,可在head和body中
例如:
new Date().getYear()/getMonth()/getDate()获取年月日
new Date().getDay()获取星期
var arr = new Array("...");
3,html页面乱码:<meta http-equiv="content-type" content="text/html;chartset=utf-8">
4,window.οnlοad=function(){}表示页面加载时调用
5,JS关键字:abstract continue finally instanceof private this
boolean default float int public throw break
do for interface return typeof byte double function
long short true case else goto native static var
catch extends implements new super void char false import
null switch while class final in package with synchronized
6,每行结尾的分号可有可无,如果语句结尾处无分号,js会自动将这行代码的结尾作为语句结尾
7,JS未赋值的是undefined
8,JS全局变量的声明:
在函数体外面声明的都是全局变量
var v;
function funName(params){
form.inputName.value;//获取name为inputName的输入框的值
};
9,判断字符串是否为空:if(str == "")
10,事件与事件处理:用于相应某个事件而处理的程序
onabort:
对象载入被中断时触发
onblur:
元素或窗口失去焦点时触发
onchange:
改变select元素中的选项或其他表单元素失去焦点,并且在其获取焦点内容发生改变时触发
onerror:
出现错误时触发
onfocus:
任何元素或窗口获取焦点时触发
onkeydown:
键盘键(包括shift,alt等)被按下时触发
onkeypress:
键盘被按下,并产生一个字符时触发。也就是shift或alt被按下时不处罚
onkeyup:
释放键盘按键触发
onload:
页面完全载入时触发
onunload:
页面完全卸载后触发
onclick:
单机鼠标左键触发
ondblclick:
鼠标双击触发
onmousedown:
单机任何一个鼠标按键触发
onmousemove:
鼠标在某个元素上移动时连续触发
onmouseout:
鼠标从指定元素上移开时触发
onmouseover:
鼠标移到某个元素时触发
onmouseup:
释放任何一个鼠标按键触发
onreset:
单击重置按钮时,在form上触发
onresize:
窗口或框架大小发生改变时触发
onscroll:
在任何带滚动条的元素或窗口时滚动时触发
onselect:
选中文本时触发
onsubmit:
单机提交按钮时,在form上触发
11,写代码时,<script></script>标签对最好放在body的最后面,防止因加载次序而出错。
12,String对象介绍:
indexOf(subsString[,startIndex]);
substr(start[,length]);
substring[from[,to]);
split(delimiter[,limit]);
13,Math对象
Math.PI, Math.random()
Math.max(...);Math.min(...)
14,window.setInterval("sysTime()",1000);//每隔一秒调用此方法,循环调用
15,$("#ID").innerHtml = "abc";//设置DIV文本
16,window对象:顶级对象,浏览器窗口对象,直接用window不需要new出来
17,window对象的属性和方法:
document:是window对象的一个属性,是对窗口或框架中含有文档的document对象的只读引用
defaultStatus:一个可读写的字符,用于指定状态栏的默认消息
frames:表示当前窗口中所有frame的集合
location:用于代表窗口或框架的location对象,如果将一个URL赋值给该属性,那么浏览器将加载并显示该URL指定的文档
length:窗口或框架包含的框架个数
history:对窗口或框架的history对象的只读引用,回退获取历史对象
name:用于存放窗口名字
status:一个可读写的字符,用于指定状态栏的当前信息
top:表示最顶层的浏览器窗口
parent:表示包含当前窗口的父窗口
opener:表示打开当前窗口的父窗口
closed:一个只读的布尔值,表示当前窗口是否关闭
self:表示当前窗口
screen:对窗口或框架的screen对象的只读引用,提供屏幕尺寸,颜色深度等信息
navigator:对窗口或框架的navigator对象的只读引用,通过navigator对象可以获得与浏览器相关的信息常用方法:
alert()
警告对话框
confirm()
显示确认对话框,单机确认按钮时true,否则false
prompt()
弹出提示框,并要求输入一个简单字符串
blur()
把键盘的焦点从顶层浏览器窗口移除
close()
关闭窗口
focus()
键盘焦点赋予最顶层窗口
open("www.baidu.com","百度")
打开一个新窗口
scrollTo(x,y)
窗口滚动到x,y指定的位置
setTimeout(time)
经过指定时间后执行
clearTimeout()
取消对指定代码的延迟执行
moveTo(x,y)
窗口移动到某位置
调用window对象的属性和方法时,可以省略window对象名称
18,DOM将标签映射成对象的属性和方法,可以通过操作对象的方法来操作这些属性和方法
19,DOM的分层结构,是一个倒立的树型结构,根是html标签,树的节点表示文档中的内容
20,DOM遍历文档
在dom中,HTML文档各个节点被视为各种类型的Node对象,并且将HTML文档表示为Node对象的树
21,Node对象的属性,调用时,直接node.attr就可以了,也可以直接设置属性
22,属性
类型
描述
parentNode
Node
节点的父节点,没有为null
childNode
NodeList
节点的所有子节点
firstChild
Node
节点的第一个子节点,没有为null
lastChild
Node
节点的最后一个子节点,没有为null
nodeName
String
节点名,html/head/body/mata
nodeValue
String
节点值
previousSibling
Node
上一个兄弟节点
nextSibling
Node
下一个兄弟节点
nodeType
short
表示节点类型的常量
23,常用的节点类型
Element
:html中的标签,createElement
Text:文本,createTextNode
24,getElementById返回Node类型的节点
25,DOM操作文档,常用方法:
insertBefore(newChild,refChild);
//现有节点之前插入节点
replaceChild(newChild,oldChild);
//将子节点清单中的子节点oldChild换成newChild,并返回oldChild
removeChild(oldChild);
//将子节点清单中的子节点old删除并返回
appendChild(newChild);//将节点newChild添加到该子节点清单末尾,如果new已经在树中,则先将其删除
hasChildNodes()//表示该节点是否还有子节点
cloneNode(deep)//返回这个节点的拷贝(包括属性)。如果deep为true则拷贝所有包含的节点(深拷贝),否则只拷贝这个节点(浅拷贝)。
createTextNode()//创建一个文本节点
createElement()//创建一个元素,即创建一个标签对
var v1 = document.createTextNode("...");//创建一个文本节点,文本也是节点
var v2 = document.createElement("h1");
v2.appendChild(v1);
26,table属性:
rows获取行节点
deleteRow(1);//删除第二行
27,取div的位置,div.offsetLeft;
28,js设置属性值,p.attr="";
29,设置定时器,
timer = setInterval(function(){},300)
clearInterval(timer);关闭定时器
30,div.style.left;分层次取属性
31,Math.floor,Math.ceil取整
32,使用style[attr]动态取出取出css中的属性
33,函数的3种声明方式
//函数也是对象,以对象来new出函数
var f1 = new Function();
//声明式
function f2(){};
//赋值,回掉函数时使用
var f3 = function(){};
34,数组定义的三种方式:
Array也是内置对象
var arr = new Array();
var arr = new Array(50);
var arr = new Array("a","b","c");
简洁的创建方式
var a1 = [];
var a2 = ['','','',''];
35,length属性表示数组长度
length大小可变,当length被设置很大,内容不变,但length变大
length设置很小时,索引大于length的元素丢失
36,数组可以嵌套:
var a = [1,'abc', new Date(),[1,2]];
37,数组添加元素
a.push();末尾添加
a.unshift();开始添加
移除元素
a.pop();移除最后一个
a.shift();移除第一个
其他方法:
a.splice(a,b)//a为索引,b为个数,表示去掉以a开始的后面b个元素后组成新数组赋值给a
a.splice(a,0,b);//在指定索引a处添加元素b
a.slice(a,b)//获取a的[a,b)的子串返回,但是a不变
a.concat(b)//将b连到a的末尾并返回
a.reverse()//将a反转
a.sort()//升序排序
a.join("-")方法,数组默认以逗号隔开,变成-分割
38,任何元素都可以加上ID,包括head里的东西
39,title是提示文字
40,链接的href="javascript:alert('a')"
41,JS里面唯一的一个给html元素属性赋值的意外:class,因为JS中class是关键字
JS给class赋值时使用Ele.className = 'class1';
42,操作属性的2中方法:
1,style.width =
2,style[width] = //常常在style里面使用,注意方括号中必须用字符串
JS中所有的.操作符都可以用[]代替,如:
document.getElementById('id')
等价于document['getElementById']('id')
div.style[name]等价于div['style'][name]
43,JS中通过style添加的样式都是行间样式
样式表中的样式无法通过JS取出,所以js取出的样式都是行间样式
44,注意className和style的优先级,因此设置时要注意,否则容易出错
45,提取行间事件事件和其他元素属性一样,window.οnlοad=function(){};
btn.οnclick=funciton(){}或者
function abc(){}; btn.οnclick=abc;
注意直接跟函数名abc,后面不能有括号()
46,为防止script放在head里面无法响应的问题,使用:
window.οnlοad=function(){//页面加载完成之后再加载js代码
}
47,获取一组元素的方法:getElementsByTagName('p');还可以获取很多后代元素
getElementsByTagName可以用于完成全选事件
div.getElementsByTagName
48,this:当前发生事件的元素
通过JS可以添加自定义属性
49,innerHTML:获取元素的文本,设置元素的文本,还可以加上Html样式等
.innerHTML="<h1>jfajsf</h1>"
50,检测变量类型:typeof(a);//number,string,boolean,undefined,object,function
undefined:1,未定义2,已经定义,未给东西
51,JS里面的全局方法:
parseInt(str);//string->int,从左到右扫描,遇到非数字为止,可以提取最左边的数字,若转化失败,如'abc',则返回NAN(Not A Number)
NAN和NAN不相等,判断isNaN()
parseFloat(str);//string->double
52,a==b 先转换类型再比较
a===b,不转换类型,直接比较
53,JS还可以在父函数中定义子函数
闭包:子函数可以使用父函数的局部变量
54,json键值对:中间用,逗号分隔
55,js里面的增强for循环
var a = [1,2,3,4];
for(var i in a){alert(i)}//此时取出下标
56,从json里面取值可以使用[]方括号
如var json = {a:1,b:2};
json没有length
json循环的使用:
var json = {a:1,b:2};
for(var i in json){
i是取出json的键
json[i]取出json的值
alert(i);
alert(json[i]);
}
57,函数返回值:function fun(){return 12};
58,当函数参数不固定时:argument内置对象非常有用
argument[0],argument.length
function sum(){argument.lenth;}
sum(1,2,3)
59,取出非行间样式:div.currentStyle.width,只兼容IE
div.getComputedStyle(div,null).width
兼容FireFox,第二个参数没用
针对不同浏览器
if(!div.currentStyle){
div.getComputedStyle(div,null).width
}else{
div.currentStyle.width
}
取出行间样式:div.style
60,复合样式:background:url color positon... border: color, width
单一样式:width,height,position,
61,sort排序数组时,会先转为字符串,再排序,此时可以传比较函数
aa.sort(function(n1,n2){
if(n1>n2)
return 1;
else if(n1<n2)
return -1;
else return 0;
或者return n1-n2;
});
61,JS定时器的使用
开启定时器
var timer = setInterval(show,1000)
//间隔型,每隔1s执行一次show方法
var timer = setTimeout(show,1000)
//延时型,只执行一次
关闭定时器
clearInterval(timer);
clearTimeout(timer);
//为防止第一次不执行,可以将函数先运行一遍
62,string[i]可以使用string.charAt(i)
63,offsetLeft可以获取物体的坐边距,offsetTop获取物体的上边距
64,DOM节点
childNodes:取出子节点
注意:普通的文本也是一个节点
nodeType:判断节点类型
3:textNode,文本节点
1:element,元素节点
children:该属性只会取出元素,不会取出文本节点,只算第一层
parentNode:获取父节点
offsetParent:获取一个元素用来定位的父节点,css中,子元素设置为绝对定位,父元素是相对定位,则子元素相对body来进行定位
65,首位子节点:
firstChild(包含文本节点)
firstElementChild(不包含文本节点)
lastChild,lastElementChild
兄弟节点:
nextSibling,nextElementSibling
previousSibling,previousElementSibling
66,DOM方式操作元素属性
div.setAttribute(attrName,attrValue);
例如:
div.setAttribute(value,"abc");
div.getAttribute(attr);
div.removeAttribute(attr);
67,用className来选择元素
1,选出所有元素
2,用className来筛选
封装成函数
getElementByTagName('*');
68,创建DOM元素:
createElement(标签名),创建一个节点
appendChild(节点),追加一个节点
insertBefore(节点,原有节点)
在已有元素前插入
removeChild(节点)删除一个节点
69,文档碎片
文档碎片可以提高DOM操作性能
document.createDocumentFragment();
70,插入节点的步骤:
1,createElement 创建一个节点,innerHTML加上文本
2,appendChild 插入到父节点
在最前面插insertBefor(child[0],div);
71,DOM高级:
获取:
tBodies,tHead,tFoot,rows,cells
72隔行变色:
鼠标移入高亮
添加、删除一行:
73,表格的简单操作:
table.tBodies//取出tbody
table.tBodies[0].rows[1]//取出第一行
-
table.tBodies[0].rows[1].cells[1]//取出第一行第一列
74,表单事件:
onsubmit:表单提交时发生
onreset:表单重置时发生
form.onsubmit = functon(){}
75,表单应用:
阻止用户输入非法字符:阻止事件
输入时、失去焦点验证
onkeyup,onblur
提交时检查
onsubmit
76,事件对象和事件冒泡
事件对象用来获取事件的一些信息
事件冒泡:子div的onclick事件传递给父div
取消事件冒泡:不让事件向父级传递
ev||event.cancelBubble=true;
77,鼠标事件:
可视区位置:clientX, clientY,获取鼠标坐标,是可视区坐标
event是js内置对象
event.clientX, event.clientY,获取鼠标点击坐标
firefox通用的写法为:
document.οnclick=function(ev){//ev由系统传过来
var oEvent = ev||event;//保证兼容性
oEvent.clientX....
}
78,键盘事件
keycode
79,给document添加事件:
document.οnclick=function(){}
80,获取某个节点的标签名:
dom.tagName
81,document是最高节点,包含<!docType>和<html>两个子节点
82,scrollTop=document.docuemntElement.scrollTop||document.body.scrollTop;//获取滚动条到上边缘距离
onmousemove
onkeydown
{
alert(oevent.keyCode);
}
onkeyup
83,实现回车提交:
input.οnkeydοwn=function(ev)
{
ev =...;
if(ev.keyCode == 13)
....;
if(ev.keyCode ==13 && ev.ctrlKey)//回车+ctrl
...
ev.shiftKey
ev.altKey
}
84,定制右键菜单:
点击右键时让div的display变成block
document.οncοntextmenu=function(){//当用户点击右键菜单时触发
return false;//屏蔽右键菜单,阻止默认事件
}
doucment.οnclick=
....
div.display=block;
window.οnlοad=function(){
var otxt = document.getElementById('txt');
otxt.οnkeydοwn=function(){
//默认行为是输入按键,键入到文本框
return false;//让键盘输入时间失效
if(event.keyCode ....)
return false;
}
}
div.οnmοusedοwn=function(){
document.οnmοusemοve=function(){};
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
85,事件绑定:
//IE使用
attachEvent(事件名称,函数),绑定事件处理函数
detachEvent(事件名称,函数),解除绑定
DOM方式:
//Chrome,firefox使用
addEventListener(事件名称,函数,捕获)
removeEventListener(事件名称,函数,捕获)
绑定匿名函数,会无法删除
86,同一个元素加两次事件,就会产生覆盖,而绑定就不会出现此问题
btn.attachEvent(onclick,function(){
alert("a");
});
btn.attachEvent(onclick,function(){
alert("b");//不会覆盖
});
//此时Click前面没有On
btn.addEventListener(click,function(){},)
87,解决兼容性问题:
if(btn.attachEvent){
}else{
}
88,事件捕获:
obt.setCapture();将所有事件集中到一个按钮上
obt.releaseCapture();释放
89,Ajax:
异步读取
1,新建Ajax对象:
IE6 new ActiveXObject("Microsoft.XMLHTTP");
非IE6:new XMLHttpRequest();
if(window.XMLHttpRequest){//防止未定义变量报错,因此使用属性
aJax = new XMLHttpRequest();
}else{
aJax = new ActiveXObject("Microsoft.XMLHTTP");
}
2,连接服务器
ajax.open(method(GET/POST),"www.baidu.com?t="+new Date().getTime(),true(异步)/false(同步));
3,发送请求
ajax.send();
4,接受返回值,以事件的方式来处理
ajax.onreadystatechange = function(){
ajax.readyState
浏览器和服务器进行到哪一步
ajax.readySate::
0,(未初始化)还未调用open()方法
1,(载入)已经调用send()方法,正在发送请求
2,(载入完成)send()方法完成,已经收到全部相应
3,(解析)正在解析响应内容
4,(完成)相应内容解析完成,可以在客户端调用
if(ajax.readyState == 4){
ajax.status:表明请求是否成功,200代表成功,否则失败
if(ajax.status == 200){
ajax.responseText:从服务器发过来的响应文本
var text =ajax.responseText;
function(text);
}
}
};
同步:多件事一件件来,前面的未完,后面的等待
异步:多个事一起来,前面的未完,后面的也可以进行
90,去缓存:
url?t=new Date().getTime()
91,使用eval函数将字符串转换成Object对象
var str = "[1,2,3]";
var arr = eval(str);//arr变成数组
eval可以将json变成Object对象,
注意json数组只是数组
eval(json):eval()函数解析json字符串时注意应该写成eval("("+jsonStr+")"),因为json字符串以“{”开头,以"}"结尾,eval会把它们当成语句块,所有需要加上圆括号。
92,使用未定义变量:报错
使用未定义属性:undefined
93,系统对象:
本地对象(非静态,必须new):Object Function Array String Boolean Number Date ReqExp Error
内置对象(静态,不能new):Global(不存在的全局对象) Math;这些对象不能new出来,因为是静态类
宿主对象:DOM BOM
94,BOM引用:
//返回新窗口的window对象
//类似于网站中的运行代码
var newwin = window.open("www.baidu.com","_self/_blank/");
newwin.document.write("");
window.close
document.write("");
window.location//可以读取或改变当前页面的地址
95,可视区尺寸:
随着浏览器窗口大小改变,不包括滚动条
clientHeight,clientWidth
document.documentElement.clientWidth
scrollTop:可视区顶部距离页面顶部距离
document.body.scrollTop//Chrome
document.documentElement.scrollTop//IE和FireFox
96,window常用事件:
window.οnscrοll=function(){//当页面滚动时发生
}
window.onload
window.onresize页面大小变化时
97,常用的系统对话框:
alert();无返回值
confirm("提问内容");//返回boolean
prompt("提示","默认内容");返回字符串或者null
98, js获取屏幕大小:
window.screen,avaiHeight
window.screen.avaiWidth