window对象、计时相关的函数、location对象、JS中查找标签的各种方式、节点操作、对类的操作、JQuery中标签的查找

window对象：

提示框:

计时相关的内置函数：

setTimeout()和clearTimeout()

setinterval()和clearinterval()

location对象：

JS中查找标签（直接查找）：

间接查找标签：

节点操作（对标签的操作）：

标签中对类的操作：

简单的几个案例巩固：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" class="c1">
<button id="d1">开始</button>
<button id="d2">结束</button>

<script>
    // 定义一个全局的变量
    var t = null;
    var inputEle = document.getElementsByClassName('c1')[0];

    function showTime() {
        var currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }
    var d1Ele = document.getElementById('d1');
    var d2Ele = document.getElementById('d2');
    d1Ele.onclick = function () {
        if (!t){  // 与 &&   或||  非!
            t = setInterval(showTime,1000)
        }

    };

    d2Ele.onclick = function () {
        clearInterval(t);
        t = null
    }






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

展示当前时间（计时器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green">
    <button id="d1">变色</button>

    <script>
        var b1Ele = document.getElementById('d1');
        var d1Ele = document.getElementsByTagName('div')[0];
        b1Ele.onclick = function () {
            d1Ele.classList.toggle('bg_green')
        }
    </script>
</div>
</body>
</html>

JS操作开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">
    <option value="">---请选择---</option>
</select>
<select name="" id="d2">
    <option value="">---请选择---</option>
</select>

<script>
    var data = {"河北省": ["廊坊", "邯郸"],
                "北京": ["朝阳区", "海淀区"],
                "山东": ["威海市", "烟台市"],
                "上海": ["静安区","黄浦区"],
                "深圳": ["南山区","龙岗区"]
    };
    var seEle = document.getElementById('d1');
    var se2Ele = document.getElementById('d2');
    for (var i in data){
        // 创建option标签
        var optEle = document.createElement('option');
        // 给标签添加内部文本值
        optEle.innerText = i;
        // 给标签设置value属性值
        optEle.value = i;
        // 将创建好的option标签添加到第一个select框中
        seEle.appendChild(optEle)
    }

    // 给第一个select框绑定change事件
    seEle.onchange = function () {
        // 选择哪一个省value值就是哪一个
        var currentPro = seEle.value;
        var currentCityList = data[currentPro];
        // 先清空第二个select框中所有的option标签
        se2Ele.innerHTML = '';
        var opttEle = document.createElement('option');
        opttEle.innerText = '---请选择---';
        se2Ele.appendChild(opttEle);
        // 循环遍历数组
        for (let i=0;i<currentCityList.length;i++){

            // 动态创建标签
            var optEle = document.createElement('option');
            optEle.innerText = currentCityList[i];
            optEle.value = currentCityList[i];
            // 将创建出来的option标签添加到第二个select框中
            se2Ele.appendChild(optEle)
        }
    }
</script>
</body>
</html>

省市联动的实现

JQuery简单介绍和标签选择方式：

在Pycharm中设置模板方式：

模态框实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 9;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 10;
            margin-top: -100px;
            margin-left: -200px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div class="c1">
    我是被压在最下的
</div>
<button class="c2">叫人</button>
<div class="cover hidden"></div>
<div class="modal hidden">
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>

    <button class="cancel">取消</button>
</div>

<script>
    var b1Ele = $('.c2')[0];
    b1Ele.onclick = function () {
        // 将纱布和白框的hidden类属性移除
        $('.cover').removeClass('hidden');  // xxx.classList.remove('hidden')
        $('.modal').removeClass('hidden')
    };
    var cancelEle = $('.cancel')[0];
    cancelEle.onclick = function () {
        $('.cover').addClass('hidden');  // xxx.classList.add('hidden')
        $('.modal').addClass('hidden')
    }
</script>
</body>
</html>

模态框示例

JQuery中标签查找：

按属性查找：

JQuery中操作CSS样式：