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()<7*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

 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>

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>

posted @ 2016-03-16 20:35 gyz418 阅读(324) 评论(1) 收藏举报

刷新页面返回顶部

gyz418

a个人经验总结

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

公告