js之番外

来源：互联网发布：java怎样配置环境变量编辑：程序博客网时间：2024/04/27 15:41

一、BOM

1.window对象

1.1 全局作用域

全局变量和函数都会变成window的变量和函数不过delete变量时会有差异 var age=1; delete window.age; window.age还是1

1.2 frames

如果页面包含框架，每个框架都有自己的window对象，frames[]是window对象数组。如一个frame的name为top 则frames['top'] 为frame为top的window对象

1.3 窗口位置及窗口大小

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;

var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

各浏览器有差别详见js高级编程 8.1.3

窗口大小见8.1.4

1.4 定时器

1.4.1超时调用只执行一次 var timeId=setTimeout(function(){...}，1000); 取消 clearTimeout(timeId);

1.4.2间歇调用即指定间隔时间重复调用 var intervalId=setInterval(function(){...},1000); 取消 clearInterval(intervlId);

推荐使用超时调用

1.5 对话框对话框是同步、模态的外观由系统定制

1.5.1 alert

只有一段文本和一个确认按钮 alert("hello"); 目的只是展示一段内容只能点击按钮关闭没有其他操作

1.5.2 confirm

一段文本、一个确认按钮和一个取消按钮通过返回的bool值确定点击了哪个按钮

1.5.3 prompt

输入框

1.6 location

窗口的url信息

1.7 navigator

当前浏览器信息并不是所有浏览器都支持

1.8 screen

浏览器窗口的尺寸信息各浏览器有差距

1.9 history

历史记录提供向、前向后跳转

二、DOM

盗个图

其中最重要的是Document和Element

2.1 document

document使我们可以从脚本中对 HTML 页面中的所有元素进行访问

2.1.1 通过标签id获取元素 getElementById()

2.1.2 通过标签name获取元素 getElementsByName() 因为多个标签可以有同样的name 所以返回的是一个元素数组

2.1.3 通过标签名获取元素 getElementsByTagName() 返回的是一个元素数组

还可以根据css选择器定位元素

2.1.4 document.querySelector("#test"); 返回第一个匹配#test的元素

2.1.5 document.querySelectorAll("#test") 返回第所有匹配#test的元素是一个nodeList

2.1.6 matchesSelector 用来匹配dom元素是否匹配某css selector 即标签否有该css样式

2.2 元素之间的关系

因为元素一般都不是孤立存在的所以存在一定的关系

常用的parentNode、childNodes、firstChild，lastChild、nextSibling，previousSibling、nodeType、nodeValue、nodeName

2.3 操作节点

追加 node.appendChild(newNode); 返回newNode

插入特定位置 node.insertBefore(newNode,referNode); 第一个参数为新节点第二个为参照节点将插入参照节点之前

替换节点 node.replaceChild(newNode,deleteNode); 第一个参数为新节点第二个为将要被替换的节点替换也可以使用document.getElementById(id).innerHTML=new HTML

移除节点 node.removeChild(deleteNode);

复制节点 cloneNode(); 它会接收一个bool参数 true为深复制，将复制此节点内部的所有节点而为false时只复制当前节点结果只会有一个节点

创建节点 var div=document.createElement(“html标签”);

2.4 输出文档

document.write()

2.5 操作标签属性

document.setAttribute()/getAttribute()/removeAttribute() 替换也可以使用document.getElementById(id).attribute=new value

2.6 操作元素样式

document.getElementById(id).style.property=new style 如：document.getElementById("p2").style.color="blue";

2.7 Text类型

文本节点

2.8 Comment类型

注释类型

2.9HTML标签有许多会对应js的一个HTML标签对象

3 事件

3.1 HTML 事件属性

3.2 使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

3.3 方法调用

if(element.addEventListerner){               //添加事件
   element.addEventListerner(type,function,false)；//针对非IE
}else if(element.attachEvent){
   element.attachEvent("on"+type,function);   //针对IE
}
if(element.removeEventListerner){           //移除事件
   element.removeEventListerner(type,function,false)；//针对非IE
}else if(element.detachEvent){
   element.detachEvent("on"+type,function);   //针对IE
}

3.4 UI事件如load，unload

焦点事件如focusout，focusin

鼠标与滑轮事件如click，mousemove，mouseover

键盘事件如 keydown，keyup

变动事件 DOM结构发生变动时会调用 DOMNodeInserted,DOMNodeRemoved

4 canvas

5 ajax

5.1 创建

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

5.2 发送

5.2.1 GET

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true); //true 异步 false 同步
xmlhttp.send();

5.2.2 POST

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //http头
xmlhttp.send("fname=Bill&lname=Gates");

5.3 服务器响应

如果为同步直接接受 xmlhttp.responseText或xmlhttp.responseXML

如果为异步则

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

5.4 请求超时

xmlhttp.timeout=1000;

xmlhttp.ontimeout=function(){}

0 0