javaScript基础
一、浏览器对象
1、window对象:指当前的浏览器窗口
方法:
2、定时器:可设定一个时间之后,再来运行
var timer=setInterval( function(){ ...//做的事情 } , 'slow' ); ----每隔指定时间之后执行,会一直执行
clearInterval( timer) ; ---结束指定的计时器,参数就是计时器对象
var timer=setTimeout(); 运行一次后就自动结束
clearTimeout(timer); ---清除计时器
var num=0; var i; function startCount(){ //计时器实现计数功能 clearTimeout(i); document.getElementById('count').value=num; num=num+1; i=setTimeout("startCount()",1000); } function stopCount(){ clearTimeout(i); };
3、History对象:记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能
window.history.[属性|方法]
History对象属性:
length---返回浏览器历史列表中的URL数量
History对象方法:
back()/forward()---加载history列表中的上/下一个URL 【back()=go(-1) forward()=go(1)】
go()---加载history列表中的某个具体的页面
1 ---前一个,相当于forward(1)
0 ---当前页面
1 ---后一个,相当于back(-1)
其它数值---要访问的URL在History的URL列表中的相对位置
【从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。】
4、Location对象:用于获取或设置窗体的URL,并且可以用于解析URL
location.[属性|方法]
属性:
hash---设置或返回从#开始的URL(锚)
host---主机名和当前URL的端口号
hostname---当前URL的主机名
href---完整的URL
pathname---当前URL的路径部分
port---当前URL的端口号
protocol---当前URL的协议
search---从?开始的URL(查询部分)
方法:--- [参数的URL是会将原来的url+上]
assign()---加载新的文档
reload()---重新加载当前文档
replace()--用新的文档替换当期文档
5、Navigator对象---包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
var browser=navigator.appName;
appCodeName---浏览器代码名的字符串表示
appName---返回浏览器的名称
appVersion---浏览器的平台和版本信息
platform---运行浏览器的操作系统平台
userAgent---由客户机发送服务器的user-agent头部的值 示例:例子
6、screen对象---获取用户屏幕的信息
window.screen.属性
availHeight/availWidth---窗口可以使用的屏幕高/宽度【减去界面特性,比如任务栏】
colorDepth---用户浏览器表示的颜色位数
pixelDepth---用户浏览器表示的颜色位数(ie不支持)
height/width---屏幕的高/宽度
7、注意事项:
1)将<script>放在<head>标签里,会先加在<script>,若想先将布局加载,得用window.onload
2)若布局中有(如onclick="methodName()" )先要用到<script>,则得先让<script>加载
3)同样的,如果<script>在前面,但有获取布局中的对象(如getElementById()),则得先让布局加载
二、DOM---文本对象模型
1、DOM结点
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
结点属性:
nodeName---返回一个字符串,其内容是给定结点的名字
nodeType---返回一个整数,这个数组代表给定结点的类型
nodeValue---返回给定结点的当前值
遍历结点树:
childNodes--返回一个数组,这个数组由给定元素结点的子节点构成 示例
2、document.getElementsByName("name") ---通过name属性值,返回带有指定名称的节点对象的集合
3、document.getElementsByTagName(" li" ) ---通过标签名,返回指定标签的节点对象的集合
4、elementNode.getAttribute(name); ---通过元素节点的属性名称获取属性的值。
5、elementNode.setAttribute(name,value); ---增加一个指定名称和值的新属性,或把一个现有的属性设定为指定的值
6、结点属性:
1) nodeName : 节点的名称 ·元素节点的 nodeName 与标签名相同 ·属性节点的 nodeName 是属性的名称 ·文本节点的 nodeName 永远是 #text · 文档节点的 nodeName 永远是 #document
2) nodeValue :节点的值 ·元素节点的 nodeValue 是 undefined 或 null ·文本节点的 nodeValue 是文本自身 ·属性节点的 nodeValue 是属性的值
3) nodeType :节点的类型 元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
7、elementNode.childNodes; ---访问选定元素节点下的所有子节点的列表,返回的值是一个数组(伪)
8、node.firstChild/lastChild; ---属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 null 【空格chrome、firefox等浏览器标签之间的空白也算是一个文本节点也会算进去】
9、elementNode.parentNode; ---获取指定结点的父节点
10、 nodeObject.nextSibling/ previousSibling ; ---获取指定结点的下一个/上一个兄弟结点
function get_nextSibling(n){ //封装获取下一个兄弟结点 n--指定的结点元素
var x=n.nextSibling;
while (x && x.nodeType!=1){ //如果不是元素结点,则继续往下查找
x=x.nextSibling;
}
return x;
}
11、.appendChild(newNode); ---向指定元素结点插入一个子节点,放在最后
12、 parentNode.insertBefore(newNode ,childNode); ---向指定元素结点插入一个子节点,放在指定的子节点的前面
13、nodeObject.removeChild(node); ---删除子节点,若 删除成功,可返回被删除的结点[node],否则null ---删除所有子节点示例
14、node.replaceChild(newNode,oldNode); ---实现子节点(对象)的替换。返回被替换对象的引用
15、document.createElement( 'tagName'); ---创建一个元素结点
16、document.createTextNode( 'data'); ---创建一个文本结点,返回新创建的Text结点 ---示例
17、获取浏览器窗口可视区域的大小(浏览器的视口,不包括工具栏和滚动条)【仍不理解,待完善】
var width= window.innerWidth || document.documentElement.clientWidth; ---考虑兼容性
window.innerWidth ---IE9+、Chrome、Firefox、Opera 以及 Safar(浏览器)
document.documentElement.clientWidth ---IE 5~8
document.body.clientWidth ---IE 5~8
18、scrollHeight ---获取网页内容的大小 【仍不理解,待完善】
var h= document.body.scrollHeight||document.documentElement.scrollHeight; ---兼容性
19、offsetHeight = clientHeight + 滚动条 + 边框 ---网页尺寸 【仍不理解,待完善】
Offset属性
获取一个标签的宽度,因为用 div.style.width只能得到行内的数值,而我们通常使用的是内嵌式,外链式
var h= document.documentElement.offsetHeight || document.body.offsetHeight; ---
offsetWidth = width + border + padding 不包含margin //获取 对象 的宽度