我的传智播客之javaweb_day04学习总结

最新推荐文章于 2021-02-20 20:38:33 发布

菜鸡小钟

最新推荐文章于 2021-02-20 20:38:33 发布

阅读量294

点赞数

分类专栏：关于传智播客javaweb的学习笔记

本文链接：https://blog.csdn.net/zhongfupeng/article/details/61414028

版权

关于传智播客javaweb的学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

案例一: 在末尾添加节点

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul id="ulid">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <input type="button" value="add" onclick="add1()">
</body>
<script type="text/javascript">
    function add1() {
        // 获取ul标签
        var ul1 = document.getElementById("ulid");
        // 创建li标签
        var li1 = document.createElement("li");
        // 创建文本
        var text1 = document.createTextNode("555");
        // 把文本加入到li下
        li1.appendChild(text1);
        // 把li加入到ul下
        ul1.appendChild(li1);
    }
</script>
</html>

元素对象(element对象)

要操作element对象，首先必须要获取到element。使用document里面相应的方法获取。
方法
- 获取属性里面的值
- 设置属性里面的值
- 删除属性
- 获取标签下的子标签

// 获取属性里面的值
getAttribute("属性名称");
input1.getAttribute("class");
// 设置属性里面的值
setAttribute("属性名称","属性值");
// 删除属性
removeAttribute("属性名称"); // 不能删除value
// 获取标签下的子标签
// 使用属性 childNodes,但是这个属性兼容性很差
// 获得标签下子标签的唯一有效办法,使用getElementsByTagName()方法

Node对象的属性一

nodeName
nodeType
nodeValue

使用dom解析html时，需要把html里面的标签,属性和文本封装成对象。

标签节点对应的值
- nodeType: 1
- nodeName: 大写标签名称
- nodeValue: null
属性节点对应的值
- nodeType: 2
- nodeName: 属性的名称
- nodeValue: 属性的值
文本节点对应的值
- nodeType: 3
- nodeName: #text
- nodeValue: 文本内容

<span id="spanid">哈哈呵呵</span>

// 获得标签对象
var span1 = document.getElementById("spanid");
span1.nodeType; // 1
span1.nodeName; // SPAN
span1.nodeValue; // null
// 属性
var id1 = span1.getAttributeNode("id");
id1.nodeType; // 2
id1.nodeName; // id
id1.nodeValue; // spanid

// 获取文本
var text1 = span1.firstChild;
text1.nodeType; // 3
text1.nodeName; // #text
text1.nodeValue; // 哈哈呵呵

Node对象的属性二

父节点
- parentNode
子节点
- childNodes:得到所有子节点,但是兼容性很差
- firstChild:获取第一个子节点
- lastChild:获取最后一个子节点
同辈节点
- nextSibling:获取下一个兄弟节点
- previousSibling:获取上一个兄弟节点

操作dom树

appendChild()：添加子节点到末尾
- 特点：类似于剪切粘贴的效果
insertBefore(newNode, oldNode)方法：在某个节点之前插入一个新的节点
removeChild()：删除节点
- 通过父节点删除,不能自己删除自己
replaceChild(newNode, oldNode)：替换节点
cloneNode(boolean)：复制节点，boolean判断是否复制子节点

innerHTML属性

这个属性不是dom的组成部分,但是大多数浏览器都支持
- 第一个作用: 获取文本内容
- 第二个内容: 向标签里面设置内容(可以是html代码)

// 获取div
var div1 = document.getElementById("div1");
// 设置内容
div1.innerHTML = "<h1>AAA</h1>";

案例二:动态显示时间

得到当前的时间

var date = new Date();
var d1 = date.toLocaleString();

需要让页面每一秒获取时间：setInterval方法
显示到页面上
- 每一秒向div里面写一次时间，使用innerHTML属性

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="times"></div>
</body>
<script type="text/javascript">
    function getD1 () {
        // 当前时间
        var date = new Date();
        // 格式化
        var dateStr = date.toLocaleString();
        // 获取div
        var div1 = document.getElementById("times");
        // 写入div
        div1.innerHTML = dateStr; 
    }
    // 定时器
    setInterval("getD1()", 1000);
</script>
</html>

案例三:全选练习

使用复选框上面一个属性判断是否选中
- checked属性：true/false
创建一个页面
- 复选框和按钮：四个复选框表示爱好。还有一个复选框操作全选和全不选，也有一个事件。
- 三个按钮,分别有事件：全选、全不选、反选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="checkbox" id="cb1" onclick="selAll(this.checked)">全选/全不选
    <br>
    <input type="checkbox" name="love">篮球
    <input type="checkbox" name="love">排球
    <input type="checkbox" name="love">足球
    <input type="checkbox" name="love">羽毛球
    <br>
    <input type="button" value="全选" onclick="selAll(true)">
    <input type="button" value="全不选" onclick="selAll(false)">
    <input type="button" value="反选" onclick="selOther()">
</body>
<script type="text/javascript">
    // 遍历复选框数组,设置选中状态
    function selAll (state) {
        // 获取所有复选框
        var checkboxs = document.getElementsByName("love");
        // 遍历复选框数组,把state状态赋给复选框选中状态
        for (var i = 0; i < checkboxs.length; i++) {
            var cb = checkboxs[i];
            cb.checked = state;
        }
    }

    // 反选复选框
    function selOther () {
        // 获取所有复选框
        var checkboxs = document.getElementsByName("love");
        // 遍历复选框数组,反选复选框
        for (var i = 0; i < checkboxs.length; i++) {
            var cb = checkboxs[i];
            cb.checked = !cb.checked;
        }
    }
</script>
</html>

案例四: 下拉列表左右选择

下拉选择框

<select multiple="multiple">
    <option></option>
    <option></option>
</select>

创建一个页面
- 两个下拉选择框：设置属性 mnultiple属性
- 四个按钮,有事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="float: left;">
        <select id="left" multiple="multiple" style="width: 100px;height: 100px">
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
            <option>DDD</option>
        </select>
        <br>
        <input type="button" value="选中添加到右边" onclick="selOnetoAnOther('left', 'right')">
        <br>
        <input type="button" value="全部添加到右边" onclick="selAlltoAnOther('left', 'right')">
    </div>
    <div>
        <select id="right" multiple="multiple" style="width: 100px;height: 100px">
            <option>FFF</option>
            <option>GGG</option>
        </select>
        <br>
        <input type="button" value="选中添加到左边" onclick="selOnetoAnOther('right', 'left')">
        <br>
        <input type="button" value="全部添加到左边" onclick="selAlltoAnOther('right', 'left')">
    </div>
</body>
<script type="text/javascript">
    // 选中源select里的option添加到目标select
    function selOnetoAnOther (src, des) {
        // 获取源select
        var one = document.getElementById(src);
        // 获取目标select
        var anOther = document.getElementById(des);
        // 获取源select的所有option
        var ops = one.getElementsByTagName("option");
        // 遍历源select的option,把选中的option添加到目标select中
        for (var i = 0; i < ops.length; i++) {
            if (ops[i].selected) {
                anOther.appendChild(ops[i]);
                i--;
            }
        }
    }
    // 将源select里全部option添加到目标select
    function selAlltoAnOther (src, des) {
        // 获取源select
        var one = document.getElementById(src);
        // 获取目标select
        var anOther = document.getElementById(des);
        // 获取源select的所有option
        var ops = one.getElementsByTagName("option");
        // 遍历源select的option,把每个option添加到目标select中
        for (var i = 0; i < ops.length; i++) {
            anOther.appendChild(ops[i]);
            i--;
        }
    }
</script>
</html>

案例五:省市联动

创建一个页面,只有两个下拉选择框
在第一个下拉框有一个事件:改变事件 onChange
- 方法add1(this.value); 表示当前改变的option里面的value值
创建一个二维数组,存储数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select id="country" onchange="changeCityByCountry(this.value)">
        <option value="0">--请选择--</option>
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">-日本</option>
    </select>

    <select id="city">
        <option value="0">--请选择--</option>
    </select>
</body>
<script type="text/javascript">
    // 定义一个二维数组,每个元素代表一组城市
    var citys = new Array(4);
    citys[0] = ["--请选择--"];
    citys[1] = ["北京", "上海", "佛山", "深圳"];
    citys[2] = ["休斯顿", "华盛顿", "金州"];
    citys[3] = ["东京", "广岛", "长崎"];

    function changeCityByCountry (countryVal) {
        // 获取city下拉列表
        var citySel = document.getElementById("city");
        // 清空city列表
        citySel.length = 0;
        // 获取当前国家里城市的数组
        var theCountryCitys = citys[countryVal];
        // 遍历当前城市数组,将每个城市添加到下拉列表下
        for (var i = 0; i < theCountryCitys.length; i++) {
            // 创建option节点
            var op = document.createElement("option");
            op.innerHTML = theCountryCitys[i];
            // 添加option到city列表中
            citySel.appendChild(op);
        }
     } 
</script>
</html>

案例六:动态生成表格

创建一个页面: 两个输入框和一个按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    行:<input type="text" id="rows">
    列:<input type="text" id="cols">
    <br>
    <input type="button" value="生成" onclick="add1()">
    <div id="div1">

    </div>
</body>
<script type="text/javascript">
    function add1 () {
        // 获取行
        var rows = document.getElementById("rows").value;
        // 获取列
        var cols = document.getElementById("cols").value;

        // 生成表格代码
        var tab = "<table>"
        // 生成行
        for (var i = 0; i < rows; i++) {
            tab += "<tr>";
            // 生成列
            for (var j = 0; j < cols; j++) {
                tab += "<td>";
                tab += "aaa"
                tab += "</td>"
            }
            tab += "</tr>";
        }
        tab += "</table";
        // 获取div1
        var div1 = document.getElementById("div1");
        // 将表格代码添加到div中
        div1.innerHTML = tab;
    }
</script>
</html>