day 15

1.input标签默认内容

Title

男: 女:

广州: 北京: 上海:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input value="默认内容"/>
    <hr />
    <textarea>默认内容</textarea>
    <hr />
    <select>
        <option>111</option>
        <option>222</option>
        <option selected="selected">333</option>
    </select>
    <hr />
    男: <input type="radio" name="r1" checked="checked"/>
    女: <input type="radio" name="r1"/>
    <hr />
    广州: <input type="checkbox" checked="checked" name="e1">
    北京: <input type="checkbox"  name="e1">
    上海: <input type="checkbox" checked="checked" name="e1">  
<body>

CSS自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[name='a'] {
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1"  name="a">css自定义属性</div>
</body>
</html>

CSS漂浮(之前的形式比较low)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left {
            float: left;
        }
        .clean {
            background-color: red;
        }
        /*在类clean后边的样式*/
        .clean:after {
            /*在clean类后边加上内容"lll"*/
            content: 'lll';
            /*这个必不可少*/
            clear: both;
            /*显示为块级标签*/
            display: block;
            /*去掉lll占的红色背景*/
            height: 0;
            /*隐藏内容"lll"*/
            visibility: hidden;
        }

    </style>
</head>
<body>
    <div class="clean">
        <div class="left" style="height: 60px;background-color: greenyellow">123</div>
        <div class="left">456</div>
    </div>
    <!--<div class="sanjiao"></div>-->
</body>
</html>

每个标签都有字标签，其中两个是before、after，分别是在其前、后的样式。上篇博客是在两个div下边直接写一个clear:both，这个示例和那个差不多，先加一点字段占用样式(这里是背景色)，然后改为块级、在把占用的样式删除。

CSS之三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon {
            display: inline-block;
            border-bottom: 20px solid red;
            border-top: 20px solid transparent;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

Title

JS之全选，反选，取消demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery-3.1.0.js"></script>
<body>
    <input type="button" onclick="CheckAll();" value="全选"/>
    <input type="button" onclick="CheckReverse();" value="反选"/>
    <input type="button" onclick="CheckCancel();" value="取消"/>
    <table border="1">
        <thead></thead>
        <tbody id="tb1">
            <tr>
                <td>11</td>
                <td><input type="checkbox"/></td>
            </tr>
            <tr>
                <td>22</td>
                <td><input type="checkbox"/></td>
            </tr>
            <tr>
                <td>33</td>
                <td><input type="checkbox"/></td>
            </tr>
        </tbody>
    </table>


<script>
        function CheckAll(){
//            $('#tb1').find(':checkbox').attr('checked','checked')
            $('#tb1').find(':checkbox').prop('checked',true);

        }
        function CheckReverse(){
            //先找到标签,如果选中,取消,未选中,选中
            $('#tb1').find(':checkbox').each(function(){
               // $(this) =  每一个复选框
                if($(this).prop('checked')){
                    $(this).prop('checked',false)
                }else {
                    $(this).prop('checked',true)
                }
            });

        }
        function CheckCancel(){
           // $('#tb1').find(':checkbox').removeAttr('checked');
            $('#tb1').find(':checkbox').prop('checked',false);

        }
</script>
</body>
</html>