HTML+CSS补充

最新推荐文章于 2022-12-22 20:03:14 发布

weixin_30299539

最新推荐文章于 2022-12-22 20:03:14 发布

阅读量56

点赞数

原文链接：http://www.cnblogs.com/xone/p/6474261.html

版权

1. HTML+CSS补充

- 布局：

                <style>
                    .w{
                        width:980px;margin:0 auto;
                    }
                </style>
                <body>
                    <div style='background-color:red;'>
                        <div class='w'>dsfg</div>
                    </div>
                </body>

清除浮动

                .clearfix:after{
                    content: '.';
                    display: block;
                    clear: both;
                    visibility: hidden;
                    height: 0;
                }

响应式布局 @media

            <style>
            @media (min-width: 800px){
                .item{
                    width: 20%;
                    float: left;
                }
            }
            @media (max-width: 800px){
                .item{
                    width: 33.3%;
                    float: left;
                }
            }
            </style>

2. DOM事件

- 如何绑定事件（2）

- 如何阻止默认事件的发生（2），DOM绑定事件的时候，必须在前面加return

         方法一：
             <a href="http://www.baidu.com" οnclick="return func();">走一发</a>
             <script>
                function func() {
                    alert(123);
                    return false;
                }
             </script>
         方法二：
            <a href="http://www.google.com.hk" id="i1">走一发</a>
            <script>
                document.getElementById('i1').onclick = function () {
                    alert('123');
                    return false
                }
            </script>

匿名函数循环方式

setInterval(function () {},500)

实例：阻止空字符提交：

            <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>0){
                        return true;
                    }else{
                        alert('请输入内容222');
                        return false;
                    }
                };
            </script>

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

            <div id="i1">战争</div>
            <script>
                document.getElementById('i1').onclick = function () {
                    var v = this.innerHTML;
                    alert(v);
                }
            </script>

- 一个标签可以绑定多个不同的事件

实例：获取焦点

<body>
    <input type="text" value="请输入关键字" οnfοcus="fuckFocus(this);" οnblur="fuckBlur(this);"/>
    <input type="button" value="提交" />
    <script>
        /*
        当标签获取焦点时，执行该函数
         */
        function  fuckFocus(ths) {
            // value   innerText   innerHtml
            var v = ths.value;
            if(v == '请输入关键字'){
                ths.value = "";
            }
        }
        /*
        当标签失去焦点时
         */
        function fuckBlur(ths) {
            var v = ths.value;
            if(v.length == 0){
                ths.value = "请输入关键字";
            }
        }
    </script>
</body>

- 绑定多个相同的事件

    <div id="i1" οnclick="console.log(1);" >鸡建明</div>
    <script>

        document.getElementById('i1').addEventListener('click',function () {
            console.log(2);
        })
    </script>

- 事件执行顺序：

　　- 冒泡：从内向外查找

       <div id="i1" style="height: 400px;width: 400px;background-color: red" οnclick="alert(1);">
        <div id="i2" style="height: 300px;width: 300px;background-color: green" οnclick="alert(2);">
            <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" οnclick="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>

　　- event是当前事件的信息，

window.onkeydown监控全局事件

捕获用户按下ctrl键

<body>
    <input type="text" οnkeydοwn="func(this,event);" />

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

    </script>
</body>

补充

- 任何标签均可以提交表单

    <form id="f1" action="http://www.baidu.com">
        <input type="submit" value="提交" />
        <a οnclick="submitForm();">提交</a>
    </form>

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

window.location.href   获取当前url
window.location.href = "http://www.baidu.com"   跳转
window.location.reload() 重新加载当前页面

转载于:https://www.cnblogs.com/xone/p/6474261.html

weixin_30299539

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫