学习webAPI第三天

动态元素创建的方法
元素创建的三种方式:

document.write(“内容和标签”) 有页面上的内容会被覆盖
对象.innerHTML = “内容和标签” 对象中的内容被覆盖
document.createElement(“标签的名字”) 创建完之后追加到父级元素对象.appendChild(“要添加的标签对象”) 添加到父元素的末尾

节点的介绍:
顶级对象 : 文档的对象 document
元素: 页面上所有的标签 element
节点: 页面上所有的内容(标签, 属性, 文本(文字, 换行, 空格))
根元素: html标签
节点的属性
.nodeType : 节点的类型 : 1–标签 2–属性 3–文本
.nodeName : 节点的名字 : 大写的标签名字–>标签节点小写的属性名字–>属性的节点 #text—>文本的节点
.nodeValue : 节点的值 : null—>标签节点属性的值—>属性节点文本的内容–>文本节点

tab选项卡代码:

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        .box {
            width: 400px;
            height: 400px;;
            margin: 100px auto;
        }

        .box .header span {
            width: 96px;
            height: 45px;
            line-height: 45px;
            display: inline-block;
            text-align: center;
            cursor: pointer;
            background-color: red;
        }

        .header span.selected {
            background-color: cyan;
        }

        .content li {
            list-style: none;
            height: 250px;
            background-color: gold;
            display: none;
        }

        .content li.select {
            display: block;
        }
    </style>
    </head>
    <body>
    <div class="box" id="box">
        <div class="header">
            <span class="selected">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="content">
            <ul>
                <li class="select">我是体育</li>
                <li>我是娱乐</li>
                <li>我是新闻</li>
                <li>我是综合</li>
            </ul>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        //获取所有的li标签
        var list = document.getElementsByTagName("li")
        //获取所有的span标签
        var spans = document.getElementsByTagName("span")
        //遍历点击事件
        for (var i = 0; i < spans.length; i++) {
            //在点击之前把索引值保存到span中
            spans[i].setAttribute("index",i)

        spans[i].onclick = function () {
            //1.把所有的span的样式全部移出
            for (var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class")
            }
            //2.让当前的被点击的span添加样式
            this.className = "selected"
            //3.获取span的索引值
            var num = this.getAttribute("index");
            //4.先让所有的li全部隐藏
            for (var k=0;k<list.length;k++){
                list[k].removeAttribute("class")
            }
            //让当前被点击的span对应的li显示
            list[num].className="select";
        }
    }
</script>
</body>
</html>

关于复选框全选的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧肉</td>
            <td>我家小馆</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>西红柿鸡蛋</td>
            <td>我家小馆</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>油炸榴莲</td>
            <td>我家小馆</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>清蒸龙虾</td>
            <td>我家小馆</td>
        </tr>

        </tbody>
    </table>
</div>
<script src="common.js"></script>
<script>
    var ins = my$("j_tb").getElementsByTagName("input")
    my$("j_cbAll").onclick = function () {
        for (var i = 0; i < ins.length; i++) {
            ins[i].checked = this.checked
        }
    }
    //分别给每一个table中的input框注册点击事件
    for (var j = 0; j < ins.length; j++) {
        ins[j].onclick = function () {
            //假设默认都被选中了
            var flag = true;
            for (var k=0;k<ins.length;k++){
                //判断复选框是否被选中
                //不被选中, 返回false ,取非, 得true
                if (!ins[k].checked){
                    flag=false;
                    break;
                }
            }
            my$("j_cbAll").checked=flag;
        }
    }


</script>

</body>
</html>

猜你喜欢