window对象:

事件的注册

注册事件的方式:

    方式一:直接在HTML元素上注册。

 <script    type="text/javascript">       
      function    read(){
                alert("body的元素被加载完毕");
        }
    </script>
    <body    onload="read()"></body>

    方式二:js代码找到对应的对象再注册。

 <body  id="body"></body>   
     <script    type="text/javascript">
          var    bodyNode=body.getElementById("body");
            bodyNode.onload=function(){
            alert("body的元素被加载完毕");
            }
        </script>

JavaScript常用的事件:

        鼠标点击相关:onclick、ondbclick、onmouseup、onmousedown

        鼠标移动相关:onmouseout、onmousemove、

        焦点相关:onblur、onfocus

        其他:onchange、onload、onsubmit、

<script    type="text/javascript">
    function clickTest(){
    alert("单击...");
}
 function clickTest(){
    alert("双击...");
}
 function showInfo(){
      var    timeSpan=document.getElementById("userName");
       timeSpan.innerHTML="用户名是由6位的英文与数字组成".fontcolor("green");
}
 function hideIfo(){
    var    timeSpan=document.getElementById("userName");       
    timeSpan.innerHTML="";
}
 </script>
<body>
    <input    type="button"     value="单击"/>
    <input    type="button"     ondbclick="dbClick()"    value="双击"/>
    用户名<intput    type="text"    onfocus="showInfo()"    onblur="hideInfo()"/><span    id="userName"></span>
</body>

location地址栏对象:href、reload()、

<script    type="text/javascript">
    function    showURL(){
        alert(location.href);
}
  function  downLoad(){
       location.href="http://www.baidu.com";
}
</script>
<body>
    <input    type="button"    onclick="showURL()"    value="显示地址栏"/>
    <span    onload="downLoad()">下载电影</span>
</body>

screen屏幕对象:只有属性,没有方法

    属性:availHeight、availWidth、height、width

<script    type="text/javascript">
    document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"</br>">);
    document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"</br>">);
    document.write("获取系统屏幕的垂直分辨率:"+screen.height+"</br>">);
    document.write("获取系统屏幕的水平分辨率:"+screen.width+"</br>">);
</script>
<body></body>

  


  DOM(Document    Object    Moduel文档对象模型)编程的入门

<html>
<head>
    <meta/>
    <tittle></tittle>
</head>
<body></body>
<script    type="text/javascript">
/*
    一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所以标签创建一个个对应的
    对象进行描述,我们在浏览器上看到的信息只不过是这些html对象的属性信息而已,我们只要能
    找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。

*/
var    allNodes=document.all;//获取html文件中的所有标签节点
for(var    i=0;i<allNodes.length;i++){
    alert(allNodes[i].nodeName);//获取标签的名字
}
</script>
</html>

wKioL1fwzQajClJpAABoDpK592Y038.png


根据html的标签属性找节点:

通过html元素的标签属性找节点:

    doucument.getElementById("html元素的id");

    doucument.getElementsByTagName("标签名");//返回一个数组

    doucument.getElementsByName("html的元素name");

<script type="text/javascript">
function showText(){
        var inputNode = document.getElementById("userName");  //根据ID属性值找元素
        inputNode.value = "设置好了文本";
    }
</script>
<body>    
<input type="text" id="userName" value="请输入用户名..." />
<input type="button" onclick="showText()" value="设置文本"/>
</body>
<script type="text/javascript">
function showImage(){
        var p_w_picpaths = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
        for(var i = 0 ; i<p_w_picpaths.length ; i++){
            p_w_picpaths[i].src = "33.jpg";
            p_w_picpaths[i].width="100";
            p_w_picpaths[i].height="100";
        }
    }
</script>
<body>    
<img src="" />
    <img src="" />
    <img src="" />
    <input type="button" onclick="showImage()" value="显示图片"/>
</body>
<script type="text/javascript">
function showDiv(){
        var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签,返回的是一个数组。
        for(var i = 0 ; i<divs.length ; i++){
            divs[i].innerHTML = "哈哈".fontcolor("red");    
        }
    }
</script>
<body>    
    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
     <input type="button" onclick="showDiv()" value="设置div内容"/>
</body>

根据属性找找标签的练习

<script type="text/javascript">
    function checkAll(){
        //找到所有的的选项
        var items = document.getElementsByName("item");
        //找到全选按钮的对象
        var allNode = document.getElementsByName("all")[0];
        for(var i = 0 ; i<items.length ; i++){
            items[i].checked =allNode.checked;
        }
    }  
</script>
<body>
    <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
        <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="all" onclick="checkAll()"  /> 全选<br />
</body>
<script type="text/javascript">
    function checkAll(allNode){
        //找到所有的的选项
        var items = document.getElementsByName("item");
        for(var i = 0 ; i<items.length ; i++){
            items[i].checked =allNode.checked;
        }
    }  
</script>
<body>
    <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
        <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
</body>
<script type="text/javascript">
    function checkAll(allNode){
        //找到所有的的选项
        var items = document.getElementsByName("item");
        for(var i = 0 ; i<items.length ; i++){
            items[i].checked =allNode.checked;
        }
    }  
    function getSum(){
        var items = document.getElementsByName("item");
        var sum = 0;
        for(var i = 0 ; i<items.length ; i++){
            if(items[i].checked){
                sum += parseInt(items[i].value);
            }    
        }    
        var spanNode = document.getElementById("sumid");
        spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");
    }
</script>
<body>
    <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
        <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
        <input type="button" value="总金额:" onclick="getSum()" /><span id="sumid"></span>
</body>

通过关系找找标签

通过关系(父子关系、兄弟关系)找标签。
        parentNode    获取当前元素的父节点。
        childNodes    获取当前元素的所有下一级子元素。
        firstChild    获取当前节点的第一个子节点。
        lastChild    获取当前节点的最后一个子节点。
------------------------------------------------------------    
        nextSibling        获取当前节点的下一个节点。(兄节点)
        previousSibling    获取当前节点的上一个节点。(弟节点)

<body>
<input    type="text"/><input    type="button"    value="注册">
</body>
<script    type="text/javascript">
    var    bodyNode=doucument.getElementsByTagName("body")[0];//通过标签名
    字找节点
    var    parentNode=bodyNode.parentNode;
    alert("父节点的名称:"+parentNode.nodeName);
</script>
/*
    我们可以通过标签类型进行判断筛选:
        文本节点的类型:3
        注释节点的类型:8
        标签节点的类型:1

*/
<input    type="text"/><input    type="button"    value="注册">
<script    type="text/javascript">
     var    bodyNode=doucument.getElementsByTagName("body")[0];//通过标签名
    字找节点
     var    children=bodyNode.childNodes;//获取所以的子节点,返回的是一个数组。
     注意:获取子节点的时候是包括了空文本或者是注释
            alert(children.length);
            alert("节点的名字:"+children[i].nodeName+"对象的类型:"+
            children[i].nodeType);
     
</script>

创建节点、插入节点

        涉及到几个方法:document.createElement("标签名");        创建新元素节点

                                        elt.setAttribute("属性名","属性值");        设置属性

                                         elt.appendChild(e);        添加元素到elt中最后位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    
</head>
<body>
 <input    type="text"/><input    onclick="add()"    type="button"    value="注册"/>
</body>
<script type="text/javascript">
     var    num=1;
     function    add(){
             var    inputNode=document.createElement("input");    //创建一个新节点
             //设置节点属性
             inputNode.setAttribute("type","button");
             inputNode.setAttribute("value","注册"+num);
             num++;

             var    bodyNode=document.getElementsByTagName("body")[0];
             bodyNode.appendChild(inputNode);
     }
</script>
</html>

练习:时间联动框 ,城市联动框的实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        function showCity() {
            //一个二维数组存储对应的城市
            var citys=[[],["广州","中山","湛江","汕头"],["长沙","吉首","岳阳","衡阳"],["南宁","北海","桂林"]];
            //获取省份对应的节点
            var  provinceNode=document.getElementById('province');
            //获取省份中被选中的选项
            var selectedIndex=provinceNode.selectedIndex;
            //获取对应的城市
            var     cityDates=citys[selectedIndex];
            var  cityNode=document.getElementById('city');

            //设置option的个数
            cityNode.options.length=1;
            for (var i = 0; i <cityDates.length; i++) {
                var option=document.createElement("option");
                option.innerHTML=cityDates[i];
                cityNode.appendChild(option);
            }
        }

    </script>
</head>
<body>
省份<select  id="province"    onchange="showCity()">
    <option>省份</option>
     <option>广东</option>
      <option>湖南</option>
       <option>广西</option>
</select>
城市<select name="城市" id="city">
     <option>城市</option>
</select>
   

</body>
</html>

操作css样式





未完待续