JS七

发表于 | 分类于

DOM节点操作

节点操作

html

1
2
<div id="div1">div1</div>
<div id="div2">div2</div>

script

1
2
3
4
5
6
7
8
9
10
11
var li = document.createElement("li");   //创建节点
li.innerHTML = "jie";
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.appendChild(li);              //增加子节点
var li2 = li.cloneNode(true);      //复制节点
div2.appendChild(li2);
div2.removeChild(li2);            //移除节点

动态生成小圆点

html

1
2
3
4
5
6
7
8
9
10
11
12
<div class="box" id="scroll">
    <div class="slider">
        <ul id="ul">
            <li><img src="images/11.jpg" alt=""/></li>
            <li><img src="images/22.jpg" alt=""/></li>
            <li><img src="images/33.jpg" alt=""/></li>
            <li><img src="images/44.jpg" alt=""/></li>
            <li><img src="images/55.jpg" alt=""/></li>
            <li><img src="images/66.jpg" alt=""/></li>
        </ul>
    </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*{
    padding: 0;
    margin: 0;
}
.box {
    width: 730px;
    height: 454px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
}
.circle {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    bottom: 10px;
}
.circle span {
    float: left;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: pink;
    text-align: center;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.circle span.current {
    background-color: purple;
}
.jie {
    color: red;
}

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function(){
    var scroll = document.getElementById("scroll");
    var circle = document.createElement("div");
    circle.setAttribute("class","circle jie");
    scroll.appendChild(circle);
    var ul = document.getElementById("ul");
    var lis = ul.children;
    for(var i=0;i<lis.length;i++){
        var newspan = document.createElement("span");
        newspan.innerHTML = i+1;
        circle.appendChild(newspan);
    }
    var child = circle.children;
    child[0].setAttribute("class","current");
}

微博发布

html

1
2
3
4
5
<div class="box">
    微博发布:
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.box{
    margin: 100px auto;
    width: 600px;
    height: auto;
    border: 1px solid #333;
    padding: 30px 0;
}
textarea {
    width: 450px;
    resize: none;
}
.box li {
    width: 450px;
    line-height: 30px;
    border-bottom: 1px dashed #ccc;
    margin-left: 80px;
}
.box li a{
    float: right;
}

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
window.onload = function(){
    var btn = document.getElementsByTagName("button")[0];
    var txt = document.getElementsByTagName("textarea")[0];
    var ul = document.createElement("ul");     // 创建ul
    btn.parentNode.appendChild(ul);             //追加到  他的父亲里面
    btn.onclick = function(){
        if(txt.value == ""){
            alert("输入不能为空");
            return false;                     // 终止函数执行
        }
        var newli = document.createElement("li");
        newli.innerHTML = txt.value + "<a href='javascript:;'>删除</a>";
        txt.value = "";                 // 清空 表单
        var lis = ul.children;         // 获得有多少个li
        //  if else  这个片段  让我们新发布的内容 最上显示
        if(lis.length == 0){          //  第一次创建
            ul.appendChild(newli);    // ul 的后面追加
        }else {
            ul.insertBefore(newli,lis[0]);       // 每次生成的新的li 放到第一个li 的前面
        }
        var as = document.getElementsByTagName("a");       // 获得所e有的 a
        for(var i=0;i<as.length;i++){
            as[i].onclick = function(){
                ul.removeChild(this.parentNode);    // a 的粑粑是 li
            }
        }
    }
}