4月8日作业将节点添加或移动到目标节点 - 学习作业

首页 > 博客列表 > 4月8日作业将节点添加或移动到目标节点

博主信息

博文 60

粉丝 0

访问量 36312

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>地铁发车顺序表</title>
    <style type="text/css">
        h2{
            text-align:center;
        }

        li{
            font-size:1.4em;
            background-color: lightskyblue;
            width: 300px;
            margin-bottom: 10px;
            border-radius:25%;
            box-shadow:2px 5px 10px rgba(0,0,0,0.5);
            text-align: center;
        }

    </style>
</head>
<body>
        <h2>地铁发车顺序表</h2>
      <ul>
                 <li>01号列车</li>
                 <li>02号列车</li>
                 <li>03号列车</li>
                 <li>04号列车</li>
                 <li>05号列车</li>
             </ul>
        <button>加末班车appendTo()</button>
        <button>加首班车prependTo()</button>
        <button>2号车后加塞insertAfter()</button>
        <button>5号前加塞insertBefore()</button>

        <p style="background-color: orange;width: 300px;">加班末车appendTo()移动到位</li>
        <p style="background-color: orange;width: 300px;">加班首车prependTo()移动到位</li>
        <p style="background-color: orange;width: 300px;">临时调配车insertAfter()移动到位</li>
        <p style="background-color: orange;width: 300px;">插队车insertBefore()移动到位</li>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $('button').eq(0).on('click',function(){
                var li = $('<li>')
                .css('background-color','lightgreen')
                .html('我是末班车')
                .appendTo($('ul')) //插入到目标元素内容的后面
                $('p:first').appendTo($('ul'))//移动操作
            })

            $('button').eq(1).on('click',function(){
                var li = $('<li>')
                .css('background-color','lightgreen')
                .html('我是首班车')
                .prependTo($('ul')) //插入到目标元素内容的前面
                $('p:eq(1)').prependTo($('ul'))//移动操作
            })


            $('button').eq(2).on('click',function(){
                var li = $('<li>')
                .css('background-color','lightgreen')
                .html('我是加班车')
                .insertAfter($('li:eq(1)')) //插入到目标元素内容的前面
                 $('p:eq(2)').insertAfter($('li:eq(2)'))//移动操作
            })

             $('button').eq(3).on('click',function(){
                var li = $('<li>')
                .css('background-color','lightgreen')
                .html('我是后加班车')
                .insertBefore($('li:eq(4)')) //插入到目标元素内容的前面
                $('p:eq(3)').insertBefore($('li:eq(4)'))//移动操作
            })




    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：