2019-11-11（1）

一、
任务8：遍历节点
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {$ ("#childrenNum").click(function(){
var ulchildrenNodes = $("ul").children(); alert(ulchildrenNodes.length); });$ ("#brotherNode").click(function(){
// $("li:eq(1)").next().addClass("orange");$ ("li:eq(1)").prev().addClass("orange");
$("li:eq(1)").siblings().addClass("orange"); });$ ("#fatherNode").click(function(){
// $("li:eq(1)").next().addClass("orange");$ ("li:eq(1)").parents().addClass("orange");
});
$("#eachFun").click(function(){$ ("li").each(function(index, element) {
var str = $(this).text()+"<br/>";$ ("section").append(str);
});
});
});
</script>
<style type="text/css" >
.hot{ color:#F00;}
a{ color:#000;
text-decoration:none;
}
.orange{
background: #c3910b;
}
.orange a{
color: #ffffff;
}
</style>

</head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
<ul>
<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
<li><a href="#">苹果iPad mini</a></li>
<li><a href="#">三星GALAXY Ⅲ</a></li>
<li><a href="#">苹果iPhone 5</a></li>
</ul>
</section>
<p>
<input type="button" value="获得子节点数" id="childrenNum"/>
<input type="button" value="为同辈元素添加样式" id="brotherNode"/>
<input type="button" value="为父元素添加样式" id="fatherNode"/>

<input type="button" value="each函数的使用" id="eachFun"/>
</p>
</body>
</html>

二、
任务9：以链式方式创建的折叠垂直导航菜单
代码：
1.html文件
<style type="text/css">
#menu {
width: 150px;
overflow: hidden;
background-color: white;
text-align: center;
font-size: 14px;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}

        #menu dt {
            background-color: blue;
            color: #fff;
            cursor: pointer;
        }

        #menu dd {
            color: #fff;
            display: none;
            background-color: lightgreen;
            margin-bottom: 1px;
        }

            #menu dd dl dt {
                border-top: 1px solid #dedede;
                background: #f2f2f2;
                height: 25px;
                line-height: 25px;
                font-weight: bold;
            }


        #menu dt.hover {
            background: green;
        }

    dl, dd, dt {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #333;
    }

    dt {
        height: 28px;
        line-height: 28px;
        margin-bottom: 1px;
    }

    dd a:hover {
        text-decoration: none;
        color: white;
        background-color: red;
    }

    dd a {
        text-decoration: none;
    }

    dd a {
        display: block;
        height: 28px;
        line-height: 28px;
        color: #42556B;
        text-indent: 0px;
        overflow: hidden;
    }
</style>

    </dl>
    <dl>
        <dt>数码频道</dt>
        <dd><a href="#">手机卖场</a></dd>
        <dd><a href="#">电脑卖场</a></dd>
        <dd><a href="#">平板卖场</a></dd>
    </dl>
</div>

</body>
</html>

三、
任务10：互换在表格table中的输入框和文本标签
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function Modify(obj){
var myBtn = $(obj).html(); if(myBtn=='修改'){$ (".edit").each(function(index, element) {
var oldValue= $(this).text();$ (this).html("<input type='text' value='"+oldValue+"' name='editname' class='edit' />");
});
$(obj).html("保存"); }else if(myBtn=='保存'){$ ("input[name='editname']").each(function(index, element) {
var newValue = $(this).val();$ (this).parent().html(newValue);
});
$(obj).html("修改");
}
}
</script>
<style type="text/css">
table {
text-align: center;
font-size: 14px;
}

        table > thead > tr > th {
            font-weight: normal;
        }

    .text-right {
        padding-right: 73px;
        text-align: right;
    }

    .text {
        width: 50px;
        height: 15px;
        border: 1px solid #ddd;
        text-align: center;
    }

    td {
        background-color: #ddd;
    }

    th {
        background-color: #ffd800;
    }
</style>

</head>

<body>
<table>
<thead>
<tr>
<th width="300">商品名称</th>
<th width="100">单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>西班牙进口魅谷干红葡萄酒</td>
<td class="edit">1800</td>
</tr>
<tr>
<td>西班牙宜兰树油画系列干红葡萄酒精品套装</td>
<td class="edit">2900</td>
</tr>
<tr>
<td>法国进口AOC路易威顿马尔贝克干红葡萄酒</td>
<td class="edit">2500</td>
</tr>
<tr>
<td>西班牙进口金蝶干红葡萄</td>
<td class="edit">2200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
</th>
<th >
<button type="button" class="btn" onclick="Modify(this)" style="width:60px;">修改</button>
</th>
</tr>
</tfoot>
</table>

</body>

</html>

2019-11-11（1）

2019-11-11（1）

相关阅读更多精彩内容

友情链接更多精彩内容