• JavaScript(DOM操作)(Window.document对象)


    一、找到元素:     

    docunment.getElementById("id");                      根据id找,最多找一个;     

    var a =docunment.getElementById("id");             将找到的元素放在变量中;     

    docunment.getElementsByName("name");          根据name找,找出来的是数组;     

    docunment.getElementsByTagName("name");     根据标签名找,找出来的是数组;     

    docunment.getElementsByClassName("name")     根据classname找,找出来的是数组;

    二、操作内容:

     1. 非表单元素:

    1)获取内容:

    alert(a.innerHTML);          标签里的html代码和文字都获取了,标签里面的所有内容。

    alert(a.innerText);            只取里面的文字     

    alert(a.outerHTML);          包括标签本身的内容(简单了解)

    2)设置内容:

    a.innerHTML = "<font color=red >hello world </font>";

    a.innerText会将赋的东西原样呈现

    清空内容:赋值个空字符串

    2. 表单元素:

    1)获取内容,有两种获取方式:

    var t = document.f1.t1;                              form表单ID为f1里面的ID为t1的input;     

    var t = document.getElementById("id");      直接用ID获取。

    alert(t.value);                                            获取input中的value值;    

     alert(t.innerHTML);                                   获取<textarea> 这里的值 </textarea>;

    2)设置内容: t.value="内容改变";

    3. 一个小知识点:

    <a href="http://www.baidu.com" onclick ="return false">转向百度</a> ;

    加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。

    三、操作属性

    首先利用元素的ID找到该元素,存于一个变量中:

    var a = document.getElementById("id");

    然后可以对该元素的属性进行操作:

    a.setAttribute("属性名","属性值");    设置一个属性,添加或更改都可以;

    a.getAttribute("属性名");              获取属性的值;

    a.removeAttribute("属性名");        移除一个属性。

    四、操作样式

    首先利用元素的ID找到该元素,存于一个变量中:

    var a = document.getElementById("id");

    然后可以对该元素的属性进行操作:

    a.style="" ;操作此ID样式的属性。

    样式为CSS中的样式,所有的样式都可以用代码进行操作。

    document.body.style.backgroundColor="颜色"; 整个窗口的背景色。

    操作样式的class:a.className="样式表中的classname" 操作一批样式

    例:展示图片的自动和手动切换;

    若要让图片轮播有过渡效果 则在放置大图的div标签里建立一个表格存放图片,用js控制表格的marginleft属性从而实现(手风琴

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *
    {
        margin:0px;
        padding:0px;}
    body
    {
        min-900px;}
    #datu
    {
        800px;
        height:500px;
        position:relative;
        margin:30px auto;
        overflow:hidden;}
    .datu
    {
        1200px;
        height:500px;
        position:relative;
        margin:30px auto;
        overflow:hidden;}
    #ta
    {
        margin-left:0px;
        transition:0.7s;}
    .lr
    {
        position:absolute;
        top:230px;
        32px;
        height:32px;
        z-index:99;}
    #left
    {
        left:10px;
        }
    #right
    {
        right:10px;
    }
    .suolue
    {
        height:60px;
        450px;
        position:relative;
        margin:auto;
        line-height:60px;}
    .suolue1
    {
        height:50px;
        80px;
        float:left;
        border: 4px solid #666;
        background-size:contain;
        background-position:center;}
    .u1
    {
        list-style-type:none;}
    .u1 li
    {
        float:left;
        margin-left:2px;}
    .u2
    {
        list-style-type:none;}
    .u2 li
    {
        float:left;}
    .fengqin
    {
        height:500px;
        100px;
        background-repeat:no-repeat;
        background-position:center;
        transition:0.7s;}
    </style>
    </head>
    
    <body>
    <div id="datu" onmouseover="pause()" onmouseout="conti()">
        <table id="ta" cellpadding="0" cellspacing="0">
            <tr height="500">
                <td width="800"><img src="Images/1.jpg" /></td>
                <td width="800"><img src="Images/2.jpg" /></td>
                <td width="800"><img src="Images/3.jpg" /></td>
                <td width="800"><img src="Images/4.jpg" /></td>
                <td width="800"><img src="Images/5.jpg" /></td>
            </tr>
        </table>
        <div class="lr" id="left" onclick="dong(-1)">
            <img src="Images/left.png" />
        </div>
        <div class="lr" id="right" onclick="dong(1)">
            <img src="Images/right.png" />
        </div>
    </div>
    <div class="suolue">
        <ul class="u1">
            <li><div class="suolue1" style="background-image:url(Images/1.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li>
            <li><div class="suolue1" style="background-image:url(Images/2.jpg)" id="tu2" onclick="xiaotu(2)"></div></li>
            <li><div class="suolue1" style="background-image:url(Images/3.jpg)" id="tu3" onclick="xiaotu(3)"></div></li>
            <li><div class="suolue1" style="background-image:url(Images/4.jpg)" id="tu4" onclick="xiaotu(4)"></div></li>
            <li><div class="suolue1" style="background-image:url(Images/5.jpg)" id="tu5" onclick="xiaotu(5)"></div></li>
        </ul>
    </div>
    <div class="datu" onmouseover="stp()" onmouseout="goon()">
        <ul class="u2">
            <li><div class="fengqin" id="l1" onmouseover="fq(1)" style="800px; background-image:url(Images/1.jpg)"></div></li>
            <li><div class="fengqin" id="l2" onmouseover="fq(2)" style="background-image:url(Images/2.jpg)"></div></li>
            <li><div class="fengqin" id="l3" onmouseover="fq(3)" style="background-image:url(Images/3.jpg)"></div></li>
            <li><div class="fengqin" id="l4" onmouseover="fq(4)" style="background-image:url(Images/4.jpg)"></div></li>
            <li><div class="fengqin" id="l5" onmouseover="fq(5)" style="background-image:url(Images/5.jpg)"></div></li>
        </ul>
    </div>
    </body>
    </html>
    <script>
    document.getElementById("ta").style.marginLeft="0px";
    var biao=1;
    function huan()
    {
        var tu =document.getElementById("ta");
        var a=parseInt(tu.style.marginLeft);    
        if(a<=-3200)
        {
            tu.style.marginLeft="0px";
        }
        else
        {
            tu.style.marginLeft= (a-800)+"px";    
        }
        document.getElementById("tu1").style.borderColor="#666";
        document.getElementById("tu2").style.borderColor="#666";
        document.getElementById("tu3").style.borderColor="#666";
        document.getElementById("tu4").style.borderColor="#666";
        document.getElementById("tu5").style.borderColor="#666";
        var b = parseInt(document.getElementById("ta").style.marginLeft);
        if(b==0)
        {
            document.getElementById("tu1").style.borderColor="red";
        }
        else if(b==-800)
        {
            document.getElementById("tu2").style.borderColor="red";
        }
        else if(b==-1600)
        {
            document.getElementById("tu3").style.borderColor="red";
        }
        else if(b==-2400)
        {
            document.getElementById("tu4").style.borderColor="red";
        }
        else
        {
            document.getElementById("tu5").style.borderColor="red";
        }
        shi =window.setTimeout("huan()",3000);    
    }
    var shi =window.setTimeout("huan()",3000);
    
    function pause()
    {
        window.clearTimeout(shi);    
    }
    
    function conti()
    {
        shi = window.setTimeout("huan()",3000);    
    }
    
    function dong(ad)
    {
        var tu =document.getElementById("ta");
        var a=parseInt(tu.style.marginLeft);
        if(ad==-1)
        {
            if(a==0)
            {
                tu.style.marginLeft=-3200+"px";    
            }
            else
            {
                tu.style.marginLeft= (a+800)+"px";    
            }    
        }
        else
        {
            if(a==-3200)
            {
                tu.style.marginLeft=0+"px";    
            }
            else
            {
                tu.style.marginLeft= (a-800)+"px";    
            }        
        }
        document.getElementById("tu1").style.borderColor="#666";
        document.getElementById("tu2").style.borderColor="#666";
        document.getElementById("tu3").style.borderColor="#666";
        document.getElementById("tu4").style.borderColor="#666";
        document.getElementById("tu5").style.borderColor="#666";
        var b = parseInt(document.getElementById("ta").style.marginLeft);
        if(b==0)
        {
            document.getElementById("tu1").style.borderColor="red";
        }
        else if(b==-800)
        {
            document.getElementById("tu2").style.borderColor="red";
        }
        else if(b==-1600)
        {
            document.getElementById("tu3").style.borderColor="red";
        }
        else if(b==-2400)
        {
            document.getElementById("tu4").style.borderColor="red";
        }
        else
        {
            document.getElementById("tu5").style.borderColor="red";
        }
    }
    function xiaotu(x)
    {
        document.getElementById("tu1").style.borderColor="#666";
        document.getElementById("tu2").style.borderColor="#666";
        document.getElementById("tu3").style.borderColor="#666";
        document.getElementById("tu4").style.borderColor="#666";
        document.getElementById("tu5").style.borderColor="#666";
        if(x==1)
        {
            document.getElementById("ta").style.marginLeft="0px";
            document.getElementById("tu1").style.borderColor="red";
        }
        else if(x==2)
        {
            document.getElementById("ta").style.marginLeft="-800px";
            document.getElementById("tu2").style.borderColor="red";
        }
        else if(x==3)
        {
            document.getElementById("ta").style.marginLeft="-1600px";
            document.getElementById("tu3").style.borderColor="red";
        }
        else if(x==4)
        {
            document.getElementById("ta").style.marginLeft="-2400px";
            document.getElementById("tu4").style.borderColor="red";
        }
        else
        {
            document.getElementById("ta").style.marginLeft="-3200px";
            document.getElementById("tu5").style.borderColor="red";
        }
    }
    function fengqin()
    {
        var li1 =parseInt(document.getElementById("l1").style.width);
        var li2 =parseInt(document.getElementById("l2").style.width);
        var li3 =parseInt(document.getElementById("l3").style.width);
        var li4 =parseInt(document.getElementById("l4").style.width);
        var li5 =parseInt(document.getElementById("l5").style.width);    
        document.getElementById("l1").style.width="100px";
        document.getElementById("l2").style.width="100px";
        document.getElementById("l3").style.width="100px";
        document.getElementById("l4").style.width="100px";
        document.getElementById("l5").style.width="100px";
        if(li1==800)
        {
            document.getElementById("l2").style.width="800px";
        }
        else if(li2==800)
        {
            document.getElementById("l3").style.width="800px";
        }
        else if(li3==800)
        {
            document.getElementById("l4").style.width="800px";
        }
        else if(li4==800)
        {
            document.getElementById("l5").style.width="800px";
        }
        else
        {
            document.getElementById("l1").style.width="800px";
        }
        change=window.setTimeout("fengqin()",3000);
    }
    function fq(c)
    {
            document.getElementById("l1").style.width="100px";
            document.getElementById("l2").style.width="100px";
            document.getElementById("l3").style.width="100px";
            document.getElementById("l4").style.width="100px";
            document.getElementById("l5").style.width="100px";
        if(c==1)
        {
            document.getElementById("l1").style.width="800px";
        }
        else if(c==2)
        {
            document.getElementById("l2").style.width="800px";
        }
        else if(c==3)
        {
            document.getElementById("l3").style.width="800px";
        }
        else if(c==4)
        {
            document.getElementById("l4").style.width="800px";
        }
        else if(c==5)
        {
            document.getElementById("l5").style.width="800px";
        }
    }
    var change=window.setTimeout("fengqin()",3000);
    function stp()
    {
        window.clearTimeout(change);    
    }
    function goon()
    {
        change=window.setTimeout("fengqin()",3000);
    }
    
    </script>

  • 相关阅读:
    SecureRandom
    《Head First 设计模式》[02] 观察者模式
    《MySQL必知必会》[07] 管理事务处理
    《MySQL必知必会》[06] 触发器
    《MySQL必知必会》[05] 存储过程和游标
    Centos7安装Nginx
    IDEA配置Tomcat
    Java小功能大杂烩
    Java处理中文乱码问题
    Java邮件发送
  • 原文地址:https://www.cnblogs.com/jiuban2391/p/6036223.html
Copyright © 2020-2023  润新知