• DOM


    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

      

    一,查找元素:

    1,直接查找

    document.getElementById             根据ID获取一个标签document.getElementsByName          根据name属性获取标签集合document.getElementsByClassName     根据class属性获取标签集document.getElementsByTagName       根据标签名获取标签集合

            <div class="c1">哈哈</div>
            
            <div id="l">嘿嘿</div>
            
            <input type="text" name="xin"/>
            
            <p>哈哈</p>
    
    
            <script>
            var ww = document.getElementsByClassName('c1');
    
            var xx = document.getElementById('l');
    
            var cc = document.getElementsByName("xin");
    
            var dd = document.getElementsByTagName("p");
    
            </script>
    直接查找
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        </style>
    </head>
    <body>
    
        <div>
            <div id="num">1</div>
            <input type="button" value="+1" onclick="add()"/>
        </div>
    
        <div>
            <div id="n1">哈哈</div>
            <a>笑什么</a>
        </div>
        <ul>
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
        <div>
            <div class="c1">1</div>
            <div class="c1">2</div>
            <div class="c1">3</div>
        </div>
        <form>
            <p>用户名:<input name="user" value="123"/></p>
            <p>  密码:<input name="pwd" value="456"/></p>
        </form>
    
        <script type="text/javascript">
            function add(){
    //            alert(123);      弹窗
                var nid = document.getElementById("num");
                var text = nid.innerText;
                text = parseInt(text);
                text += 1;
                nid.innerText =text;
            }
    
    
            var n1 = document.getElementById('n1');
            n1.innerText="凯欣";          修改制定的字符串
    
    ///////////
            var lis = document.getElementsByTagName("li");
            for(var i in lis){
                var item = lis[i];
                item.innerText = i;    
            }
    
    ///////////
            var lis2 = document.getElementsByClassName("c1");
            for (var i in lis2){
                var item = lis2[i];
                item.innerText = i;
            }
    ////////////
              var user = document.getElementsByName("user")[0];
              var pwd = document.getElementsByName("pwd")[0];
              console.log(user.value,pwd.value);
        </script>
    </body>
    </html>
    实例

    2,间接查找

    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
     
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
                123
                <div class="c1">儿子</div>
                <div class="c1" id="i1">
                    <p>孙子</p>
                    <div name="n1">
                        <span>二孙子</span>
                    </div>
                    <div name="n1">三孙子</div>
                </div>
                <div class="c1">二儿子</div>
        </div>
        <script>
            var il = document.getElementById("i1");
            var pl_text = il.parentNode;
            var pl = il.parentElement;
             var eles_node = pl_text.childNodes;
            for (var j=0;j<eles_node.length;j++){
                var current_node = eles_node[j];
                if (current_node.nodeType==1){
                    console.log(eles_node[j])
                }
            }
            var eles = pl.children;
            for(var i=0;i<eles.length;i++){
                console.log(eles[i]);
            }
        </script>
    </body>
    </html>
    View Code

    二 操作:

    1,内容:

    innerText   获取文本
     
    outerText
     
    innerHTML   获取标签、文本信息
      
    value       值
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="http://www.etiantian.org">老栓子<span>999</span></a>
        <input id="txt" type="text"/>
        <select>
            <option value="1">山西</option>
            <option value="2">北京</option>
        </select>
        <script>
            var obj = document.getElementsByTagName("a")[0];
    //        alert(obj.innerText);       获取文本
    //        alert(obj.innerHTML)      获取标签、文本信息
            var val = document.getElementById("txt").value;  获取值
            console.log(val);
            obj.innerText = "123";
            obj.innerHTML = "<p>123</p>";
        </script>
    </body>
    </html>
    实例表单取值

    2,属性:

    attributes                // 获取所有标签属性
    setAttribute(key,value)   // 设置标签属性
    getAttribute(key)         // 获取指定标签属性
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <input type="button" value="全选" onclick="cheakall();"/>
            <input type="button" value="取消" onclick="cancleall();">
            <input type="button" value="反选" onclick="reverseall();">
        </div>
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>年龄</th>
            </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input class="c1" type="checkbox"/></td>
                    <td>开心</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td><input class="c1" type="checkbox"/></td>
                    <td>黑蛋</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td><input class="c1" type="checkbox"/></td>
                    <td>狗剩</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
        <script>
            function  cheakall(){
                var tb = document.getElementById('tb');
                var checks = tb.getElementsByClassName("c1");
                for (var i=0;i<checks.length;i++){
                    var current_check = checks[i];
                    current_check.checked = true;
                }
            }
            function  cancleall(){
                var tb = document.getElementById('tb');
                var checks = tb.getElementsByClassName("c1");
                for (var i=0;i<checks.length;i++){
                    var current_check = checks[i];
                    current_check.checked = false;
                }
            }
            function  reverseall(){
                var tb = document.getElementById('tb');
                var checks = tb.getElementsByClassName("c1");
                for (var i=0;i<checks.length;i++){
                    var current_check = checks[i];
                    if(current_check.checked){
                        current_check.checked = false;
                    }else {
                        current_check.checked=true;
                    }
                }
            }
        </script>
    </body>
    </html>
    实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title id="2">Title</title>
    </head>
    <body>
    
    <div>
        <h2>ok</h2>
        <form action="#" id="1" class="form1" name="form1">
            <input id =5 type="text">
            <input type="text">
            <p>男:<input id=3 type="checkbox" name="" value="nan"></p>
            <input type="submit">
        </form>
        <h1 id="h1">hao</h1>
        <input type="datetime-local">
    </div>
    <script>
         var names = document.getElementById('5');  //得到一个普通对象
         names.id = 'newid'; //修改设置新标签属性ID
         names.className = "form";  //设置或修改标签css
         names.style.fontSize = '20px'; //设置标签样式
         names.setAttribute('txt','mydefine');  //添加新属性
         names.setAttribute('txt','mydefine');  //添加新属性,存在则忽略不报错
         names.removeAttribute('txt'); //移除属性
         names = names.getAttribute('id');  //获取属性值
        console.log(names);
    </script>
    
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            ul li{
                float: left;
                background-color: #2459a2;
                color: white;
                padding: 8px 10px;
            }
            .clearfix:after{
                display: block;
                content: '.';
                height: 0;
                visibility: hidden;
                clear: both;
            }
            .hide{
                display: none;
            }
            .tab-menu .title{
                background-color: #dddddd;
            }
            .tab-menu .title .active{
                background-color: white;
                color: black;
            }
            .tab-menu .content{
                border: 1px solid #dddddd;
                min-height: 150px;
            }
        </style>
    
    </head>
    <body>
        <div style=" 400px;margin: 0 auto">
            <div class="tab-menu">
                <div class="title clearfix">
                    <ul>
                        <li target="h1" class="active" onclick="Shou(this);">价格趋势</li>
                        <li target="h2" onclick="Shou(this);">市场分布</li>
                        <li target="h3" onclick="Shou(this);">其他</li>
                    </ul>
                </div>
                <div id="content"class="content">
                    <div con="h1">content1</div>
                    <div con="h2" class="hide">content2</div>
                    <div con="h3" class="hide">content3</div>
                </div>
            </div>
        </div>
        <script>
            function Shou(thr){
                var target = thr.getAttribute("target");
                thr.className="active";
                var brother=thr.parentElement.children;
                for (var i=0;i<brother.length;i++){
                    if(thr ==brother[i]){
    
                    }else {
                        brother[i].removeAttribute('class');
                    }
                }
                var contents =document.getElementById('content').children;
                for(var j=0;j<contents.length;j++){
                    var courent_content = contents[j];
                    var con =courent_content.getAttribute('con');
                    if  (con==target){
                        courent_content.classList.remove("hide");
                    }else {
                        courent_content.className='hide';
                    }
                }
            }
    
        </script>
    </body>
    </html>
    隐藏菜单

    3,class 操作:

    className                // 获取所有类名   以字符串的形式
    classList.remove(cls)    // 删除指定类   以列表的形式
    classList.add(cls)       // 添加类
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .c1{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.5);
                z-index: 2;
            }
            .c2{
                position: fixed;
                 400px;
                height: 300px;
                background: white;
                top: 50%;
                left: 50%;
                z-index: 3;
                margin-top: -150px;
                margin-left: -200px;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="button"value="点我"onclick="Shou()"/>
            <input type="button"value="点我"onclick="Shou()"/>
        </div>
        <div id="shade" class="c1 hide"></div>
        <div id="modal" class="c2 hide">
            <p>用户:<input type="text"/></p>
            <p>密码:<input type="password"></p>
            <p>
                <input type="button" value="确定" onclick="Hide();">
                <input type="button" value="取消" onclick="Hide();">
            </p>
        </div>
    
        <script>
            function Shou(){
                document.getElementById('shade').classList.remove("hide");
                 document.getElementById('modal').classList.remove("hide");
            }
            function Hide(){
                document.getElementById('shade').classList.add("hide");
                document.getElementById('modal').classList.add("hide");
            }
        </script>
    </body>
    </html>
    模态对话框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                padding: 0;
                margin: 0;
            }
            .hide{
                display: none;
            }
            .menu{
                 200px;
                height: 500px;
                background-color: #2459a2;
                border: 2px solid #333;
            }
            .menu .title{
                background-color: brown;
                cursor: pointer;
            }
            .menu .content{
                background-color: white;
            }
        </style>
    </head>
    <body>
    
        <div class="menu">
            <div class="item">
                <div class="title" onclick="Show(this);">菜单一</div>
                <div class="content">
                    <ul>
                        <li>内容1</li>
                        <li>内容1</li>
                        <li>内容1</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <!--arg.下一个标签nex-->
                <div class="title" onclick="Show(this);">菜单二</div>
                <div class="content hide">
                    <ul>
                        <li>内容2</li>
                        <li>内容2</li>
                        <li>内容2</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单三</div>
                <div class="content hide">
                    <ul>
                        <li>内容3</li>
                        <li>内容3</li>
                        <li>内容3</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单四</div>
                <div class="content hide">
                    <ul>
                        <li>内容4</li>
                        <li>内容4</li>
                        <li>内容4</li>
                    </ul>
                </div>
            </div>
        </div>
    
        <script>
            function Show(arg){
                arg.nextElementSibling.classList.remove('hide');
                var father = arg.parentElement;
                var sons = father.parentElement.children;
                for(var i= 0;i<sons.length;i++){
                    var current_ele = sons[i];
                    if(current_ele == father){
    
                    }else {
                        current_ele.children[1].classList.add('hide');
                    }
                }
            }
    
        </script>
    </body>
    </html>
    折叠菜单

     4:标签操作:

                var tag = document.createElement('li');    创建标签
                tag.innerText= val;
                var temp = document.createElement('a');    创建标签
                temp.innerText="百度";
                temp.href = "http://etiantian.org";
                tag.appendChild(temp);

    操作标签:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <input type="text"/>
            <input type="button"value="添加" onclick="Shou(this);"/>
        </div>
        <div>
            <ul id="conmmentlist">
                <li>凯欣</li>
                <li>大龙</li>
                <li>大虎</li>
            </ul>
        </div>
        <script>
            function Shou(the){
                var val = the.previousElementSibling.value;
                // 获取输入的值
                the.propertyIsEnumerable.value="";
                var conmmentlist=document.getElementById("conmmentlist");
                // 第一种方式 创建字符串
                var str = "<li>" + val +"</li>";
    //            beforeBegin, 外部上边
    //            afterBegin, 内部必填神
    //            beforeEnd, 内部最后
    //            afterEnd   外部贴墙
                conmmentlist.insertAdjacentHTML("beforeEnd",str);
        </script>
    </body>
    </html>
    View Code

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <input type="text"/>
            <input type="button"value="添加" onclick="Shou(this);"/>
        </div>
        <div>
            <ul id="conmmentlist">
                <li>凯欣</li>
                <li>大龙</li>
                <li>大虎</li>
            </ul>
        </div>
        <script>
            function Shou(the){
                var val = the.previousElementSibling.value;
                // 获取输入的值
                the.propertyIsEnumerable.value="";
                var conmmentlist=document.getElementById("conmmentlist");
                // 第一种方式 创建字符串
                var str = "<li>" + val +"</li>";
    //            beforeBegin, 外部上边
    //            afterBegin, 内部必填神
    //            beforeEnd, 内部最后
    //            afterEnd   外部贴墙
    //            conmmentlist.insertAdjacentHTML("beforeEnd",str);
                // 第二种方式,元素的方式
                var tag = document.createElement('li');    创建标签
                tag.innerText= val;
                var temp = document.createElement('a');    创建标签
                temp.innerText="百度";
                temp.href = "http://etiantian.org";
                tag.appendChild(temp);
    //            conmmentlist.appendChild(tag);
                conmmentlist.insertBefore(tag,conmmentlist.children[1]);
    
            }
        </script>
    </body>
    </html>
    View Code

    5、样式操作

      利用javascript可以轻松的控制页面上的样式,就算没有样式表,也可以通过javascript控制页面声的任何元素的样式。

      通过修改style对象的属性,可以修改任何一个对象的样式。首先我们就是要查找到要修改样式的对象,可以预先在对象中定义ID属性,然后由getElementById()方法查找到该对象。比如:

       <h1 id=”head1”>This is Text</h1>

       Document.getElementById(“head1”).style.color=red;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .gg{
                color: #666666;
            }
            .bb{
                color: black;
            }
    
        </style>
    
    </head>
    <body>
        <input type="text" placeholder="请输入内容"/>
    
        <input type="text" class="gg" value="请输入内容" onfocus="fuu(this);"onblur="fxx(this);"/>
        <script>
            function fuu(ttt){
                ttt.className='bb';
                var curr_val = ttt.value;
                if(curr_val =="请输入内容"){
                    ttt.value = "";
                }
            }
            function fxx(ttt){
                var curr_val = ttt.value;
                if (curr_val =="请输入内容"|| curr_val.trim().length==0){
                    ttt.value = "请输入内容";
                    ttt.className = "gg";
                }
            }
        </script>
    </body>
    </html>
    样式操作

     6,位置操作:

    总文档高度
    document.documentElement.offsetHeight
       
     
    当前文档占屏幕高度
    document.documentElement.clientHeight
     
       
    自身高度
    tag.offsetHeight
     
     
    距离上级定位高度
    tag.offsetTop
     
       
    父定位标签
    tag.offsetParent
     
       
    滚动高度
    tag.scrollTop

     /*

        clientHeight -> 可见区域:height + padding
        clientTop    -> border高度
        offsetHeight -> 可见区域:height + padding + border
        offsetTop    -> 上级定位标签的高度
        scrollHeight -> 全文高:height + padding
        scrollTop    -> 滚动高度
        特别的:
            document.documentElement代指文档根节点
    */
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
                background-color: #dddddd;
            }
            .w{
                margin: 0 auto;
                 980px;
            }
            .pg-header{
                background-color: black;
                color: white;
                height: 48px;
            }
            .pg-body .menu{
                position: absolute;
                left: 200px;
                 180px;
                background-color: white;
                float: left;
            }
            .pg-body .menu .active{
                background-color: #425a66;
                color: white;
    
            }
            .pg-body .fixed{
                position: fixed;
                top: 10px;
            }
            .pg-body .content{
                position: absolute;
                left: 385px;
                right: 200px;
                background-color: white;
                float: left;
            }
            .pg-body .content .item{
                height: 900px;
            }
        </style>
    </head>
    <body onscroll="Hua();">
        <div class="pg-header">
            <div class="w">
    
            </div>
        </div>
        <div class="pg-body">
            <div id="menu" class="menu">
                <ul>
                    <li>第一章</li>
                    <li>第二章</li>
                    <li>第三章</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div class="item">床前明月管</div>
                <div class="item">疑是地上霜</div>
                <div class="item">我是郭德纲</div>
            </div>
    
        </div>
    <script>
        function Hua(){
            var huahua = document.body.scrollTop;
            var caiDan = document.getElementById('menu');
            if(huahua>48){
                caiDan.classList.add("fixed");
            }else {
                caiDan.classList.remove("fixed");
            }
            var items = document.getElementById("content").children;
            for (var i=0;i<items.length;i++) {
                var currentTiem = items[i];
                var currentTiemBodyTop = currentTiem.offsetTop + currentTiem.offsetParent.offsetTop;
                var currentTtemWindowTop = currentTiemBodyTop - huahua;
                console.log(currentTtemWindowTop);
                if (currentTtemWindowTop<0){
                    caiDan.getElementsByTagName('li')[i].className = 'active';
                }
                break
            }
     }           
                
                
    //            var currenthHeight = currentTiem.offsetHeight;
    //            var bottomHeight = currentTiemBodyTop + currenthHeight;
    //
    //            if (currentTtemWindowTop < 0 && huahua < bottomHeight) {
    //                var ziJi = caiDan.getElementsByTagName('li')[i];
    //                ziJi.className = "active";
    //                var lis = caiDan.getElementsByTagName('li');
    //                for(var j = 0;j<lis.length;j++){
    //                    if (ziJi == lis[j]){
    //
    //                    }else {
    //                        lis[j].classList.remove('active');
    //                    }
    //                }
    //            }break;
    //        }
    //    }
    
    </script>
    
    </body>
    </html>
    滚动菜单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
            <div style="height: 20px;background-color: green;"></div>
            <div style="border: 5px solid pink;padding: 10px;">
                <div>
                    <div id="xo" style="height: 200px;overflow: auto; 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" >
                        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                        <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>
                        <div>sdf</div>
                        <div>sdf</div>
                        <div>sdf</div>
                        <div>sdf</div>
    
                    </div>
                </div>
            </div>
    <script>
        var ii = document.getElementById("xo");
        console.log(ii.scrollTop,"scrollTop");
        console.log(ii.scrollHeight,"scrollHeight");
        console.log(ii.clientTop,"clientTop");
        console.log(ii.clientHeight,"clientHeight");
        console.log(ii.offsetTop,"offsetTop");
        console.log(ii.offsetHeight,"offsetHeight");
    </script>
    </body>
    </html>
    距离高度

    7、提交表单

    document.geElementById('form').submit()
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form id="fom" action="https://www/sogou.com/web?" method="get">
            <input name="query" type="text"/>
            <input type="button" onclick="SubmitForim();" value="提交"/>
        </form>
        <hr />
        <input type="button" value="confirm" onclick="Firm();"/>
        <input type="button" value="Interval" onclick="Interval();"/>
        <input type="button" value="StopInterval" onclick="StopInterval();"/>
        <div>
            <input type="button" value="删除"onclick="Delete();"/>
            <input type="button" value="保留状态" onclick="UnDelete();"/>
            <div id="status"></div>
        </div>
    
        <script>
            function UnDelete(){
                clearTimeout(t1);
            }
            function Delete(){
                document.getElementById("status").innerText="已删除";
                t1 = setTimeout(ClearStatus,5000);
            }
            function ClearStatus(){
                document.getElementById("status").innerText="";
            }
    
            function SubmitForim(){
                document.getElementById('fom').submit();
            }
            function Firm(){
                var r =confirm('傻狍子');
                console.log(r);
            }
            function f1(){
                console.log(1234)
            }
            function Interval(){
                si = setInterval(function(){
                    console.log(123);
                },1000);
                sii = setInterval(function(){
                    console.log(12);
                },2000);
                console.log(1)
            }
            function StopInterval(){
                clearInterval(si);
            }
        </script>
    
    </body>
    </html>
    提交表单

    8、其他操作

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框
     
    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载
     
    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <div id="btns">
            <input type="button" value="点我1"/>
            <input type="button" value="点我2"/>
            <input type="button" value="点我3"/>
        </div>
        <script>
            function func(){
                for(var i=0;i<3;i++){
                    var ret = (function func(arg){
                        console.log(arg)
                    })(i);
                    console.log(i);
                    setInterval(ret,1000);
                }
            }
    
    第一种方式
    //        var btns = document.getElementById("btns").children;
    //        for(var j=0;j<btns.length;j++){
    //            var curront_inp = btns[j];
    //            curront_inp.onclick = function(){
    //                alert(j);
    //            }
    //        }
    
    第二种方式
    
            function func(){
                for (var i=0;i<3;i++){
                    setInterval(function(){
                        console.log(i);
                    },1000);
                }
            }
            func();
        </script>
    </body>
    </html>
    定时器

    三、事件

    对于事件需要注意的要点:

    • this
    • event
    • 事件链以及跳出

    this标签当前正在操作的标签,event封装了当前事件的内容。

    实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="http://etiantain.org" onclick="return func()">赖你 </a>
        <form action="请输入内容.html">
            <div id="form1">
                <input type="text"/>
            </div>
            <input type="submit" value="提交" onclick="return SubmitForim();">
        </form>
        <script>
            function func(){    
                alert(123);
                return true;
            }
            function SubmitForim(){
                var inputs = document.getElementById('form1').getElementsByTagName("input");
                for (var i = 0;i<inputs.length;i++){
                    var currentInput = inputs[i];
                    var val = currentInput.value;
                    if (val.trim().length==0){
                        alert("请输入内容");
                        return false;
                    }
                }
                return true;
            
        </script>
    </body>
    </html>
    事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .top{
                background-color: brown;
                color:white;
                font-family: 华文隶书;
                font-size: 38px;
                text-align:center
            }
        </style>
    
    </head>
    <body>
        <div id="li" class="top">欢迎武sir莅临指导</div>
        <script>
            setInterval(function(){
                dd = document.getElementById('li');
                dd_text = dd.innerText;
                first_char = dd_text[0];
                sub_char = dd_text.slice(1,dd_text.length);
                new_str = sub_char + first_char;
                dd.innerText = new_str;
            },1000);
        </script>
    </body>
    </html>
    跑马灯
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul{
                padding: 0;
                margin: 0;
            }
            .hide{
                display: none;
            }
            .menu{
                 200px;
                height: 500px;
                background-color: #2459a2;
                border: 2px solid #333;
            }
            .menu .title{
                background-color: brown;
                cursor: pointer;
            }
            .menu .content{
                background-color: white;
            }
        </style>
    </head>
    <body>
    
        <div class="menu">
            <div class="item">
                <div class="title" onclick="Show(this);">菜单一</div>
                <div class="content">
                    <ul>
                        <li>内容1</li>
                        <li>内容1</li>
                        <li>内容1</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <!--arg.下一个标签nex-->
                <div class="title" onclick="Show(this);">菜单二</div>
                <div class="content hide">
                    <ul>
                        <li>内容2</li>
                        <li>内容2</li>
                        <li>内容2</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单三</div>
                <div class="content hide">
                    <ul>
                        <li>内容3</li>
                        <li>内容3</li>
                        <li>内容3</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">菜单四</div>
                <div class="content hide">
                    <ul>
                        <li>内容4</li>
                        <li>内容4</li>
                        <li>内容4</li>
                    </ul>
                </div>
            </div>
        </div>
    
        <script>
            function Show(arg){
                arg.nextElementSibling.classList.remove('hide');
                var father = arg.parentElement;
                var sons = father.parentElement.children;
                for(var i= 0;i<sons.length;i++){
                    var current_ele = sons[i];
                    if(current_ele == father){
    
                    }else {
                        current_ele.children[1].classList.add('hide');
                    }
                }
            }
    
        </script>
    </body>
    </html>
    菜单
  • 相关阅读:
    构建之法阅读笔记06
    构建之法阅读笔记05
    人月神话阅读笔记02
    人月神话阅读笔记01
    构建之法阅读笔记04
    学习进度09
    描绘用户场景并将典型用户和用户场景描述
    学习进度08
    第一冲刺阶段工作总结11
    第一冲刺阶段工作总结10
  • 原文地址:https://www.cnblogs.com/guokaixin/p/5651189.html
Copyright © 2020-2023  润新知