一、javascript基础:
1. 页面文档输出:document.write(“<h2>thisis a page</h2>”); //不能在文档加载完成之后使用,会覆盖该文档。
2. 根据id改变HTML文档内容:document.getElementById(“id”).innerHTML=”newcontent”;
3. 根据id改变属性:document.getElementById(“id”).属性名=”new content”;
4. 根据id改变CSS:document.getElementById(“id”).style.属性名=”new content”;
5. 定义数组:var arr=[“hello”,”hi”];或 var arr=new Array(“hello”,”hi”); 或var arr=new Array();
6. 字符串中“+”表示连接,任何类型与字符串相加都被转换为字符串类型
7. for-in语句:for(j in i) { document.write( i[j] ); } //如果变量j是数组i中的一个元素
8. function函数内定义变量不写var,定义的是全局变量,但要等函数执行才生效。
9. JavaScript异常处理:
(1)try-catch
try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
(2)throw语句---创建一个自定义错误
二、事件
1、 常用事件类型:
onLoad()在body标签上调用
onClick:单击事件onMouseOver:鼠标经过事件
onMouseOut:鼠标移出事件
onChange:文本内容改变事件
onSelect:文本框选中事件
onFocus:光标聚集事件
onBlur:移开光标事件
onLoad:网页加载事件
onUnload:关闭网页事件
2、事件句柄
用处:多个句柄添加事件不会覆盖,可实现多个功能
(1) addEventListener(); //向指定元素添加事件句柄
参数:“事件类型”,“处理事件函数名”
(2) removeEventListener(); //移除方法添加的事件句柄
3、 事件流
页面中接受事件的顺序
(1) 事件冒泡:由最具体的元素接收,逐级向上传播至最不具体的元素节点
(2) 事件捕获:最不具体的节点先接收事件,最具体的节点最后接收事件
3. 事件处理
(1) HTML:要修改多处
直接添加到HTML结构中
(2) DOM0级事件处理:会被覆盖
把一个函数赋值给一个事件处理程序属性
(3) DOM2级事件处理
addEventListener(“事件名”,”事件处理函数”,”布尔值”);
true:事件捕获
false:事件冒泡
removeEventListener();
(4) IE事件处理程序:
attachEvent
detachEvent
5、事件对象:在触发DOM事件的时候产生的对象
事件对象event 属性:
(1) type:获取事件类型
(2) target:获取事件目标
(3) stopPropagation() :阻止事件冒泡
(4) preventDefault():阻止事件默认行为
三、内置对象
自定义对象:定义并创建对象实例;使用函数定义对象,然后创建新的对象实例
1. 创建:
<script>
people = new Object();
people.name = "wanna";
people.age="18";
document.wirte("name:"+people.name+",age:"+people.age);
people = {name:"wanna",age:"18"};
document.write("name:"+people.name+",age:"+people.age);
fuction people(name.age){
this.name = name;
this.age = age;
}
son = new people("wanna",18);
document.write("name:"+son.name+",age:"+son.age);
</script>
2. String字符串对象
属性:
string.length;
给对象添加属性:string.prototype;
返回对创建此对象的数组函数的引用:string.constructor
方法:
string.indexOf(“要查询的字符串”); //返回字符串开始的位置
string.match(“要匹配的内容”); //返回匹配的字符串,没有则返回空
string.replace(“被替换的参数”,”新替换上的参数”);
string.toUpperCase(); //转换为大写
string.toLowerCase(); //转换为小写
string.split(“分隔符”); //根据分隔符将字符串转化为数组
3. Date日期对象
当前时间:var date = new Date(); 获取年份:date.getFullYear();
获取毫秒:date.getTime(); 设置具体的日期:date.setFullYear();
获取星期:date.getDay(); 时钟实例:在body标签中调用οnlοad=startTime()
四、DOM对象控制html
getElementsByName()----获取name; getElementsByTagName()-----获取元素
getAttribute()-----获取元素属性; setAttrubute()-----设置元素属性
childNodes()-----访问子节点; parentNode()------访问父节点
createElement()------创建元素节点; createTextNode-----创建文本节点
insertBefore()-----插入节点; removeChild()------删除节点
offsetHeight:网页尺寸,不包含滚动条 scrollHeight:网页尺寸,包含滚动条
五、JS浏览器对象
1. window对象
(1)window对象----当前浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性,全局函数是window对象的方法,document也是window对象的属性之一。
(2) window尺寸
window.innerHeight----浏览器窗口的内部高度
window.innerWidth----浏览器窗口的内部宽度
(3)window方法
window.open()-----打开新窗口--- open(”url”,”window_name”,”height,width,top,left”);
window.closes()----关闭当前窗口
2. 计时器
(1) setInterval(函数;毫秒)----间隔指定毫秒数不停地执行指定代码
clearInterval()----停止setInterval()方法执行的函数代码
(2) setTimeout()----暂停指定的毫秒数后执行指定的代码
clearTimeout()-----停止执行setTimeout()方法的函数代码
3. History对象
包含浏览器的历史url的集合
(1) history.back()----后退
(2) history.forward---向前
(3) history.go()---进入某个历史页面
4. Location对象
获取当前页面的地址URL,并把浏览器重新定向到新的页面。
(1) location.hostname:返回web主机的域名
(2) location.pathname:返回当前页面的路径和文件名
(3) location.port:返回web主机的端口
(4) location.protocol:返回所使用的web协议
(5) location.href:返回当前页面的url
(6) location.assign():加载新的文档
5. screen对象
包含有关用户屏幕的信息
(1) screen.availWidth:可用屏幕宽度
(2) screen.availHeight:可用屏幕高度
(3) screen.height:屏幕高度
(4) screen.width:屏幕宽度
六、js面向对象
1. 一切事物皆对象;对象具有封装和继承特性;信息隐藏
2. 函数构造器构造对象
3. js中没有类,用function模拟
继承+隐藏:
(functin(){
var n = “ime”;
function People(name){
this._name = name;
}
People.prototype.say = function(){
alert(“peo-hello” + this._name);
}
window.People = People;
}());
function Student(name){
this._name = name;
}
Student.prototype = new People();
var superSay = Student.property.say;
Student.property.say = function(){
syperSay.call(this);
alert(“stu-hello” + this._name);
}
var s = new Student(“Wanna”);
s.say();