zoukankan      html  css  js  c++  java
  • Python自动化运维之23、Dom

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

    一、查找元素

      如果我们想用js操作文档,首先要做的便是要找到要操作的元素,查找元素有直接查找和间接查找,下面来看一下这两类查找,

    1、直接查找

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

    2、间接查找(一般都是和直接找配合使用) 

    // 会包括所有标签和换行(一般不会使用这种)
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
    
    // 只包括所有标签(一般这种使用比较多) 
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素

    二、操作 

    1、内容 

      操作内容主要是 innerText,innerHTML和value其中前两种比较简单,主要是第三种在操作表单的时候,用得最多,text,password和textarea的value可以分为一类,checkbox,radio和select的value可以分为一类

    innerText   // a标签中的文本内容
    innerHTML   // HTML内容,比如<a><span>aaa</span><a>中的<span>标签
    value       // input标签中的值
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跑马灯</title>
    </head>
    <body>
        <div id="i1" style="display: inline-block;background: green;color:white;">欢迎领导莅临指导</div>
    
        <script>
            setInterval("f1()",900);
    
            function f1(){
                var tag=document.getElementById('i1');
                var text = tag.innerText;
                var a = text.charAt(0);
                var sub = text.substring(1,text.length);
    
                var new_str = sub + a;
                tag.innerText = new_str;
    
            }
        </script>
    </body>
    </html>
    跑马灯
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>搜索框</title>
    </head>
    <body>
        <input id="i1" type="text" value="请输入关键字" onfocus="Focus()" onblur="Blur()"/>
        <input id="i2" type="text"/>
    
    
        <script>
            function Focus() {
                var tag = document.getElementById('i1');
                if(tag.value == "请输入关键字"){
                    tag.value = "";
                }
            }
    
            function Blur() {
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val.trim().length == 0){
                    tag.value = "请输入关键字";
                }
            }
        </script>
    </body>
    </html>
    搜索框

    2、操作属性

    除了操作内容,还可以操作标签属性,主要用到下面几个方法

    attributes                // 获取所有标签属性
    setAttribute(key,value)   // 设置标签属性
    getAttribute(key)         // 获取指定标签属性
     
    /*
    var atr = document.createAttribute("class");
    atr.nodeValue="democlass";
    document.getElementById('n1').setAttributeNode(atr);
    */
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>checkbox全选取消反选</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="CheckAll()"/>
        <input type="button" value="取消" onclick="CancleAll()"/>
        <input type="button" value="反选" onclick="ReverseAll()"/>
    
        <table border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>IP</th>
                    <th>Port</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.1</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.2</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.3</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    
        <script>
            function CheckAll() {
                var tb = document.getElementById('tb');
                var trs = tb.children;
                for(var i=0;i<trs.length;i++){
                    var current_tr = trs[i];
                    var ck = current_tr.firstElementChild.firstElementChild;
                    ck.checked = true;
    //                ck.setAttribute('checked','checked');
                }
            }
            function CancleAll() {
                var tb = document.getElementById('tb');
                var trs = tb.children;
                for(var i=0;i<trs.length;i++){
                    var current_tr = trs[i];
                    var ck = current_tr.firstElementChild.firstElementChild;
                    ck.checked = false;
    //                ck.removeAttribute('checked');
                }
            }
            function ReverseAll() {
                var tb = document.getElementById('tb');
                var trs = tb.children;
                for(var i=0;i<trs.length;i++){
                    var current_tr = trs[i];
                    var ck = current_tr.firstElementChild.firstElementChild;
                    if(ck.checked){
                        ck.checked = false;
    //                    ck.removeAttribute('checked');
                    }else{
                        ck.checked = true;
    //                    ck.setAttribute('checked','checked');
                    }
                }
            }
        </script>
    
    
    
    </body>
    </html>
    checkbox全选取消反选
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .content{
                margin: 0 auto;
                width: 300px;
                border: 1px solid chocolate;
            }
            ul{
                list-style: none;
                background-color: #cccccc;
            }
            ul li{
                float: left;
                display: block;
                background-color: #2459a2;
                padding:0 10px;
                height: 50px;
                line-height: 50px;
                cursor: pointer;
            }
            .clearfix:after{
                display: block;
                content: '';
                height: 0;
                visibility: hidden;
                clear: both;
            }
            #info{
                min-height: 200px;
                width: 300px;
            }
            .hide{
                display: none;
            }
            .active{
                background-color: white;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <ul class="clearfix">
                <li tg="1" class="active" onclick="Func(this)">价格走势</li>
                <li tg="2" onclick="Func(this)">市场分布</li>
                <li tg="3" onclick="Func(this)">其他</li>
            </ul>
    
            <div id="info">
                <div targ="1" >conten1</div>
                <div targ="2" class="hide">conten2</div>
                <div targ="3" class="hide">conten3</div>
            </div>
        </div>
    
        <script>
            function Func(ths) {
                var bot = ths.parentElement.children;
                for(var i=0;i<bot.length;i++){
                    bot[i].classList.remove('active')
                }
                ths.classList.add('active');
    
                var vtg = ths.getAttribute('tg');
                var divs = document.getElementById('info').children;
                for(var i=0;i<divs.length;i++){
                    if(divs[i].getAttribute('targ') == vtg){
                        divs[i].classList.remove('hide');
                    }else{
                        divs[i].classList.add('hide');
                    }
                }
    
            }
        </script>
    </body>
    </html>
    不同菜单不同内容

    3、class操作

    className                 // 获取所有类名,字符串格式
    classList                     // 获取所有类名,列表格式
    classList.remove(cls)    // 删除指定类
    classList.add(cls)        // 添加类
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模态对话框</title>
        <style>
            *{
                margin: 0;
            }
            .hide{
                display:none;
            }
            .shade{
                position: fixed;
                top:0;
                bottom:0;
                left:0;
                right:0;
                background-color: rgba(0,0,0,.6);
            }
            .modal{
                position: fixed;
                height: 400px;
                width:500px;
                background-color: white;
                top:50%;
                left:50%;
                margin-top: -200px;
                margin-left: -250px;
            }
        </style>
    
    
    </head>
    <body>
        <div style="height: 2000px;background-color: #dddddd;">
            <input type="button" value="登录" onclick="show()"/>
        </div>
    
        <div id="shade" class="shade hide"></div>
        <div id="modal" class="modal hide">
            <input type="text" placeholder="用户名"/><br/>
            <input type="password" placeholder="密码"/><br/>
            <a href="javascript:void(0)" onclick="cancle()">取消</a>
        </div>
    
        <script>
            function show() {
                var tag1 = document.getElementById('shade');
                var tag2 = document.getElementById('modal');
    
                tag1.classList.remove('hide');
                tag2.classList.remove('hide');
            }
    
            function cancle() {
                var tag1 = document.getElementById('shade');
                var tag2 = document.getElementById('modal');
    
                tag1.classList.add('hide');
                tag2.classList.add('hide');
            }
        </script>
    </body>
    </html>
    模态对话框

    4、标签操作

    a.创建标签(两种方式)

    // 方式一
    var tag = document.createElement('a')
    tag.innerText = "wupeiqi"
    tag.className = "c1"
    tag.href = "http://www.cnblogs.com/wupeiqi"
     
    // 方式二
    var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
    

    b.操作标签(两种方式和创建标签是对应的)  

    // 方式一
    var tag = document.createElement('a')
    xxx.appendChild(tag)
    xxx.insertBefore(tag,xxx[1])
    
    // 方式二
    var obj = "<input type='text' />";
    xxx.insertAdjacentHTML("beforeEnd",obj);
    xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
     
    //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
     
    

    5、样式操作 

    ar obj = document.getElementById('i1')
     
    obj.style.fontSize = "32px";
    obj.style.backgroundColor = "red";
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点赞</title>
        <style>
            .item{
                padding:50px;
                position: relative;
            }
            .item span{
                position: absolute;
                top:49px;
                left:71px;
                opacity:1;
                font-size:18px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <a onclick="Favor(this);">赞1</a>
            <!--<span>+1</span>-->
        </div>
    
        <div class="item">
            <a onclick="Favor(this);">赞2</a>
        </div>
    
        <div class="item">
            <a onclick="Favor(this);">赞3</a>
        </div>
    
        <script>
            function Favor(ths) {
                // ths形参 --> this实参 --> 是当前触发事件的标签
    
                var top = 49;
                var left = 71;
                var op = 1;
                var fontSize = 18;
                var tag = document.createElement('span');
                tag.innerText = '+1';
                tag.style.position = 'absolute';
                tag.style.top = top + 'px';
                tag.style.left = left + 'px';
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + 'px';
                ths.parentElement.appendChild(tag);
    
                var intervarl = setInterval(function () {
                    top -= 10;
                    left += 10;
                    fontSize += 5;
                    op -= 0.1;
    
    
                    tag.style.top = top + 'px';
                    tag.style.left = left + 'px';
                    tag.style.opacity = op;
                    tag.style.fontSize = fontSize + 'px';
    
                    if(op == 0.2){
                        clearInterval(intervarl);
                        ths.parentElement.removeChild(tag);
                    }
    
                },50)
            }
        </script>
    </body>
    </html>
    点赞
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>搜索框二</title>
    </head>
    <body>
        <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
    
        <script>
            function Focus(ths){
                ths.style.color = "black";
                if(ths.value == '请输入关键字' || ths.value.trim() == ""){
    
                    ths.value = "";
                }
            }
    
            function Blur(ths){
                if(ths.value.trim() == ""){
                    ths.value = '请输入关键字';
                    ths.style.color = 'gray';
                }else{
                    ths.style.color = "black";
                }
            }
        </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>
        <style>
            *{
                margin:0;
            }
            .back{
                position: fixed;
                width:5px;
                right: 60px;
                bottom: 20px;
                color: red;
                cursor: pointer;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body onscroll="BodyScroll();">
        <div style="height:2000px;background-color: #dddddd;"></div>
        <div id="back" class="back hide" onclick="Backtop()">返回顶部</div>
    
        <script>
            function Backtop() {
                document.body.scrollTop = 0;
            }
    
            function BodyScroll() {
                var s = document.body.scrollTop;
                var t = document.getElementById('back');
                if(s > 100){
                    t.classList.remove('hide');
                }else {
                    t.classList.add('hide');
                }
            }
        </script>
    
    </body>
    </html>
    返回顶部
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>滚动固定</title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
            }
        </script>
    </body>
    </html>
    滚动固定
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>滚动菜单</title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        h1{
            padding: 0;
            margin: 0;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog" id="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content" id="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
                var content = document.getElementById('content');
                var sections = content.children;
                for(var i=0;i<sections.length;i++){
                    var current_section = sections[i];
    
                    // 当前标签距离顶部绝对高度
                    var scOffTop = current_section.offsetTop + 60;
    
                    // 当前标签距离顶部,相对高度
                    var offTop = scOffTop - bodyScrollTop;
    
                    // 当前标签高度
                    var height = current_section.scrollHeight;
    
                    if(offTop<0 && -offTop < height){
                        // 当前标签添加active
                        // 其他移除 active
                        var menus = document.getElementById('catalog').children;
                        var current_menu = menus[i];
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){
    
                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                        break;
                    }
    
                }
    
    
            }
        </script>
    </body>
    </html>
    滚动菜单
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>滚动高度</title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        h1{
            padding: 0;
            margin: 0;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog" id="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content" id="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style="height: 200px;">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
                var content = document.getElementById('content');
                var sections = content.children;
                for(var i=0;i<sections.length;i++){
                    var current_section = sections[i];
    
                    // 当前标签距离顶部绝对高度
                    var scOffTop = current_section.offsetTop + 60;
    
                    // 当前标签距离顶部,相对高度
                    var offTop = scOffTop - bodyScrollTop;
    
                    // 当前标签高度
                    var height = current_section.scrollHeight;
    
                    if(offTop<0 && -offTop < height){
                        // 当前标签添加active
                        // 其他移除 active
    
                        // 如果已经到底部,现实第三个菜单
                        // 文档高度 = 滚动高度 + 视口高度
    
                        var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
                        var b = bodyScrollTop + document.documentElement.clientHeight;
                        console.log(a+60,b);
                        if(a == b){
                            var menus = document.getElementById('catalog').children;
                            var current_menu = document.getElementById('catalog').lastElementChild;
                            current_menu.classList.add('active');
                            for(var j=0;j<menus.length;j++){
                                if(menus[j] == current_menu){
    
                                }else{
                                    menus[j].classList.remove('active');
                                }
                            }
                        }else{
                            var menus = document.getElementById('catalog').children;
                            var current_menu = menus[i];
                            current_menu.classList.add('active');
                            for(var j=0;j<menus.length;j++){
                                if(menus[j] == current_menu){
    
                                }else{
                                    menus[j].classList.remove('active');
                                }
                            }
                        }
                        break;
                    }
                }
            }
        </script>
    </body>
    </html>
    滚动高度

    7、提交表单

    document.geElementById('form').submit()
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>a标签提交表单</title>
    </head>
    <body>
        <form id="f1">
            <input type="text"/>
            <input type="submit" value="提交"/>
            <a onclick="Submit()">提交</a>
        </form>
    
        <script>
            function Submit() {
                var form = document.getElementById('f1');
                form.submit();
            }
        </script>
    </body>
    </html>
    a标签提交表单

    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>
    </head>
    <body>
        <div id="status" style="color:red">
    
        </div>
        <input type="button" value="删除" onclick="DeleteStatus()"/>
    
        <script>
            function DeleteStatus() {
                var s = document.getElementById('status');
                s.innerText = '删除成功';
                setTimeout(function () {
                    s.innerText = "";
                },5000);
            }
        </script>
    </body>
    </html>
    定时器

    三、事件 

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

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>event事件的内容</title>
        <style>
            *{
                margin: 0;
            }
            .hide{
                display:none;
            }
            .shade{
                position: fixed;
                top:0;
                bottom:0;
                left:0;
                right:0;
                background-color: rgba(0,0,0,.6);
            }
            .modal{
                position: fixed;
                height: 400px;
                width:500px;
                background-color: white;
                top:50%;
                left:50%;
                margin-top: -200px;
                margin-left: -250px;
            }
        </style>
    
    
    </head>
    <body>
        <div style="height: 2000px;background-color: #dddddd;">
            <input type="button" value="登录" onclick="show()"/>
        </div>
    
        <div id="shade" class="shade hide"></div>
        <div id="modal" class="modal hide">
            <input type="text" placeholder="用户名"/><br/>
            <input type="password" placeholder="密码"/><br/>
            <!--<a href="javascript:void(0)" onclick="cancle()">取消</a>-->
        </div>
    
        <script>
            function show() {
                var tag1 = document.getElementById('shade');
                var tag2 = document.getElementById('modal');
    
                tag1.classList.remove('hide');
                tag2.classList.remove('hide');
            }
    
            function cancle() {
                            var tag1 = document.getElementById('shade');
                var tag2 = document.getElementById('modal');
    
                tag1.classList.add('hide');
                tag2.classList.add('hide');
            }
            window.onkeydown = function (event) {
                console.log(event);
                if(event.keyCode == 27){
                    cancle();
                }
            }
        </script>
    </body>
    </html>
    event事件的内容(模态对话框)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>默认事件与自定义事件</title>
    </head>
    <body>
        <!--自定义事件优先的标签:a,form-->
        <!--默认事件优先的标签:checkbox-->
        <!--return 事件,返回false则默认的事件不执行,true则会执行默认事件-->
        <form action="https://www.baidu.com">
            <input type="text" id="username"/>
            <input type="submit" value="提交" onclick="return SubmitForm();"/>
        </form>
    
    
        <script>
            function SubmitForm() {
                var user = document.getElementById('username');
                if(user.value.length > 0){
                    // 可以提交
                    return true;
                }else{
                    //不可以提交
                    alert('用户名输入不能为空');
                    return false;
                }
            }
        </script>
    </body>
    </html>
    默认事件与自定义事件

     

  • 相关阅读:
    最近开始学习python,学习到了关于web的内容。
    redis requires Ruby version >= 2.2.2问题
    xml中CDATA包含问题
    pl/sql中文乱码问题解决
    关于window.open()中文传值乱码问题的解决方法
    关于maven中央仓库jar包不存在问题
    201571030332 扎西平措 《面向对象程序设计Java》第八周学习总结
    扎西平措 201571030332 《面向对象程序设计(java)课程学习进度条》
    扎西平措 201571030332 《面向对象程序设计 (JAVA)》第二周 学习总结
    扎西平措 201571030332《面向对象程序设计 Java 》第一周学习总结
  • 原文地址:https://www.cnblogs.com/xiaozhiqi/p/5841037.html
Copyright © 2011-2022 走看看