a个人经验总结

个人经验总结

js中事件有个 on前缀比如 onclick onmousemove

jq中事件省略 on 如 click mousemove

html引入其他页面

<iframe src="1.html" frameborder="0" width="1205px" height="305px"></iframe>

jquery 中的setInterval()

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/jquery.min.js"></script>

    <script>

        $(function () {

            // setInterval("move()",20);   // 原生js

            /*setInterval(function () {    // 使用jq，这里要再加 function(){ move();}

                move();

            },200);*/

            function move(){

                a=$("#a");

                var val=parseInt(a.text());

                a.text(val+1);

            }

            setInterval(move,300);       // 使用jq 直接 move ! 连双引号都不用

        });

    </script>

</head>

<body>

<div id="a" style="position: relative;">0</div>

</body>

</html>

screenX clientX pageX offsetX区别：

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

pageX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，滚动条滚动时值会增加

clientX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

offsetX: 参照点是对应div 内部的左上角为顶点

<!DOCTYPE html >

<html lang="en">

<head>

    <title></title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style>

        body {margin: 0;padding: 0;}

        .div {

            text-align: center;

            font-size: 24px;

            height: 300px;

            width: 1300px;

            line-height: 300px;

            color: yellow;

        }

        #d1 {background-color: red;}

        #d2 {background-color: green;}

        #d3 {background-color: blue;}

        #d4 {

            position: absolute;

            background-color: yellow;

            height: 150px;

            width: 120px;

            top: 0;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            window.onscroll = function () {

                $("#d4").css("top", getScrollTop());

            };

            document.onmousemove = function (e) {

                if (e == null) {

                    e = window.event;

                }

                var html = "screenX:" + e.screenX + "<br/>";

                html += "screenY:" + e.screenY + "<br/><br/>";

                html += "clientX:" + e.clientX + "<br/>";

                html += "clientY:" + e.clientY + "<br/><br/>";

                if (e.pageX == null) {

                    html += "pageX:" + e.x + "<br/>";

                    html += "pageY:" + e.y + "<br/>";

                } else {

                    html += "pageX:" + e.pageX + "<br/>";

                    html += "pageY:" + e.pageY + "<br/>";

                }

                $("#d4").html(html);

            };

        });

        function getScrollTop() {

            var top = (document.documentElement && document.documentElement.scrollTop) ||

                    document.body.scrollTop;

            return top;

        }

    </script>

</head>

<body>

<div id="d1" class="div">div1 height:300px width:1300px</div>

<div id="d2" class="div">div2 height:300px width:1300px</div>

<div id="d3" class="div">div3 height:300px width:1300px</div>

<div id="d4"></div>

</body>

</html>

offsetX

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        window.onload= function () {

           var div=document.getElementById('div2');

            var  p=document.getElementById('p1');

            div.onmousemove= function (e) {

                p.innerHTML= e.offsetX+" "+ e.offsetY;

            }

        }

    </script>

</head>

<body>

    <div id="div2">

        <div style="width:200px;height: 200px; background-color: #016aeb;float:left;"></div>

        <div style="width:200px;height: 200px; background-color: #269801;float:left;"></div>

    </div>

<p id="p1" style="clear:both;"></p>

</body>

</html>

this = e.currentTarget e.target

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    </head>

<body>

<div id="outer" style="background:#099">

    click outer

    <p id="inner" style="background:#9C0">click inner</p>

    <br>

</div>

<script type="text/javascript">

    function G(id){

        return document.getElementById(id);

    }

    function addEvent(obj, ev, handler){

        if(window.attachEvent){

            obj.attachEvent("on" + ev, handler);

        }else if(window.addEventListener){

            obj.addEventListener(ev, handler, false);

        }

    }

    function test(e){

        alert("e.target.tagName : " + e.target.tagName +

                "\n e.currentTarget.tagName : " + e.currentTarget.tagName

            +"\n this.tagName: "+ this.tagName

        );

    }

    var outer = G("outer");

    var inner = G("inner");

//    addEvent(inner, "click", test);   //p

    addEvent(outer, "click", test);    // 点 outer 是 div   点inner  e.target是 p

    //  this = e.currentTarget    谁调用，指谁

    //  e.target 触发事件的对象

</script>

</body>

</html>

onclick:所有主流浏览器都支持 onclick 事件属性

addEventListener(); Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

添加下标

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        a{float: left; margin-left: 20px;}

    </style>

</head>

<body>

    <nav>

        <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a>

    </nav>

</body>

</html>

<script>

    var nav=document.getElementsByTagName("nav")[0];

    var aList=nav.getElementsByTagName("a");

    for(var i =0; i<aList.length;i++){

        aList[i].index=i;  //为每个a设置下标index

        aList[i].onclick= function () {

            alert(this.index);

        }

    }

</script>

神奇的label

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        label {

            border: 1px solid red;

            width: 60%;

            float: left;

            padding-top:100px;

            text-align: center;

        }

        input{display: none;}

        img{

            filter:blur(5px);

            -webkit-filter:blur(5px);   /*只有谷歌有效没效果*/

        }

    </style>

</head>

<body>

<label>

    <input type="file"/>

    <span>神奇的label,点击边框任意角落都可以上传文件</span>

    <img src="img/1.jpg" alt="神奇的css 滤镜"/>

</label>

</body>

</html>

cssText

<div>123</div>

<script>

    var div1=document.getElementsByTagName("div")[0];

    div1.style.cssText="border:1px solid red;width:300px;height:300px;";  //批量添加 css

    //div1.style.color="red";

</script>

获取上传图片

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="file">

<div></div>

</body>

</html>

<script>

    var oInput=document.getElementsByTagName("input")[0];

    var  oDiv=document.getElementsByTagName("div")[0];

    var oImg= document.createElement("img"); // 创建节点

    oInput.onchange= function () {

        if(this.files[0].type.split("/")[0]=="image"){

            console.log(this.files[0]);  //  判断上传文件 用 this.files[0]

            oImg.src=this.files[0].name;

        }else{

            alert("请重新上传图片");

        }

    }

    oDiv.appendChild(oImg);

</script>

最简 tab

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        ul{list-style: none;}

        li{float: left;width: 200px;}

        .p{color:red;}

    </style>

    <script src="js/jquery.js"></script>

    <script>

        $().ready(function () {

            $("li:first").addClass("p");

            $("li").click(function () {

                var index=$(this).index()+1;

                $(this).addClass("p").siblings().removeClass("p");

                $("div").eq(index).show().siblings().hide();

            });

        });

    </script>

</head>

<body>

<ul>

    <li>file</li>

    <li>edit</li>

    <li>view</li>

</ul>

<div style="clear: both;">

<div>file</div>

<div style="display: none;">edit</div>

<div style="display: none;">view</div>

</div>

</body>

</html>

jquery: remove(): 把匹配到的删除 empty()：把匹配到的元素的内容删除，保留元素

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:

<p></p>

在 CSS 定义中：
1. a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
2. a:active 必须位于 a:hover 之后，这样才能生效！
于是得四者顺序：
a:link----->a:visited------>a:hover-------->a:active。
可以这样记：LoVe HAte（爱恨） [注意大写字母]

相对定位绝对定位多应用 ul li


移动端小项目总结

注意：看html响应效果要看开发人员工具中的 Elements 而不是Sources

z-index:
所有主流浏览器都支持 z-index 属性。此属性参数值越大,则被层叠在最上面

CSS3 :nth-of-type() 选择器 所有主流浏览器均支持 :nth-of-type() 选择器，除了 IE8 及更早的版本。
CSS3 background-size 属性  contain   把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
css3 animation:mes-circle1 1.2s linear 0s  1   normal                              both ;
               name         时间 速度  延时 次数 逆向播放（播放放次数为0时，没效果）    若opacity:0 -> 1 则要加both
最简模式  css3 animation:mes-circle1 1.2s // 其他都有默认值

紧挨选择器
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持。
对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。

解释：getElementsByClassName()是HTML5的DOM API。
document.getElementsByClassName("wrapper"); //取得DOM中所有class = "wrapper"的元素

解释：querySelector()和querySelectorAll()
是新标准的Selectors API(选择符API)。IE8+、FF3.5+、Safari 3.1+、Chrome、Opera 10+支持

querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素
querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组

document.querySelector("#wrapper") // 取得DOM中第一个id= “wrapper”的元素
document.querySelector(".wrapper") // 取得DOM中第一个class= “wrapper”的元素
document.querySelector("p") // 取得DOM中第一个<p></p>元素

document.querySelectorAll("p") // 取得DOM中所有的<p></p>元素......类比于querySelector()

P.S.原生的方法，便是getElementById()和getElementsByTagName()。这两个不会有兼容问题

函数放里面还是放外面？  放里面，放外在都可以
function testA(){
    xxx;
    var a=test();
    function testB(){
    xxx;
    }
}

function testA(){
    xxx;
    var a=testB();
}
function testB(){
    xxx;
}

添加下标 jq版本

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

   <script src="jquery.js"></script>

    <script>

        $(function () {

            $("li").each(function (index) {    /*添加索引下标*/

                $(this).click(function () {

                    console.log(index);

                });

            });

       /*    $("li").click(function () {
                console.log($(this).index());   /*这样也行  不用 each */
           });
        */

}); </script> </head> <body> <li>123</li><li>123</li><li>123</li><li>123</li><li>123</li><li>123</li> </body> </html>

判断输入的为汉字再转码，

var keyword=$(this).val();

        var keyword2="";

        if(/^[\u4e00-\u9fa5]+$/.test(keyword)) {

            keyword2 = encodeURI(keyword);

判断手机号码

  function phone(phone){

                var pho =  /^1[34578]\d{9}$/;

                return pho.test(phone);}

            if(phone(1372303941)){

                alert('yes')

            }else{

                alert('no')

            }

时间戳

//格式化时间戳

          console.log("ok: "+format_date(1496125699000));

          function format_date(time){

              var str="";

              var year=new Date(time).getFullYear();

              var month=new Date(time).getMonth()+1;

              var day=new Date(time).getDate();

              str=year+'-'+month+'-'+day;

              return str;

          }

            //判断时间戳跟现在时间是否小于7天

           var i="1496125699000";

           if(i-new Date().getTime()<*24*3600*1000){   // 再乘以1000 转换成毫秒 ！

               alert(1);

           }else{

               alert(0);

           }

重复的代码写成函数;

有时要写成两个函数;

数组应用

var playforms=['全平台','恒企在线','会答'];

playforms[list.work_type];  //  list.work_type=0;

自定义checkbox样式

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        $(function () {

            $("li").click(function () {

                if($(this).find("input").attr("checked")=="checked"){

                    $(this).find("input").removeAttr("checked");

                    $(this).css("backgroundPosition","0 0px");

                }else{

                    $(this).find("input").attr("checked","checked");

                    $(this).css("backgroundPosition","0 -21px");

                }

            });

        });

    </script>

    <style>

        li{list-style: none;float: left;background: url("checkbox.png") no-repeat;border: 1px solid red;}

        input[type=checkbox]{

            visibility: hidden;

        }

    </style>

</head>

<body>

<form action="">

    <ul>

        <li><input type="checkbox"/>a</li>

        <li><input type="checkbox"/>b</li>

        <li><input type="checkbox"/>c</li>

        <li><input type="checkbox"/>d</li>

    </ul>

</form>

</body>

</html>

chebox.png

a个人经验总结

 css3 百度知道特效

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>000</title>

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>

        @keyframes test {

            from{

                opacity: 0;

                top:100px;

            }

            to{

                opacity: 1;

                top:10px;

            }

        }

        @-webkit-keyframes test {

            from{

                opacity: 0;

                top:100px;

            }

            to{

                opacity: 1;

                top:10px;

            }

        }

    </style>

</head>

<body style="position: relative;">

    <div style="position: absolute;top:100px; animation: test 3s both; -webkit-animation: test 3s both;">

        <img src="1234.png" alt="1234"/>

    </div>

</body>

</html>

a个人经验总结

delegate()  
on():先click事件，再找  选择器

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<div style="width: 200px;height: 200px;background-color: #01ff70;">

    <h1>1111111111111111</h1>

    <h2>22222222222222</h2>

    <p>33333424</p>

    <h3></h3>

</div>

<script>

    $(function () {

        /*$("div").delegate("p","click", function () {

            $("h3").text(123456);

        })*/

        $("div").on('click','p', function () {

            $("h3").text('abc');

        })

    });

</script>

</body>

</html>

秒客网

a个人经验总结

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

相关文章