原生开发WebApi知识点总结

WebApi

Web API: 浏览器提供的一套API(方法),通过这套API我们可以非常轻易的操作页面的元素和浏览器的一些功能。API是一些预先定义的方法,这些方法能够实现某些特定的功能,我们无须知道这些API的实现方式,但是我们需要知道这些API如何使用。通俗的讲,API就是编程语言给我提供的一些工具,通过这些工具,我们可以非常轻易的完成一些功能。

案例地址: https://github.com/pengjunshan/WebPJS/WebApi

其它Web文章
HtmlCss基础学习第一章
CSS基础学习第二章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......

主要是操作DOM和BOM

DOM概念

DOM(Document Object Model)可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。
经常进行的操作有:获取元素、对元素进行操作(设置其属性或调用其方法)、动态创建元素、事件(什么时机做相应的操作)、等等;

DOM文档树模型

BOM概念

BOM(Browser Object Model) 是指浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
经常进行的操作有:对话框、定时器、location对象、history对象、等等;

本编文章会讲到的知识点
  • 获取页面元素
  • 属性操作
  • 创建元素
  • 节点操作
  • 事件对象
  • BOM对象
获取页面元素

需要操作页面上的某部分元素(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作。

1.根据id获取元素

参数:字符串类型 id,返回值:元素, 如果找不到,返回的是null。

var div = document.getElementById('main');
console.log(div);

2.根据标签名获取元素

get:获取 elements:元素 by:通过 tagName:标签名
返回值:伪数组,伪数组不是数组,但是可以跟数组一样遍历,也可以通过下标操作。不能用数组的方法。

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

3.根据name获取元素

和getElementById()差不多,根据元素中name属性值来查找,返回值也是个伪数组。

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

4.根据类名获取元素

ClassName:一目了然是根据class类名来查找,返回值是伪数组。

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

5.根据选择器获取元素

参数: 字符串类型的 css选择器;
querySelector(".cool"),返回值:元素, 如果是多个,只会返回第一个。
querySelectorAll(".cool"),返回值: 伪数组。

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

案例

用到了这六种方式来获取页面中的元素。案例请到https://github.com/pengjunshan/WebPJS中查看

<body>
    <h1 name="pjs"></h1>

    <ul id="imgs">
        <li>
            <a href="../img/1.jpg" title="美女A">
                <img src="../img/1-small.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="../img/2.jpg" title="美女B">
                <img src="../img/2-small.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="../img/3.jpg" title="美女C">
                <img src="../img/3-small.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="../img/4.jpg" title="美女D">
                <img src="../img/4-small.jpg" alt="">
            </a>
        </li>
    </ul>

    <img src="../img/placeholder.png" width="400" height="250" alt="" id="bigImg">


    <!--标签的内容-->
    <p class="des">这是描述信息</p>
    <p class="des">这是描述信息</p>
    <p class="des">这是描述信息</p>

    <script>
        //1. 点击a标签时,能够呵呵就行。
        //2. 修改大图片的src  p标签的innerText

        //1. 找对象
        var imgs = document.getElementById("imgs");//ul
        var links = imgs.getElementsByTagName("a");//所有的a标签
        var bigImg = document.querySelector("#bigImg");//大图片
        var des = document.querySelectorAll(".des");
        var pjs = document.getElementsByName("pjs");

        pjs[0].innerText = "美女相册";

        //2. 给所有的a标签注册点击事件
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {

                //3. 修改大图片的src属性, this.href
                bigImg.src = this.href;

                //4. 修改p标签的内容, innerText:内部的文本
                des[0].innerText = this.title;

                //5. 阻止a跳转
                return false;
            }
        }

    </script>
</body>
属性操作

通过DOM对象也就是我们获取的元素,可以进行属性操作、类名操作、样式操作、等等。

1.非表单元素的属性

href、title、id、src、className、innerHTML、innerText等等属性。
innerHTML可以从字符中识别标签,innerText只认为都是字符串。

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

2.表单元素属性

value 用于大部分表单元素的内容获取(option除外)、type 可以获取input标签的类型(输入框或复选框等)、disabled 禁用属性、checked 复选框选中属性、selected 下拉菜单选中属性;

                  this.value = "钢琴";
                  if (inputs[i].type === "text") {
                    inputs[i].disabled = true;
                } else if (inputs[i].type === "checkbox") {
                    inputs[i].checked = true;
                }

        var options = document.getElementsByTagName("option");
        btn.onclick = function () {
            //写一个随机数
            //[0,1)
            //随机数需要写在事件里头,每次点击都要重新生成随机数
            var random = parseInt(Math.random() * options.length);
            options[random].selected = true;
        }

3.自定义属性操作

getAttribute() 获取标签行内属性、setAttribute() 设置标签行内属性、removeAttribute() 移除标签行内属性。setAttribute()可以修改属性值也可以添加属性

        <div id="pp" index="1" aa="a"></div>
        var pp = document.getElementById("pp");
        console.log(pp.getAttribute("index"))
        pp.setAttribute("index", "2");
        console.log(pp.getAttribute("index"))
        pp.setAttribute("name", "pjs")
        pp.removeAttribute("aa")
        console.log(pp)

4.样式操作

使用style方式设置的样式显示在标签行内,obj.style.=,始终对应的都是行内样式, 获取的也是行内样式, 设置的也是行内样式。通过样式属性设置宽高、位置的属性类型是字符串,需要加上px。

        <div id="box"></div>
        var box = document.getElementById("box");
        box.style.borderRadius = "50%";
        box.style.backgroundColor = "pink";
        box.style.width = "200px";
        box.style.height = "100px"
        console.log(box.style.backgroundColor)

5.类名操作

修改标签的className属性相当于直接修改标签的类名。

    #sd{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .show{
        display: block;
    }
    .none{
        display: none;
    }
    <input type="button" value="切换类名">
    <div id="sd" class="show"></div>
       /**
        * 类名操作 切换类名
        */
        var sdDiv = document.getElementById("sd");
        var inputs = document.getElementsByTagName("input");
        for(var i = 0; i<inputs.length; i++){
            if(inputs[i].type == "button"){
                inputs[i].onclick = function(){
                    if(sdDiv.className === "show"){
                        sdDiv.className = "none";
                    }else{
                        sdDiv.className = "show";
                    }
                }
            }
        }

6.案例

table栏切换效果,案例请到https://github.com/pengjunshan/WebPJS中查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab .tab-item {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
                <a href="###"><img src="../img/guojidapai.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="../img/guozhuangmingpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="../img/qingjieyongpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="../img/nanshijingpin.jpg" alt="" /></a>
            </div>
        </div>
    </div>

    <script>
        //思路:
        //1. 找对象
        //2. 给所有的li注册onmouseover事件
        //3. 排他
        var lis = document.querySelectorAll(".tab-item");
        var divs = document.querySelectorAll(".main");
        //注册事件
        for (var i = 0; i < lis.length; i++) {
            //存储一个下标
            lis[i].index = i;
            lis[i].onmouseover = function () {
                //干掉所有人  仅仅是active这个类清除
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = "tab-item";
                    divs[i].className = "main";
                }
                //复活我自己
                this.className = "tab-item active";
                divs[this.index].className = "main selected";
            }
        }
    </script>
</body>
</html>
创建元素

动态创建元素有三种方式:document.write()、innerHTML()、document.createElement();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>我是印第安人</div>
    <div id="dd"></div>
    <script>
        /**
          *document.write()
          */
        document.write('我是document.write()创建的标签:<span>标签也可以生成</span>');

        /**
        *   innerHTML
        */
        var dd = document.getElementById("dd");
        dd.innerHTML = "我是innerHTML()创建的标签:<span>标签也可以生成</span>";

        /**
        * document.createElement()
        */
        var dd2 = document.createElement("div");
        dd2.innerText = "我是document.createElement()创建的元素"
        document.body.appendChild(dd2)

    </script>
</body>

</html>
节点操作

整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点;

通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

1.节点层次,属性

通过DOM对象查找子节点(childNodes children)、父节点(parentNode parentElement)、兄弟节点(previousSibling previousElementSibling nextSibling nextElementSibling)、第一个节点(firstChild firstElementChild)、最后一个节点(lastChild lastElementChild)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="pp">
        <div>敏文兄</div>
        <div>平平</div>
        <div id="dyy">短圆圆</div>
        <p>邱航</p>
        <p>胖子</p>
    </div>

    <script>
        var pp = document.querySelector("#pp");
        var dyy = document.getElementById("dyy");

        //childNodes:可以获取到某个元素所有的子节点
        var childs = pp.childNodes;
        console.log(childs)

        //我们需要的是标签节点,元素 判断一个节点是不是标签: nodeType === 1
        for (var i = 0; i < childs.length; i++) {
            if (childs[i].nodeType === 1) {
                console.log(childs[i]);
            }
        }

        //children : 获取某个元素中所有的子元素(children)
        var childrens = pp.children;
        console.log(childrens)

        //第一个孩子节点
        console.log(pp.firstChild)
        //  console.log(childs[0])
        //第一个孩子元素
        console.log(pp.firstElementChild)
        //  console.log(childrens[0])

        //最后一个孩子节点
        console.log(pp.lastChild)
        // console.log(childs[childs.length-1])
        //最后一个孩子元素
        console.log(pp.lastElementChild)
        // console.log(childrens[childrens.length-1])

        //兄弟姐妹:sibling
        //上一个兄弟节点
        console.log(dyy.previousSibling)
        //上一个兄弟元素
        console.log(dyy.previousElementSibling);

        //下一个兄弟节点
        console.log(dyy.nextSibling);
        //下一个兄弟元素
        console.log(dyy.nextElementSibling);

        //父节点
        console.log(dyy.parentNode)
        //父元素
        console.log(dyy.parentElement)

    </script>
</body>

</html>

2.节点操作,方法

通过节点对象可以进行 添加节点(appendChild())、插入节点(insertBefore())、删除节点(removeChild())、替换节点(replaceChild())、克隆节点(cloneNode());代码中注释请仔细查看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="pp">
        <div>敏文兄</div>
        <div>平平</div>
        <div id="dyy">短圆圆</div>
        <p>邱航</p>
        <p>胖子</p>
    </div>

    <script>
        var pp = document.querySelector("#pp");
        var dyy = document.getElementById("dyy");

        //克隆节点cloneNode(*) *: 为布尔值,如果为true,那么将克隆原节点,以及所有子节点;为false时,仅复制节点本身
        var cldyy = dyy.cloneNode(true);

        //添加节点appendChild()添加到尾端  
        // pp.appendChild(cldyy);

        //插入节点insertBefore(newChild,*)第一个参数:newChild 需要添加的元素,
        //第二个参数:refChild 添加到哪个子元素前面 传null默认最后末端.
        pp.insertBefore(cldyy, pp.children[0])
        console.log(pp)

        //移除节点removeChild(*) *:要移除的节点 
        pp.removeChild(pp.children[1]);
        console.log(pp)

    </script>
</body>

</html>

3.案例

动态创建table表格、删除表格、增加表格功能。案例请到https://github.com/pengjunshan/WebPJS中查看。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #000;
            /*边框合并*/
            border-collapse: collapse;
        }

        th {
            border: 1px solid #000;
            height: 40px;
            background-color: #ccc;
        }

        td {
            border: 1px solid #000;
            height: 30px;
            text-align: center;
            padding: 0 30px;
        }
    </style>
</head>

<body>
    <button class="addBtn">增加</button>
    <script>

        //js对象  json  ajax
        var data = {
            "header": ["姓名", "性别", "年龄", "描述"],
            "content": [
                { "name": "王琨", "gender": "女", "age": 30, "desc": "曾经是个王者" },
                { "name": "王梦茹", "gender": "女", "age": 18, "desc": "小仙女" },
                { "name": "罗杰", "gender": "男", "age": 23, "desc": "海贼王船长" },
                { "name": "袁小雨", "gender": "男", "age": 38, "desc": "打酱油的" },
                { "name": "黄张龙", "gender": "女", "age": 28, "desc": "社会我龙哥,人狠话不多" },
                { "name": "王浩", "gender": "男", "age": 23, "desc": "死基佬,死基佬" },
                { "name": "孙广明", "gender": "男", "age": 3, "desc": "学霸,大神" },
            ]
        }

        //1. 创建一个table,添加到body
        var mTable = document.createElement("table");
        document.body.appendChild(mTable);
        //2. 创建一个thead,添加到table
        var mThead = document.createElement("thead");
        mTable.appendChild(mThead);
        //2.1 创建一个tr,添加到thead
        var theadTr = document.createElement("tr");
        mThead.appendChild(theadTr);
        //2.2 创建多个th, 添加到tr中, 设置内容
        var headerList = data.header;
        for (let i = 0; i < headerList.length; i++) {
            var mTh = document.createElement("th");
            mTh.innerText = headerList[i];
            theadTr.appendChild(mTh);
        }
        //3. 创建tbody,添加到table
        var mTbody = document.createElement("tbody");
        mTable.appendChild(mTbody);
        //3.1 创建多个tr,添加tbody
        //3.2 创建多个td,添加到tr中, 设置内容
        //4.添加删除功能
        var contentList = data.content;
        for (let i = 0; i < contentList.length; i++) {
            var tr = document.createElement("tr");
            mTbody.appendChild(tr);
            var obj = contentList[i];
            for (const key in obj) {
                var td = document.createElement("td")
                tr.appendChild(td)
                td.innerText = obj[key]
            }
            var delTd = document.createElement("td");
            tr.appendChild(delTd);
            var btn = document.createElement("button");
            btn.innerText = "删除";
            delTd.appendChild(btn);
            btn.onclick = function () {
                mTbody.removeChild(this.parentNode.parentNode);
            }
        }
        var delTh = document.createElement("th");
        delTh.innerText = "删除"
        theadTr.appendChild(delTh)

        //5.新增表格
        var addBtn = document.getElementsByClassName("addBtn")
        console.log(addBtn)
        addBtn[0].onclick = function () {
            console.log("11111111")
            var addTr = document.createElement("tr");
            mTbody.appendChild(addTr);
            var nameTd = document.createElement("td");
            nameTd.innerText = "张三";
            addTr.appendChild(nameTd)
            var sexTd = document.createElement("td");
            sexTd.innerText = "男";
            addTr.appendChild(sexTd);
            var ageTd = document.createElement("td");
            ageTd.innerText = "18";
            addTr.appendChild(ageTd)
            var msTd = document.createElement("td");
            msTd.innerText = "我是描述";
            addTr.appendChild(msTd)
            var delTd = document.createElement("td");
            addTr.appendChild(delTd);
            var btn = document.createElement("button");
            btn.innerText = "删除";
            delTd.appendChild(btn);
            btn.onclick = function () {
                mTbody.removeChild(this.parentNode.parentNode);
            }
        }

    </script>
</body>

</html>

事件对象

捕获阶段、当前目标阶段、冒泡阶段、事件对象.eventPhase属性可以查看事件触发时所处的阶段。

1.对象的属性

在触发某个事件的时候,都会产生一个事件对象Event,这个对象中包含所有与事件相关的一些信息,包括触发事件的元素,事件的类型以及其他与事件相关的信息。

记录了鼠标位置信息的相关属性

screenX与screenY:光标相对于屏幕左上角的水平位置与垂直位置。
clientX与clientY:光标相对于可视区左上角的水平位置和垂直位置。
pageX与pageY:光标相对于网页(文档document)左上角的水平位置与垂直位置(推荐使用)

记录了键盘码的属性

event.keyCode:键盘按下的那个键的键盘码

常见的鼠标事件

onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onclick:单击事件
ondblclick:双击事件
onmouseover:鼠标经过事件
onmouseout:鼠标离开事件
onmousemove:鼠标移动事件
onfocus:鼠标获得焦点事件
onblur:鼠标失去焦点事件

常见的键盘事件

onkeydown:键盘按下时触发
onkeyup:键盘弹起时触发

案例

自定义弹窗,随着鼠标按下移动而移动。案例请到https://github.com/pengjunshan/WebPJS中查看。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      height: 30px;
      background: #036663;
      border-bottom: 1px solid #369;
      line-height: 30px;
      padding-left: 30px;
    }

    .nav a {
      color: #fff;
      text-align: center;
      font-size: 14px;
      text-decoration: none;

    }

    .d-box {
      width: 400px;
      height: 300px;
      border: 5px solid #eee;
      box-shadow: 2px 2px 2px 2px #666;
      position: absolute;
      top: 40%;
      left: 40%;
    }

    .hd {
      width: 100%;
      height: 25px;
      background-color: #7c9299;
      border-bottom: 1px solid #369;
      line-height: 25px;
      color: white;
      cursor: move;
    }

    #box_close {
      float: right;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息 (可以拖拽)
      <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
  </div>

  <script>
    var d_box = document.getElementById("d_box");
    var drop = document.getElementById("drop");

    /**
    * 给头部注册点击事件 获取鼠标点距离
    */
    drop.onmousedown = function (e) {
      var leftX = e.pageX - d_box.offsetLeft;
      var topY = e.pageY - d_box.offsetTop;

      /**
      * 给document注册移动事件 动态改变弹窗的位置
      */
      document.onmousemove = function (e) {
        d_box.style.left = e.pageX - leftX + "px";
        d_box.style.top = e.pageY - topY + "px";
      }
    }

    /**
    * 鼠标离开是取消掉document注册移动事件
    */
    drop.onmouseup = function () {
      document.onmousemove = null;
    }

  </script>
</body>

</html>
BOM对象

平时常用的对象有window对象、定时器、location对象、history对象。

1.window对象

  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,其实BOM中基本所有的属性和方法都是属性window的。
  • 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

2.定时器
2.1延时定时器

延时定时器可以让代码延迟一段时间之后才执行(定时炸弹)

/**
* 设置延时定时器
*/
//语法:setTimeOut(callback, time);
//参数1:回调函数,时间到了就会执行。
//参数2:延时的时间
//返回:定时器的id,用于清除
//示例:
var timer = setTimeOut(function(){
    //1秒后将执行的代码。
}, 1000);

/**
* 清除延时定时器
*/
//语法:clearTimeOut(timerId)
//参数:定时器id
//示例:
clearTimeOut(timer);//清除上面定义的定时器

2.2间歇定时器

间歇定时器让定时器每隔一段时间就会执行一次,并且会一直执行,直到清除定时器为止.

/**
* 设置间歇定时器
*/
//语法:var intervalID = setInterval(func, delay);
//参数1:重复执行的函数
//参数2:每次延迟的毫秒数
//返回:定时器的id,用于清除
//示例:
var timer = setInterval(function(){
    //重复执行的代码。
}, 1000);

/**
* 清除间歇定时器
*/
//语法:clearInterval(intervalID)
//参数:定时器id
//示例:
clearInterval(timer);//清除上面定义的定时器

3.location对象

location对象也是window的一个属性,location其实对应的就是浏览器中的地址栏。

location.href = “http://www.baidu.com”;//让页面跳转到百度首页
location.reload();//让页面重新加载
location.reload(true);//强制刷新,相当于ctrl+F5
location.reload(false);//刷新,相当于F5

console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数

5.其他对象

//后退:
history.back();
history.go(-1);
//前进:
history.forward();
history.go(1);

console.log(screen.width);//屏幕的宽度 
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度

6.案例

班级随机点名deml,案例请到https://github.com/pengjunshan/WebPJS中查看。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 50px auto;
        }

        td {
            padding: 15px;
            text-align: center;

            /*border: 1px solid #000;*/
        }

        input {
            width: 100px;
            height: 40px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <input type="button" value="开始" id="btn1">
    <input type="button" value="结束" id="btn2">
    <script>
        var list = [
            ["@", "@", "@", "老师", "@", "@", "杜嘉晖", "廖国藩", "王浩", "孙广明", "@"],
            ["@", "张萍", "叶继平", "沈阳", "许诚", "@", "罗杰", "武富云", "汪昊", "曹菁", "罗莉"],
            ["@", "黄泽民", "吴永霞", "刘娟", "李琛", "@", "贾海华", "葛玥", "袁小雨", "袁敏", "李佩芸", "窦松婷"],
            ["刘玉军", "尹钦", "冯梓硕", "阙文琦", "唐海华", "@", "许海燕", "张曼玉", "王正来", "顾军", "陈辉", "杨阳"],
            ["王梦茹", "胡佳丽", "何育娟", "郞文静", "刘莹", "@", "王继杰", "王寿南", "何家亮", "杨博文", "路雨", "梅瑶瑶"],
            ["张杰", "李明珠", "王淑华", "谭喜兵", "周云卓", "@", "张陆凯", "宋余乐", "王琨", "胡崇文", "谢凌辉", "王康"],
            ["@", "黄张龙", "王世波", "孙苏霞", "陈振", "@", "刘钦罡", "黄维", "吴伟强", "张童", "李斌"],
        ];

        //1. 创建table,添加到body


        var mTable = document.createElement("table");
        document.body.appendChild(mTable);

        //创建一个tds变量来存所有的td对象 来做随机点名的集合
        let tds = [];

        //2. 根据list的长度,创建tr,添加到table
        for (let i = 0; i < list.length; i++) {

            //根据list的长度来创建响应的tr 并添加到table中
            var mTr = document.createElement("tr");
            mTable.appendChild(mTr);

            //3. 根据list[i]的长度,创建td,添加到tr中
            let sonList = list[i];
            for (let i = 0; i < sonList.length; i++) {
                //根据sonList子集合来创建td 并添加到mTr中
                let mTd = document.createElement("td");
                mTr.appendChild(mTd);

                //如果有人名就设置背景色填充名字
                if (sonList[i] !== "@") {
                    mTd.innerText = sonList[i];
                    mTd.style.backgroundColor = "yellowgreen";

                    //如果是老师 就不添加到tds集合中
                    if (sonList[i] === "老师") {
                        continue;
                    }
                     //添加到tds集合中
                tds.push(mTd)
                }
            }
        }

        let tiemInterval;
        //开始点名
        document.getElementById("btn1").onclick = function () {

            //先清理定时器
            clearInterval(tiemInterval);
            tiemInterval = setInterval(function(){

                //先把所有的td背景色都还原
                for(let i=0; i<tds.length; i++){
                    tds[i].style.backgroundColor = "yellowgreen"
                }

                //随机一个td设置高亮
                let position = parseInt(Math.random() * tds.length);
                tds[position].style.backgroundColor = "hotpink";

            },100);

        }

        //结束点名 清楚定时器
        document.getElementById("btn2").onclick = function () {
            clearInterval(tiemInterval);
        }

    </script>
</body>

</html>
随机点名案例