JS DOM操作

一.前言

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二.查找 HTML 元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

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

例;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
<div>该实例展示了 <b>getElementsByClassName</b> 方法!</div>
<p id="value">该实例展示了  <b>getElementById</b> 方法</p>
<script>
    x=document.getElementsByClassName("intro");
    y=document.getElementsByTagName('div');
    z=document.getElementById("value");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    document.write('<p>文本来自div标签' + y[0].innerHTML + "</p>");
    document.write('<p>文本来自id为value的内容;' + z.innerHTML + "</p>");
</script>
</body>
</html>

查找HTML元素

2.2间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
  
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

三.操作

1.内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

例：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

更改HTML元素内容

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

更改属性

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</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>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>

    <table border="1" >
        <thead>

        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = true;
                }
            }
        }

        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }

        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }

    </script>
</body>
</html>

Demo

3.class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

例：

<html>
<body id="myid" class="mystyle">

<script type="text/javascript">
    x=document.getElementsByTagName('body')[0];
    document.write("Body CSS class: " + x.className);
    document.write("<br />");
    document.write("An alternate way: ");
    document.write(document.getElementById('myid').className);
</script>

</body>
</html>

获取类名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle");
}
</script>

</body>
</html>

classList.add

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
.delcss{
    background-color: gray;
    font-size: 40px;
}
</style>
</head>
<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<div id="myDIV">
我是一个 DIV 元素。
</div>
<div id="delcss" class="delcss">
    删除样式
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle");
    document.getElementById("delcss").classList.remove("delcss")
}
</script>

</body>
</html>

删除类

<!DOCTYPE html>
<html lang="en">
<!--弹框-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{display: none}
        .c1{
            position: fixed;
            background: rgba(0,0,0,.6);
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            z-index: 2;
        }
        .c2{
            position: fixed;
            background-color: white;
            height: 300px;
            width: 300px;
            top:50%;
            left:50%;
            margin-top: -150px;
            margin-left: -150px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点我" onclick="Show();">
                </td>
            </tr>
        </table>
    </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="确定">
            <input type="button" value="取消" onclick="Hide();">
        </p>
    </div>

    <script>
        function Show() {
            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>

弹框实例

4.标签操作

　　a.创建标签

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

b.操作标签

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

5、样式操作

改变 HTML 元素的样式

document.getElementById(id).style.property=新样式

例;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>

View Code

<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>

demo

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>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin: 0;">
    <div style="height: 900px;">

    </div>
    <div style="padding: 10px;">
        <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
        </div>
    </div>

    <script>
        var i1 = document.getElementById('i1');

        console.log(i1.clientHeight); // 可见区域：height + padding
        console.log(i1.clientTop);    // border高度
        console.log('=====');
        console.log(i1.offsetHeight); // 可见区域：height + padding + border
        console.log(i1.offsetTop);    // 上级定位标签的高度
        console.log('=====');
        console.log(i1.scrollHeight);   //全文高：height + padding
        console.log(i1.scrollTop);      // 滚动高度
        console.log('=====');

    </script>
</body>
</html>

test

<!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>

Demo-滚动固定

<!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>

Demo-滚动菜单

<!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>

Demo-滚动高度

7.提交表单

document.geElementById('form').submit()

8.其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

四.事件

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

this
event
事件链以及跳出

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

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

onclick事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<head>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>字母变大写</p>

</body>
</html>

onchange事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

onmouse事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1>

</body>
</html>

鼠标事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<head>
<script>
function mymessage(){
    alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

</html>

onload事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>

搜索框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>

跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .style_before {
            color: lightgrey;
        }
        .style_after {
            color: black;
        }
    </style>
</head>
<body>
    <h3>爱好</h3>
    <div>
        <ul id="i1">
            <li><input type="checkbox" value="1">篮球</li>
            <li><input type="checkbox" value="2">足球</li>
            <li><input type="checkbox" value="3">乒乓球</li>
        </ul>
    </div>
    <button onclick="Cheakall()">全选</button>
    <button onclick="Cancleall()">取消全选</button>
    <button onclick="Reversall()">反选</button>
    <script>
        function Cheakall() {
            var i1 = document.getElementById("i1");
            var cheak = i1.getElementsByTagName("input");
            for (i=0;i<cheak.length;i++) {
                cheak[i].checked = true;
            }
        }
        function Cancleall() {
            var i1 = document.getElementById("i1");
            var cheak = i1.getElementsByTagName("input");
            for (i=0;i<cheak.length;i++) {
                cheak[i].checked = false;
            }
        }
        function Reversall() {
            var i1 = document.getElementById("i1");
            var cheak = i1.getElementsByTagName("input");
            for (i=0;i<cheak.length;i++) {
                if (cheak[i].checked) {
                    cheak[i].checked = false;
                }else {
                    cheak[i].checked = true;
                }
            }
        }
    </script>
</body>
</html>

全选、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
        .c1 {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,.6);
            z-index: 2;
        }
        .c2 {
            position: fixed;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            z-index: 3;
            margin-top: -150px;
            margin-left: -200px;
            background-color: white;
            text-align: center;
            padding-top: 150px;
        }
    </style>
</head>
<body>
    <div><input type="button" value="登录" onclick="hihi()"></div>
    <div id="cc1" class="c1 hide"></div>
    <div id="cc2" class="c2 hide">
        <div>用户名：<input type="text"></div>
        <div>密 码：<input type="text"></div>
        <input type="button" value="确定">
        <input type="button" value="取消" onclick="hisl()">
    </div>

    <script>
        function hihi() {
            document.getElementById("cc1").classList.remove("hide");
            document.getElementById("cc2").classList.remove("hide");
        }
        function hisl() {
            document.getElementById("cc1").classList.add("hide");
            document.getElementById("cc2").classList.add("hide");
        }
    </script>
</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 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" style="height: 100px">我是郭德纲</div>
        </div>
    </div>

    <script>
        function Hua() {
            var xo = document.getElementById("menu");
            var huaGao = document.body.scrollTop;
            if (document.body.scrollTop>48){
                xo.classList.add("fixed");
            }else {
                xo.classList.remove("fixed");
            }

            var bod = document.body.offsetHeight;
            var conAbs = document.getElementsByClassName("content")[0].offsetHeight;
            var ck = document.documentElement.clientHeight;
//            console.log((bod + conAbs) == (ck + huaGao));
            if ((bod + conAbs) == (ck + huaGao)) {
                var lenLi = xo.getElementsByTagName("li");
                for (var i=0;i<lenLi.length;i++){
                    if (i == lenLi.length - 1){
                        lenLi[i].className = "active";
                    }else {
                        lenLi[i].className = "";
                    }
                }
                return
            }


            var item = document.getElementById("content").children;
            for (var i=0;i<item.length;i++){
                var currentItem = item[i];
                var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
                var currentItemWindowTop = currentItemBodyTop - huaGao;

                var currentHeight = currentItem.offsetHeight;
                var bottomHeight = currentItemBodyTop + currentHeight;

                var ziJi = xo.getElementsByTagName("li")[i];
                if (currentItemWindowTop<0 && huaGao < bottomHeight){
                    ziJi.className = "active";
                } else {
                    ziJi.className = "";
                }

            }
        }


    </script>
</body>
</html>

书签章节

<!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: #0099dd;
            color: black;
        }
        .tab-menu .content{
            border: 1px solid #dddddd;
            min-height: 150px;
        }
        ul li:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div style=" 400px; margin: 0 auto;">
        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li target="h1" class="active" onclick="Show(this);">索尼</li>
                    <li target="h2" onclick="Show(this);">谷歌</li>
                    <li target="h3" onclick="Show(this);">腾讯</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div con="h1">1...</div>
                <div con="h2" class="hide">2...</div>
                <div con="h3" class="hide">3...</div>
            </div>
        </div>
    </div>

    <script>
        function Show(ths) {
            var Showli = ths;
            var littarget = Showli.getAttribute("target");
            var liclass = Showli.parentNode.children;
            for (var i=0;i<liclass.length;i++) {
                if (liclass[i].getAttribute("target") == littarget) {
                    liclass[i].classList.add("active");
                }else {
                    liclass[i].classList.remove("active");
                }
            }
            var liycontent = document.getElementById("content").children;
            for (var i=0;i<liycontent.length;i++) {
                if (liycontent[i].getAttribute("con") == littarget) {
                    liycontent[i].className = "";
                }else {
                    liycontent[i].className = "hide";
                }
            }
        }
    </script>
</body>
</html>

菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .go-top {
            position: fixed;
            right: 28px;
            bottom: 19px;
            width: 38px;
            height: 40px;
            background-color: aliceblue;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body onscroll="Func();">
    <div style="height: 2000px"></div>
    <div id="i2" class="go-top hide">
        <a onclick="GoTop();">返回顶部</a>
    </div>
    <script>
        function Func() {
            var scrolltop = document.body.scrollTop;
            var ii = document.getElementById("i2");
            if (scrolltop>300) {
                ii.classList.remove("hide");
            }else {
                ii.classList.add("hide");
            }
        }
        function GoTop() {
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

返回顶部

相关阅读:
OpenCV学习（8.22）
Arduino学习（一）
OpenCV学习（7.17）
OpenCV学习（7.16）
OpenCV学习（7.14）
OpenCV学习（7.13）
Android Touch事件传递机制解析
 Android-ViewPagerIndicator
Android-xUtils-使用GET方式，从服务器获取json字符串
 Android-SlidingMenu-显示隐藏侧边栏
原文地址：https://www.cnblogs.com/jl-bai/p/5826741.html

最新文章
51nod
51nod
51nod
51nod
51nod
51nod
GDUFE ACM-1356
GDUFE ACM-1355
GDUFE ACM-1347
GDUFE ACM-1270