强行推一推博文~
js04.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
js的bom
window对象
弹框的方法
alert("提示信息"); 提示框
没有返回值
confirm("确认信息"); 确认框
有返回值,点击确认则返回true,取消则为false
<script type="text/javascript">
var res =confirm("确认要删除?");
alert(res);
</script>
prompt("提示信息"); 输入框
有返回值,当点击确定时,返回值是输入框的文本,点击取消,则返回null
<script type="text/javascript">
var pro=prompt("请输入密码");
alert(pro);
</script>
open方法:
window.open("url地址");
<script type="text/javascript">
open("js02.html");
</script>
定时器:
setTimeout(函数,毫秒值); 在某个毫秒值之后执行这个函数
<script type="text/javascript">
setTimeout(
function(){
alert("xxx");
},3000);
</script>
clearTimeout(定时器的名称); 清除定时器
<script type="text/javascript">
var Timer;
var fn= function () {
alert("x");
Timer=setTimeout(fn,2000);
}
var close=function(){
clearTimeout(Timer);
}
fn();
</script>
<input type="button" value="button" οnclick="close()"/>
setInterval(函数,毫秒值);
clearInterval(定时器的名称);
<script type="text/javascript">
var Timer1=setInterval(function(){
alert("hello");
},2000);
var closer=function(){
clearInterval(Timer1);
}
</script>
eg:注册后五秒钟跳转首页
<script>
var time=5;
var Timer2
Timer2=setInterval(function (){
var second=document.getElementById("second");
if(time>=1){
second.innerHTML=time;
time--;
}else{
clearInterval(Timer2);
location.href="js02.html";
}
},1000
)
</script>
恭喜您注册成功, <span id="second" style="color: red;">5</span> 秒跳回首页,如果失败,请点击 <a href="js02.html"></a>
location
location.href="url地址";
history 历史对象
back(); forward(); go();
<a href="js03.html">后一页</a>
<input type="button" value="上一页" οnclick="history.back()"/>
<input type="button" value="下一页" οnclick="history.forward()"/>
<input type="button" value="上一页" οnclick="history.go(-1)"/>
<input type="button" value="下一页" οnclick="history.go(1)"/>
js的dom
文档对象模型:
html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
在dom树当中,一切皆为节点对象
dom的方法和属性
getElementById(); 返回对拥有指定 id 的第一个对象的引用。
var inputNode=document.getElementById("tid");
alert(inputNode.value);
getElementByName(); 返回带有指定名称的对象集合。
var inputNodes=document.getElementByName("tname");
alert(inputNodes.length);
for(var i=0;i<inputNodes.length;i++){
var inputNode=inputNodes[i];
alert(inputNode.value);
}
for(var i=0;i<inputNodes.length;i++){
var inputNode=inputNodes[i];
inputNode.οnchange=function(){
alert(this.value);
};
}
getElementsByTagName(); 返回带有指定标签名的对象集合。
var inputNodes=document.getElementsByTagName("input");
alert(inputNodes.length);
for(var i=0;i<inputNodes.length;i++){
var inputNode=inputNodes[i];
alert(inputNode.value);
}
for(var i=0;i<inputNodes.length;i++){
var inputNode=inputNodes[i];
if(inputNode.type=="text"){
alert(inputNode.value);
}
}
var optionNodes=document.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode=optionNodes[i];
alert(optionNode.value);
}
var edu=document.getElementById("edu");
var optionNodes=edu.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode=optionNodes[i];
alert(optionNode.value);
}
var btn=document.getElementById("btn");
btn.οnclick=function(){
var optionNodes=document.getElementsByTagName("option");
for(var i=0;i<optionNodes.length;i++){
var optionNode=optionNodes[i];
if(optionNode.selected){
alert(optionNode.value);
}
}
}
hasChildNodes(); 返回元素是否拥有子节点。
var edu=document.getElementById("edu");
alert(edu.hasChildNodes());
var tid_1=document.getElementById("tid_1");
alert(tid_1.hasChildNodes());
nodeName:一个字符串,其内容是给定节点的名字。返回节点的名称,依据其类型。
var name=node.nodeName;
如果节点是元素节点,nodeName返回这个元素的名称
如果是属性节点,nodeName返回这个属性的名称
如果是文本节点,nodeName返回一个内容为#text的字符串
是一个只读属性!!
nodeType:返回一个整数,这个数值代表着给定节点的类型
Node.ELEMENT_NODE ---1 --元素节点
Node.ATTRIBUTE_NODE ---2 --属性节点
Node.TEXT_NODE ---3 --文本节点
是一个只读属性!!
nodeValue:返回节点的当前值
如果节点是元素节点,返回值是null
如果是属性节点,返回值是属性的值
如果是文本节点,返回值是这个文本节点的内容
是一个读写属性!!
var node=document.getElementById("tid_1"); 元素节点
alert(node.nodeName);
alert(node.nodeType);
alert(node.nodeValue);
var node=document.getElementById("pid"); 文本节点
var textNode=node.firstChild;
alert(textNode.nodeName);
alert(textNode.nodeType);
alert(textNode.nodeValue);
var node=document.getElementById("pid"); 属性节点
var p=node.getAttributeNode("id");
alert(p.nodeName);
alert(p.nodeType);
alert(p.nodeValue);
eg:childNodes表示父元素下的所有的子元素(数组)
var h1=document.getElementById("h1");
var childs=h1.childNodes;
alert(childs[0].nodevalue);
replaceChild();把一个给定父元素里的一个子节点替换为另外一个子节点,相当于剪切
var bj=document.getElementById("bj");
var fk=document.getElementById("fk");
bj.οnclick=function(){
var parentNode=this.parentNode;
parentNode.replaceChild(fk,this);
};
getAttribute(); 查找属性值,返回一个给定元素的一个给定属性节点的值
var xj=document.getElementById("xj");
alert(xj.getAttribute("value"));
setAttribute(); 将给定元素节点添加一个新的属性值或改变它的现有属性的值 有两个参数
var xj=document.getElementById("xj");
xj.setAttribute("name","xingjizhengba");
alert(xj.getAttribute("name")); //验证是否能行
createElement(); 创建新元素节点 按照给定的标签名创建一个新的元素节点,只有一个参数,将被创建的元素的名字
createTextNode(); 创建新文本节点 创建一个包含着给定文本的新文本节点
appendChild(); 插入节点 为给定元素增加一个子节点
var li=document.createElement("li");
li.setAttribute("id","tj"); //添加属性
li.setAttribute("v","tianjin");
alert(li.getAttribute("id")); //验证是否能行
var txt=document.createTextNode("天津"); //添加文本
li.appendChild(txt);
var city=document.getElementById("city");
city.appendChild(li);
insertBefore(); 插入节点,把一个给定节点插入到一个给定元素节点的给点子节点前面
var li=document.createElement("li");
li.setAttribute("id","tj"); //添加属性
li.setAttribute("v","tianjin");
alert(li.getAttribute("id")); //验证是否能行
var txt=document.createTextNode("天津"); //添加文本
li.appendChild(txt);
var ul=document.getElementsByTagName("ul");
var cq=document.getElementById("cq");
ul[0].insertBefore(li,cq);
insertAfter(); 插入某个节点后面,dom不提供
var li=document.createElement("li");
li.setAttribute("id","tj"); //添加属性
li.setAttribute("v","tianjin");
alert(li.getAttribute("id")); //验证是否能行
var txt=document.createTextNode("天津"); //添加文本
li.appendChild(txt);
var ul=document.getElementsByTagName("ul");
var sh=document.getElementById("sh");
var cq=sh.nextSibling;
ul[0].insertBefore(li,cq);
removeChild(); 删除节点,从一个给定元素里删除一个子节点
var city=document.getElementById("city");
var bj=document.getElementById("bj");
city.removeChild(bj);
innerHTML;
var div=document.getElementById("subject"); 使用innerHTML读出id=subject中的文本内容
alert(div.innerHTML);
var div=document.getElementById("subject");
div.innerHTML="<h1>今天</h1>"; 将<h1>今天</h1>写到div的层中
innerText;
</body>
</html>