JavaScript基础总结
来源:互联网 发布:重启网络命令 编辑:程序博客网 时间:2024/05/21 21:47
一、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标签中调用onload=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();
- javascript/javascript基础总结
- Javascript基础笔记总结
- JavaScript基础学习总结
- JAVASCRIPT 基础总结
- javascript 基础总结1
- javascript 基础总结
- 【JavaScript】知识总结---基础
- Javascript DOM基础总结
- 【JavaScript】BOM基础总结
- javaScript基础总结
- 【JavaScript】DOM基础总结
- javascript基础总结
- JavaScript基础总结
- javascript基础总结
- JavaScript基础总结
- JavaScript基础总结
- javaScript基础知识点总结
- JavaScript基础总结
- sqlite3 通配符
- Web应用架构
- POJ 3667 Hotel
- gcc: readline/libreadline.a: No such file or directory
- 需求评审五个维度框架分析及其带来的启示-3-典型需求评审
- JavaScript基础总结
- c# Form中向DataGridView控件添加数据的三种方式
- java7 新特性 Files copy
- 基础命令
- 使用Camera2 替代过时的Camera API
- csdn待改进点之4------>个人资料中的排版格式如此, 这样真的好吗?
- Sugar ORM 普及文章
- 新闻切换特效
- BZOJ3511 土地划分 题解&代码