html+css+dom补充

补充1：页面布局

一般像京东主页左侧右侧都留有空白，用margin：0 auto居中，一般.w。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .w{
            width: 980px;
            margin: 0 auto;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div style="background-color: black;color: white">
        <div class="w">标题</div>
    </div>
    <div>
        <div class="w">内容</div>
    </div>
</body>
</html>

补充2：页面清除浮动

之前都是用clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
 </style> </head> <body> <div style="background-color: #3ba354" class="clearfix"> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> </div> </body> </html>

.clearfix:after对clearfix类里面的孩子做点什么

display:none隐藏，位置都不留　　visibility：hidden隐藏，位置留着

一般页面都需要，放在commons.css,引入

补充3：页面响应式布局

页面布局随着页面大小变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media (min-width: 800px) {
            .item {
                float: left;
                width: 20%;
            }
        }
        @media (max-width: 600px) {
            .item{
                float: left;
                width: 25%;
            }
        }
    </style>
</head>
<body>
    <div class="item">
        <label>用户名</label>
        <input type="text">
    </div>
    <div  class="item">
        <label>用户名</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名</label>
        <input type="text">
    </div>
    <div class="item">
        <label>用户名</label>
        <input type="text">
    </div>
</body>
</html>

 补充四：事件绑定的两种方式

阻止默认事件的发生 return false

方式1（直接在标签中绑定事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>

    <a href="http://www.baidu.com" onclick="return func();">揍你</a>

    <script>
        function  func() {
            alert(123);
            return false;
        }
    </script>
</body>
</html>

方式2（在js中找到这个标签再绑定事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>

    <a href="http://www.baidu.com" id="i1">揍你</a>
    <script>
        document.getElementById('i1').onclick = function () {
            alert(123);
　　　　　　　return false;
        }
    </script>
</body>
</html>

应用：用户没输入就不让他往后台发

input标签取值用value，其他标签用innerText

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="user" name="user"/>
        <input type="submit" value="提交" onclick="return func()"/>

    </form>
    <script>
        function func() {
            var v = document.getElementById('user').value;
            if (v.length){
                return true;
            }else {
                alert('请输入内容')
                return false;
            }
        }
    </script>
</body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="user" name="user"/>
        <input type="submit" id="sb" value="提交"/>
    </form>
    <script>
        document.getElementById('sb').onclick = function () {
            var v = document.getElementById('user').value;
            if (v.length){
                return true
            }else {
                alert('输入内容');
                return false
            }
        }
    </script>
</body>
</html>

补充五：this

this表示当前触发事件的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div id="i1">-->
        <!--whatever-->
    <!--</div>-->
    <div onclick="oclick(this);">anyway</div>
</body>
    <!--<script>-->
        <!--document.getElementById('i1').onclick = function () {-->
            <!--var v = this.innerHTML-->
            <!--alert(v)-->
        <!--}-->
    <!--</script>-->
    <script>
        function oclick(sel){
            var v = sel.innerHTML;
            alert(v);
        }
    </script>
</html>

应用：文本框有默认值，鼠标放在文本框里面，默认值消失，鼠标点文本框外，默认值出现。

用了两种绑定事件，一个标签可以绑定多个不同的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<input type="text" value="请输入关键字" onfocus="ofocus(this);"onblur="oblur(this);"/>-->
    <input id="test" type="text" value="请输入关键字"/>

</body>
    <script>
//        function ofocus(ths) {
//            var v = ths.value;
//            if (v == '请输入关键字'){
//                ths.value = '';
//            }
//        }
//        function oblur(ths){
//            var v = ths.value;
//            if(v.length==0){
//                ths.value='请输入关键字'
//            }
//        }
        document.getElementById('test').onfocus = function () {
            var v = this.value;
            if (v == '请输入关键字'){
                this.value = '';
            }
        }
        document.getElementById('test').onblur = function () {
            var v = this.value;
            if(v.length==0){
                this.value = '请输入关键字'
            }
        }
    </script>
</html>

补充六：一个标签绑定多个相同的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>

</head>
<body>

    <div id="i1" onclick="console.log(1);" >鸡建明</div>
    <script>
//        document.getElementById('i1').onclick = function () {
//            console.log(2);
//        }
        document.getElementById('i1').addEventListener('click',function () {
            console.log(2);
        })
    </script>
</body>
</html>

补充七：事件执行顺序

捕获 true

冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>
       <!--<div id="i1" style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">-->
        <!--<div id="i2" style="height: 300px;width: 300px;background-color: green" onclick="alert(2);">-->
            <!--<div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" onclick="alert(3);"></div>-->
        <!--</div>-->
    <!--</div>-->
    <div id="i1" style="height: 400px;width: 400px;background-color: red" >
        <div id="i2" style="height: 300px;width: 300px;background-color: green" >
            <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" ></div>
        </div>
    </div>

    <script>
            document.getElementById('i1').addEventListener('click',function () {alert(1);},true);
            document.getElementById('i2').addEventListener('click',function () {
                alert(2);
            },true);
            document.getElementById('i3').addEventListener('click',function () {
                alert(3);
            },true);
    </script>

</body>
</html>

补充八：event当前事件的信息

全局绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>
    <input type="text" onkeydown="func(this,event);" />

    <script>
        function  func(ths,e) {
            console.log(ths,e);
        }
        window.onkeydown = function(e){
            console.log(e);
        }

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

补充九：表单提交

1.submit

2.js  找到form这个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交</a>
    </form>

    <script>
            function submitForm() {
                document.getElementById('f1').submit();
            }
    </script>
</body>
</html>

 

window.location.href   获取当前url
window.location.href = "http://www.baidu.com"   跳转
window.location.reload() 重新加载当前页面
posted @ 2017-02-27 11:05  hongpeng0209  阅读(226)  评论(0)  编辑  收藏  举报