燕十八Javascript

查找DOM节点

DOM中查找节点的思路
由大到小找，个别情况也可能由子到父
由大到小:通过下面三个方法来进行大的定位
document.getElementById(); 根据id来查找节点，返回的是节点本身
document.getElementsByTagName(); 通过标签来查找返回数组
document.getElementsByName(); 通过name来查找返回数组

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>找DOM节点</title>
<Script type="text/javascript">

//因为ie浏览器只对表单name属性有效，所以为了兼容性 document.getElementsByName() 只用来查找表单
//ps: number ,string ,boolean ,object(null也是对象) undefined js里只有这写类型，数组也是对象
//如果还没有查到想要的结果，还可以根据前面已经找到的节点再次定位，继续查找
//childNodes/children

function t1(){
    alert(document.getElementById('artcicle'));
}
function t2(){
    alert(document.getElementsByTagName('div').length);
}
function t3(){
    //alert(document.getElementsByName('hobby'));
    var inp = document.getElementsByName('hobby');
    var len = inp.length;
    for(var i=0;len>i;i++){
        alert(inp[i]);
    }
}
</Script>
</head>
<body>
    <div id="artcicle"></div>
    <div></div>
    <div></div>
    <p>
        <input type="test" name="hobby"/>
        <input type="test" name="hobby"/>
        <input type="test" name="hobby"/>
    </p>
    <input type="button" value="ById" onclick="t1()" />
    <input type="button" value="ByTagName" onclick="t2()" />
    <input type="button" value="ByName" onclick="t3()" />
</body>
</html>

如果还没有查到想要的结果，还可以根据前面已经找到的节点再次定位，继续查找
1:查找子元素
childNodes/children[index]

2:查找父元素
node.parentNode--->查找父元素

下面4个受空白文本的影响，建议不用
2.5:frstChild ,lastChild
3.nextSibling ,previousSibing兄弟元素

4:如果查到的某个元素,仍然非常大,这时候
我们还可以利用getElementsByTagName来进一步筛选
注意,对于元素对象和docment对象相比
元素对象只能用getElementByTagName函授，其他两个不可以使用

ps所有元素都能用style.css来控制
所有元素都有一个属性或者叫子对象---style对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查找练习</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
#container {
    margin: 0 auto;
    width: 1002px;
}
#header {
    height: 128px;
    background: #F80004;
}
#aaaa {
    height: 256px;
}
#lside {
    height: 480px;
    width: 694px;
    margin: 0 auto;
    border: 1px solid #EEE;
    border-radius: 5px;
    border-top: none;
}
.four {
    width: 326px;
    height: 200px;
    background: #EEE;
    margin: 10px;
    float: left;
}
#footer {
    padding-top: 15px;
    height: 120px;
    width: 694px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="lside">
    <div class="four"></div>
    <div class="four"></div>
    <div class="four"></div>
    <div class="four"></div>
  </div>
</div>
<div id="footer"> 
  <script type="text/javascript">
    function t1(){
        var header = document.getElementById('header');
        //header.id = 'aaaa';//重新指定id样式
        header.style.height = '2000px';
        header.style.background = 'url(http://ruyic.com/blog/uploads/image/201602/pic1454919599341872.jpg)';
    }
    function t2(){
        var lside = document.getElementById('lside');//查父节点
        lside = lside.children;//父元素下的子节点
        //lside = lside.childNodes;//父元素下的子节点,空白也会算做节点
        alert(lside.length);
        for(var i=0 ,len = lside.length; len > i;i++ ){
            //alert(lside[i]);
        }
        lside[0].style.background='red';
        alert(lside[0]);
    }
  </script>
  <input type="button" value="findheader" onclick="t1();"/>
  <input type="button" value="ById-结合子元素" onclick="t2();"/>
</div>
</div>
</body>
</html>

073-DOM节点查找-2[00_09_06][20160223-081952-0].jpg

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据父子元素，兄弟元素的相对关系在定位</title>
</head>
<body>
    <div>第0个</div>
    <div>第1个
        <ul id="season">
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ul>
    </div>
    <div id="banner">
        第2个
        <p>p1</p>
        <p>p2</p>
        <span>span</span>
        <div>div</div>
    </div>
    <div>第3个</div>
<Script type="text/javascript">
function t1(){
    var uls = document.getElementById('season');
    alert(uls.parentNode);//找到父元素
    uls.parentNode.style.background='blue';
}
function t2(){
    var uls = document.getElementById('season');
    //uls.firstChild.style.background='red';//第一个节点是空格
    //uls.firstChild.nextSibling.style.background='red'；//空格后的下一个节点
    uls.children[0].style.background='pink';
}
function t3(){
    var banner = document.getElementById('banner');
    //banner.children[2].style.background='red';
    banner.getElementsByTagName('p')[1].style.background='red';;

}
</Script>
    <p>
        <input type="button" value="父元素" onclick="t1()" />
        <input type="button" value="第一个子元素" onclick="t2()" />
        <input type="button" value="元素中在根据标签查找" onclick="t3()" />
    </p>
</body>
</html>

总结
页面最大的是document文档对象
一般从大到小，先定位
定位后根据父子/兄弟关系详细定位

从document的角度出发，用下面三个方法来寻找：
1.document.getElementById()；
2.document.getElementsByTagName();
3.document.getElementsByName();//只能用在表单中
通过以上三个方式定位后,如果找到的节点已经比较小/具体
可以以这个节点为坐标
通过 children ,parentNode ,nextSibling ,previousSibing来定位子元素,父元素,下一个兄弟节点，上一个兄弟节点

如果通过以上三种方式定位，找到的节点依然非常大，子节点依然非常多
我们还可以继续利用getElementsByTagName()继续寻找
例：nodep.getElemensTag.Name('span');

增加节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>76增加节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*    
节点的增加
1.你要增加什么节点？
2.增加在那？
假设在body的container div里增加一个p标签
那就要先创造一个p节点，然后再把p节点放到div里去
创造元素节点
document.createElement();
创造文本节点
document.createTextNode();
给某元素插入一个子元素，并插在最后
节点.appendChild(追加子元素);
*/
function t1(){
    //在container里增加p节点，分2步
    //1：创建p节点
    //2：把p节点附加到contarner里
    //创建p节点
    var nodep = document.createElement('P');
    var cont = document.getElementById('container');
    cont.appendChild(nodep);
}
function t2(){
    var nodep = document.createElement('P');
    var art = document.createTextNode(Math.random());
    nodep.appendChild(art);
    
    var cont = document.getElementById('container');
    cont.appendChild(nodep);
}
</script>
<style type="text/css">
p{
    width: 100px;
    height: 100px;
    background:red;
}
div#container{
    background:#eeeeee;
}
#container p{
    background:pink;
}
</style>
</head>
    <body>
    <p></p>
    <div id="container">
        <p></p>
    </div>
    <input type="button" value="增加节点" onclick="t1();">
    <input type="button" value="增加节点加文字" onclick="t2();">
    </body>
</html>

在指定位置增加一个子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在指定位置增加一个子元素</title>
<script type="text/javascript">
    //insertBefore(nodeReferenceX,nodeReferenceY);
    function t1(){
        var zhong = document.createTextNode('中');//创建文本中
        var nodeli = document.createElement('li');
        nodeli.appendChild(zhong);
        var nodeul = document.getElementsByTagName('ul')[0];
        var xi = nodeul.children[2];
        nodeul.insertBefore(nodeli,xi);//第一个是待插入节点，第二个是定位用的坐标
    }
    //cloneNode(bool:copyChildrenToo);
    //克隆节点
    //oldNode.clonNode(false/true);//代表克隆节点，并同时克隆/不克隆子节点
    function t2(){
        var oldul = document.getElementsByTagName('ul')[0];
        var newul = oldul.cloneNode(true);
        var cart = document.getElementById('cart');
        cart.appendChild(newul);
    }
</script>
</head>
<body>
<ul>
    <li>东</li>
    <li>南</li>
    <li>西</li>
    <li>北</li>    
</ul>
<div id="cart">
</div>
<input type="button" value="把中插在西前边" onclick="t1()"/>
<input type="button" value="创造一个和ul相同的节点到div里" onclick="t2()"/>
</body>
</html>

删除、替换、innerHEML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除、替换节点</title>
<script type="text/javascript">
/*
删除节点：
当你某个节点nodeN为例,你是无法调用nodeN.xxx方法删掉
必须得站在其父节点的高度,通过removeChild才能删除.
语法:"父节点.removeChild(待删除的子节点);"
节点的替换：
先创建一个新节点准备，再找到要被替换的旧节点
然后到旧节点的父节点上去，站在父节点的高度上
父节点.replaceChlid(新节点,旧节点);
*/
function t1(){
    //思路：找到"中"的父元素
    //在中的父元素，调用removeChild()方法
    var nodeul = document.getElementsByTagName('ul')[0];
    var zhong = nodeul.children[2];
    nodeul.removeChild(zhong);
}
function t2(){
    //思路：找到"北"
    //创建一个"<li>上</li>"
    //再找到"北"的父元素
    //在中的父元素调用，父节点replaceChild(新节点,旧节点)
    var nodeul = document.getElementsByTagName('ul')[0];
    var bei = nodeul.children[4];
    var shang = document.createTextNode('上'); 
    var newli = document.createElement('li');
    newli.appendChild(shang);
    nodeul.replaceChild(newli,bei);
}
</script>
</head>
<body>
<ul>
    <li>东</li>
    <li>南</li>
    <li>中</li>
    <li>西</li>
    <li>北</li>    
</ul>
<div id="cart">
</div>
<input type="button" value="删除节点" onclick="t1()"/>
<input type="button" value="把北替换上" onclick="t2()"/>
</body>
</html>

innerHEML直接写入节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直接写入HTML</title>
<script type="text/javascript">
/*
直接写入html内容(不是w3c标准，但主流的浏览器支持，而且非常好用)
innerHTML 属性
节点的innerHTML属性是可读可写
读:是把某个节点内部的html代码读出来
如果赋值,则相当于把节点的html代码更新
*/
function t1(){
    var cont = document.getElementById('container');
    alert(cont.innerHTML);
}
function t2(){
    var cont = document.getElementById('container');
    var htmlcode = '<p>';
        htmlcode += '<ul>';
        htmlcode += '    <li>东</li>';
        htmlcode += '    <li>南</li>';
        htmlcode += '    <li>中</li>';
        htmlcode += '   <li>西</li>';
        htmlcode += '    <li>北</li>';
        htmlcode += '</ul>';
        htmlcode += '</p>';
    cont.innerHTML = htmlcode;
}
function t3(){
    var cont = document.getElementById('container');
    cont.innerHTML = "<img src='https://www.baidu.com/img/bd_logo1.png'/>";
}
</script>
</head>
<body>
<div id="container">
    <p>
        <ul>
            <li>好</li>
        </ul>
    </p>
</div>
<div id="cart">
</div>
<input type="button" value="内部的HTML代码" onclick="t1()"/>
<input type="button" value="修改内部的HTML代码" onclick="t2()"/>
<input type="button" value="加一个图片" onclick="t3()"/>
</body>
</html>

修改节点的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改节点的属性</title>
<script type="text/javascript">
/*
在节点中
一种是直接写在标签内部的属性 如 src ,alt ,tetle ,type ,name ,value ,checked

    注意：有一个例外
    控制元素的类名称的时候，不用obj.class而是用obj.className

还有一种是体现css里的属性
Syle各种css属性,如width ,height ,border ,fontSize

*/
function t1(){
    var email = document.getElementsByName('email')[0];
    alert(email.value);
}
function t2(){
    var email = document.getElementsByName('email')[0];
    if(email.value==''){
        email.value = '这里不能为空';
    }
}
function t3(){
    var email = document.getElementsByName('email')[0];
    email.type = 'radio';
}
</script>
</head>
<body>
<p>
    <img src="bai.gig" alt="abc" title="xxxx">
    <input type="text" value="内容" name="cont">
    <input type="charset" value="台球" checked="checked">
</p>
<p>
    例子:<br/>
    <input type="test" name="email" value="">
    <input type="button" value="邮件地址" onclick="t1();">
    <input type="button" value="检查邮件地址" onclick="t2();">
    <input type="button" value="变成radio" onclick="t3();">
</p>
</body>
</html>

DOM事件

DOM事件
DOM事件是指当前页面上发生某一件事时候,激发某一个函授,相当于"监听/触发设备"
比如:
元素被单击时 onclick
元素失去焦时 onblur
表单被提交时 onsubmit

DOM事件如何声明?
1:直接在元素标签中声明
<input type="text" noclick="fun();"/>
2:给事件属性附上一个函数变量
例:inputobj.onclick=fun;

主要的DOM事件
页面事件
onBlur              失去焦点时表单验证时常用
onFocus           获得焦点时
onLoad            页面加载时
onunload         当页面关闭时

鼠标事件
onClick              当点击时常用
onmouseover    当经过时常用
onmouseout     当离开时常用
onmousedown 当鼠标按下时
onmouseup       当鼠标抬起时
onmousemove 当鼠标移动时

键盘事件
onChange          当内容被改变时非常重要
onsSelect           当内容被选中时
onKeypress        当键盘点击时键盘某一个键
onkeydown      当键盘按下时
onkeyup             当键盘抬起时
onSubmit           当表单提交时非常重要
onReset              当表单重置时

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
<script type="text/javascript">
function t1(){
    var email = document.getElementsByName('email')[0];
    alert('失去焦点时');
}
function t2(){
    var email = document.getElementsByName('email')[0].value = '这里不能为空';
}
function t3(){
    alert('在唠一会');
    //return false;
}
function t4(){
    var baidu = document.getElementById('baidu');
    baidu.style.display = 'block';
}
function t5(){
    var baidu = document.getElementById('baidu');
    baidu.style.display = 'none';
}
function t6(){
    var sel = document.getElementsByName('xueli')[0];
    //alert(sel.value);
    if(sel.value=='' || sel.value=='初中'){
        alert('必须初中以上，不能不选');
    }
}
</script>
<style type="text/css">
#baidu{
    display: none;
}
</style>
</head>
<body onload="t2();">
                      
<a href="#" onmouseover="t4();" onmouseout="t5();">百度</a>
<p id="baidu"><img src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png" /></p>
<form>
<p>失去焦点：<input type="test" name="email" value="" onblur="t1()"></p>
<p>
<select name="xueli" onChange="t6();">
    <option value="">默认</option>
    <option value="大学">大学</option>
    <option value="初中">初中</option>
    <option value="高中">高中</option>
</select>
</p>
</form>
</body>
</html>

onsubmit比较特殊
在<form onsubmit = "return 函数名();">
这样函授return false时，才能阻拦住表单的提交行为

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function chk(){
    var email = document.getElementsByName('email')[0].value;
    if(email == ''){
        alert('email不能为空');
        return false;
    }
}    
</script>
</head>
<body>
<form onsubmit = "return chk();">
    <p><input type="test" name="email" value=""></p>
    <p><input type="submit" value="提交"/></p>
</form>
</body>
</html>

第二种DOM事件声明方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="email" value="">
<script type="text/javascript">
function t1(){
    var email = document.getElementsByName('email')[0].value='写入文字';
    alert('ok');
}
document.getElementsByName('email')[0].onblur = t1;
</script>
</body>
</html>

tag切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
</head>
<style type="text/css">
ul{
	width:300px;
	height:20px;
	line-height:20px;
}
ul li{
	width:75px;
	float:left;
	list-style:none;
}
p{
	width:300px;
	height:300px;
	float:left;
	border:1px solid rgba(216,216,216,1.00);
}
#news,#people,#tech{
	display:none;}
</style>
<script type="text/javascript">
function t1(pid){
	var ps=['mil' ,'news' ,'people' ,'tech'];

	for(var i=0,len=ps.length;i<len;i++){
		if(ps[i]==pid){
			document.getElementById(ps[i]).style.display = 'block';
		}else{
			document.getElementById(ps[i]).style.display = 'none';
		}
	}
}

</script>
<body>
<div>
    <ul>
        <li onMouseOver="t1('mil');">军事</li>
        <li onMouseOver="t1('news');">新闻</li>
        <li onMouseOver="t1('people');">人物</li>
        <li onMouseOver="t1('tech');">科技</li>
    </ul>
    <p id="mil">军事</p>
    <p id="news">新闻</p>
    <p id="people">人物</p>
    <p id="tech">科技</p>
</div>
</body>
</html>

相册效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相册效果</title>
<script type="text/javascript">
//点小图，改大图路径
//改大图路径--> 获取大图对象,改其src属性
//点某一个小图，如果确定把大图改成???
function chpi(num){
	var pics = ['' ,'winter' ,'blue' ,'sunset' ,'vater'];
	var bigpic = document.getElementsByTagName('p')[0].children[0];
	//alert('images/'+pics[num]+'.jpg');
	bigpic.src='images/'+pics[num]+'.jpg';
}
</script>
<style type="text/css">
ul li{
	list-style:none;
	float:left;}
</style>
</head>
<body>
<p><img src="images/winter.jpg" /></p>
<ul>
    <li><img src="images/01.jpg" onClick="chpi('1');"/></li>
    <li><img src="images/02.jpg" onClick="chpi('2');"/></li>
    <li><img src="images/03.jpg" onClick="chpi('3');"/></li>
    <li><img src="images/04.jpg" onClick="chpi('4');"/></li>
</ul>
</body>
</html>

字体大中小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体大中小</title>
</head>
<style type="text/css">
div{font-size:14px;margin-bottom:20px;}
</style>
<script type="text/javascript">
function chfont(num){
	document.getElementsByTagName('div')[0].style.fontSize=num+'px';
	//js中"fontSize"语法是这样写的与css中不同，前两天碰到margin-left 在js的语法marginLeft
}
</script>
<body>
<div>
窗前明月光<br/>
疑是地上霜<br/>
举头望明月<br/>
低头思故乡<br/>
</div>
<input type="button" value="小" onClick="chfont('12')"/>&nbsp;
<input type="button" value="中" onClick="chfont('16')"/>&nbsp;
<input type="button" value="大" onClick="chfont('20')"/>&nbsp;
</body>
</html>

表格隔行换色

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色</title>
<style type="text/css">
body{
	background: #f2f2f2;}
table{
	border-collapse: collapse;
	border:1px solid #ffffff;
}
</style>
<script type="text/javascript">
function chcolor(){
	var trs = document.getElementsByTagName('tr');
	
	for(var i=0,len=trs.length;i<len;i++){
		if(i%2==0){
			trs[i].style.background='#0171c5';
			trs[i].style.color='#ffffff';	
		}else{
			trs[i].style.background='#fff4b2';
		}
		//alert(i);
	}
	
}
</script>
</head>
<!-- 这里加chcolor页面加载后在触发 -->
<body onLoad="chcolor();">
<table width="200" border="1">
  <tbody>
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
        <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
  </tbody>
</table>

</body>
</html>

联动菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>联动菜单</title>
    <script type="text/javascript">
        var cha = [['长恨歌' ,'后宫词' ,'暮江吟'],['洞仙歌' ,'摸鱼儿' ,'水调歌头' ,'满江红']];

        function ld(){
            var sel = document.getElementById('prov').value;
            var opt = '';
            //alert(sel);

            if(sel == '-1'){
                document.getElementById('city').innerHTML = '<option value="-1">待选择</option>';
                return;
            }

            for(var i=0 ,len = cha[sel].length; i<len; i++){
                var opt = opt + '<option value="'+ i +'">'+ cha[sel][i] +'</option>';
                document.getElementById('city').innerHTML = opt;
            }
        }
    </script>
</head>
<body>
<select name="" id="prov" onchange="ld();">
    <option value="-1">请选择</option>
    <option value="0">唐诗三百</option>
    <option value="1">宋词</option>
</select>
<select name="" id="city"></select>
</body>
</html>

============= js 操作DOM 学习总结=============

节点创建

节点增加

节点删除

节点修改(替换)

创建节点：

元素节点例:<p></p>

文本节点例:我是文本

属性节点例:<img src="" />

创建元素节点:

document.createElement('标签名称');

创建文本节点:

document.createTextNode('文字内容');

节点的增加:

找到其父元素，调用"父元素.appendChild(新节点)"

如果想指定插入在父元素的某个子元素之前

找到父元素，找到定位用的子元素

调用父元素.insertBefore(新节点,定位节点)

节点的复制:

节点.cloneNode(true/false);//分别代表复制/不复制子节点

节点的替换

思路:有一个新节点，一个旧节点，还得找到旧节点的父节点

父节点.replaceChild(新节点, 旧节点);

============= js 操作节点的属性和css属性 =============

对于<input type="" name="" value=""/>

上面type ,name ,value这种直接写在节点内部的属性名，

js如何操作？

答：先找到该节点，然后"节点.属性名"

有一个例外:节点.class ==> 节点.className

对于 css属性

{

width:200px;

font-size:14px;

}

如何操作?

答：

找到节点

节点.style.css属性

css属性的命名规律：

如果css属性不含"-",则js中属性与css属性相同

如果css属性含有"-",则js中的相应属性为css属性去掉"-",并把"-"后的首字母大写

BOM学习

BOM浏览器对象模型

BOM ----> window

window.document

document对象其实是window对象的一个属性或子对象

window对象的子对象介绍

window.navigator //浏览器的相关信息

.appCodeName//内部代码

.appName//浏览器名称

.appVersion//浏览器版本

.platform//操作系统类型

.userAgent//用户代理信息

.cookieEnabled//是否支持cookie

window.history //历史记录，或者控制前进后退

.length;//历史记录的数目

.back()//后退back(-1)

.forward();//前进(1)

.go();//

window.screen//屏幕表示分辨率信息

.heigth

.width

.availHeight//可用高度

.availWidth//可用宽度

.colorDepth//颜色

window.document//BOD模型

window.location //地址栏，可以控制页面跳转

host//主机

port//端口

href//地址

pathname//路径

protocol//协议

search//查询字符串

assign(url)//页面跳转

window.document 为什么之前的学习中，直接写document??

答:因为window对象是最大的一个对象，所有对象都在其内部。

写document默认就是在最全局的window下面属性或子对象

window对话框

alert(message);//对话框

confirm(message);//确认框

prompt(message,默认值);//第一个提示信息，第二个默认值

close();

print();

confirm在连接中的一直用法，以前在网上搜的就一直这么用

history对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>history</title>
<script type="text/javascript">
//alert(window.navigator.userAgent);
function tui(){
	window.history.back(-1);
}
function qian(){
	window.forward(1);
}
function much(){
	alert(window.history.length);
}
</script>
</head>
<body>
<input type="button" value='有多少条' onClick="much();"/>
<input type="button" value='前进' onClick="qian();"/>
<input type="button" value='后退' onClick="tui();"/>
<input type="button" value='后退' onClick="tui();"/>
</body>
</html>

screen对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>screen</title>
<script type="text/javascript">
alert('屏幕分辨率是:'+window.screen.width + '*' + screen.height);
alert('有效可用分辨率是:'+ window.screen.availHeight + '*' +window.screen.availWidth);
</script>
</head>
<body>
</body>
</html>

locahost对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>locahost</title>
<script type="text/javascript">
//alert(window.location.href);
function qubaidu(){
window.location.href='http://baidu.com';
}
</script>
</head>
<body>
<input type="button" value="去百度" onClick="qubaidu();"/>
</body>
</html>

window对话框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window对话框</title>
<script type="text/javascript">
	function con(message){
		confirm('确定要删除吗');
	}
	function reg(){
		prompt('输入您的姓名','例：张三');
	}
</script>
</head>
<body>
<input type="button" value="确定框" onClick="con();">
<input type="button" value="请输入你的姓名" onClick="reg();">
<br/>
<br/>
comfirm在连接中的一直用法，以前在网上搜的就一直这么用
<a href=javascript:if(confirm("确实要删除吗?"))location="del.php?id=52">删除</a>
</body>
</html>

定时器

window定时器

setIntval(表达式,毫秒);

clearIntval(定时器对象);

setTimeout(表达式,毫秒);

clearTimeout(定时器对象);

定时器 setTimeout

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器 setTimeout</title>
</head>
<script type="text/javascript">
//window定时器
//window.setTimeout('事件',时间);
//是指:经过"时间"后执行"事件"一次
function t(){
alert('5秒到，快走');
window.location.href="http://baidu.com";
}
window.setTimeout("t()",5*1000);
</script>
<body>
</body>
</html>

定时器-每隔几秒自动执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器-每隔几秒自动执行</title>
<script type="text/javascript">
//没隔几秒执行一下setTimeout
function t(){
alert('两秒后重复弹出');
window.setTimeout("t()",2*1000);
}
t();
</script>
</head>
<body>
</body>
</html>

setInterval() 定时器-每隔几秒自动执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器-每隔几秒自动执行</title>
<script type="text/javascript">
//window.setInterval('事件','时间');
//是指，每隔指定时间，就执行一次事件
function t(){
alert('3秒后重复弹出');
}

var clock = window.setInterval("t();",3000);

//把window.setInterval()赋值给一个变量，
//在把这个变量用clearInterval清理掉
//同理用clearTimeout(定时器对象);清理setTimeout(表达式,毫秒);
function st(){
clearInterval(clock);
}

//在创建定时器的时候
//把创建结果赋给一个"定时器变量"
//比如:
//var clock = window.setInerval()
//在用：
//clearInterval(clock);
</script>
</head>
<body>
<input type="button" value="别烦人了" onclick="st();" />
</body>
</html>

定时器换图片

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器换美女</title>
    <script type="text/javascript">
    function bo(){
        document.getElementsByTagName('img')[0].src='http://ruyic.com/blog/uploads/image/201505/143071919486009.jpg';
    }
    setTimeout('bo()' ,3000);
    // 如果没有定时的秒数，代码要放在图片代码下面，不然会报错。
    </script>
</head>
<body>
<img src="http://ruyic.com/blog/uploads/image/201505/143071918233392.jpg" alt=""/>
</body>
</html>

倒计时效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定时器换美女-倒计时效果</title>
    <script type="text/javascript">
        function bo(){
            var inp = document.getElementsByName('time')[0];
            var time = parseInt(inp.value)-1;//parseInt转换为数值类型
            inp.value=time;//改写input的值

            if(time == 0){
                document.getElementsByTagName('img')[0].src='http://ruyic.com/blog/uploads/image/201505/143071919486009.jpg';
                clearInterval(clock);
            }
        }
        var clock = setInterval('bo()' ,1000);//每隔一秒执行一次
    </script>
</head>
<body>
<input type="button" name="time" value="5" /><br />
<img src="http://ruyic.com/blog/uploads/image/201505/143071918233392.jpg" alt=""/>
</body>
</html>