码迷,mamicode.com
首页 > Web开发 > 详细

js:DOM和响应事件(一)

时间:2017-12-15 23:34:04      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:opacity   doctype   splice   子节点   overflow   tle   char   内部函数   html元素   

一,本例主要包括的使用getElementById  返回对拥有指定id的第一个对象引用,createElement 创建一个属性节点,getElementsByTagName  返回带有指定标签名的集合对象和onmouseover 用户在一个HTML元素上移动鼠标,onmouseout 用户从一个HTML元素上移开鼠标还有window中的一些方法

<!DOCTYPE html>
<html>
        <head lang="en">
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin:0px;
                    padding:0px
                }
                .box{
                    background-color: burlywood;
                }
                .content td{
                    width: 50px;
                    height: 50px;
                    background-color: gray;

                }
                table td{
                    text-align: center;
                    overflow:hidden;
                }
                .setWidth{
                    /*通过3秒渐变赋值*/
                    transition: all 3s;
                }
                /*旋转360度*/
                @keyframes myfirst{
                    to{
                       transform: rotate(0deg);
                    }
                    from{
                        transform: rotate(360deg);
                    }
                }
                /*从实体逐渐变透明*/
                @keyframes myfirst2{
                    to{
                        filter:alpha(Opacity=10);
                        opacity: 0.1;
                    }
                    from{
                        filter:alpha(Opacity=80);
                        opacity: 1;
                    }
                }

                .over-out2{
                    animation: myfirst2 2s;
                }

                .over-out{
                    animation: myfirst 1s;
                }
                .remove-sty{

                    filter:alpha(Opacity=80);
                    opacity: 1;
                }
            </style>
             <!-- js是解析性语言,因此网页中的元素必须加载过后才可以访问-->
            <script language="JavaScript">
                 function $(oId){
                     //通过oId寻找该节点
                     var obj=document.getElementById(oId);
                     return obj;
                 }
                 function addClass(obj, cn){
                    var   cNames=obj.className;
                         if(cNames.length==0){
                              obj.className = cn;
                         }else{
                              obj.className +=(" "+cn);
                         }
                 }
                 //字符串有一个split方法,用于拆分字符串
                 function removeClass(obj,cn){
                      var cs=obj.className;
                          //使用split方法拆分cs字符串,赋值到cs数组
                          cs =cs.split(" ");
                        for(var i=0;i<cs.length;i++){
                            if(cs[i]==cn){
                                //删除从i开始的一个字符,
                                cs.splice(i,1);
                            }
                        }
                     //重新把数组cs转换成字符串,然后赋值给obj.ClassName完成删除
                        obj.className=cs.join(" ");
                 }

                 function removeNode(obj){
                     //window提示消息
                     var f = window.confirm(‘是否删除图片‘);
                     if(f){
                         addClass(obj,"over-out2");
                         //setTimeout延迟2秒调用内部函数
                         setTimeout(function(){
                             //通过寻找该节点的父节点来删除该节点
                             obj.parentNode.removeChild(obj);
                         },2000);
                     }else{
                         alert("取消删除");
                     }
                 }

                 function initImgs(){
                        var imgs = new Array();
                       //寻找当前页面的第二个自节点
                       // var oBody=document.documentElement.lastChild ||  document.body;
                        imgs.push("n1.jpg");imgs.push("n2.jpg");imgs.push("n3.jpg");imgs.push("n4.jpg");
                        imgs.push("n5.jpg");
                        for(var i=0;i<imgs.length;i++){
                            //200px
                            //createElement添加img节点
                            var imgObj=document.createElement("img");
                            var imgSrc = imgs[i];
                            imgObj.src = imgSrc;
                            //调用addClass方法为节点添加class属性
                            addClass(imgObj,"setWidth");
                            addClass(imgObj,"remove-sty");
                            //为节点添加属性
                            imgObj.style.width = "0px";
                            imgObj.style.marginLeft = "0px";
                            //通过$方法确认imgObj节点位置
                            $("imgsId").appendChild(imgObj);
                            imgObj.onclick=function(){
                                //单击事件:通过window.event方法来确认被点击的节点
                                var ss=window.event;
                                var obj=ss.currentTarget;
                                removeNode(obj);
                            }
                        }
                }

                 window.onload = function(){
                     initImgs();
                 }
                 function createImgs(){
                     //寻找imgsId下是img的子节点
                    var imgs=$("imgsId").getElementsByTagName("img");
                    for(var i=0;i<imgs.length;i++){
                        var imgObj=imgs[i];
                        imgObj.style.width = "200px";
                        imgObj.style.marginLeft = "20px";
                        //鼠标指向元素事件:通过方法为节点添加over-out属性达到旋转目的
                        imgObj.onmouseover = function(){
                            addClass(this,"over-out");
                        }
                        //鼠标离开事件:通过方法删除over-out属性
                        imgObj.onmouseout = function(){
                            removeClass(this,"over-out");
                        }

                    }
                }


            </script>
        </head>
        <body>
               <button onclick="createImgs()">点击创建图片</button>

              <!-- imgObj.parentNode.removeChild(imgObj);-->
               <div id="imgsId">


               </div>




        </body>
</html>

<!--
 window.onload = function(){
    $("abc").onmouseover = function(){
        this.style.color = "red";
        this.style.fontSize = "30px";
    };
    $("abc").onmouseout = function(){
        this.style.color = "black";
        this.style.fontSize = "15px";
    }
function test(){
    var ev=window.event;   //任何事件发生的时候都会有一个window.event对象,它表示的是当前事件对象。
    var obj= ev.currentTarget;
    alert(obj.innerText);
}-->

 

js:DOM和响应事件(一)

标签:opacity   doctype   splice   子节点   overflow   tle   char   内部函数   html元素   

原文地址:http://www.cnblogs.com/dybe/p/8045021.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!