个人经验总结

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

 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>
 

a个人经验总结的更多相关文章

  1. 移动硬盘不能识别的常见7种解决方案 ~ By 逆天经验

    服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...

  2. 【原创经验分享】WCF之消息队列

    最近都在鼓捣这个WCF,因为看到说WCF比WebService功能要强大许多,另外也看了一些公司的招聘信息,貌似一些中.高级的程序员招聘,都有提及到WCF这一块,所以,自己也关心关心一下,虽然目前工作 ...

  3. iOS架构一个中型普通App的一些经验总结

    这一版比较完善的的App终于提交审核了.有时间写写自己的一些经验的总结了.自己主导的从0到比较成型的app到目前来说也只有两个,但是其中的很多东西都是大同小异.基本上是想到了什么就写什么,感觉写的不到 ...

  4. 从史上八大MySQL事故中学到的经验

    本文列举了史上八大MySQL宕机事件原因.影响以及人们从中学到的经验,文中用地震级数来类比宕机事件的严重性和后果,排在最严重层级前两位的是由于亚马逊AWS宕机故障(相当于地震十级和九级). 一.Per ...

  5. CentOS上 Mono 3.2.8运行ASP.NET MVC4经验

    周一到周三,折腾了两天半的时间,经历几次周折,在小蝶惊鸿的鼎力帮助下,终于在Mono 3.2.8上运行成功MVC4.在此总结经验如下: 系统平台的版本: CentOS 6.5 Mono 3.2.8 J ...

  6. 【腾讯Bugly经验分享】程序员的成长离不开哪些软技能？

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ce8068d4d44a246f72baf2 Dev Club 是一个交流移动 ...

  7. CI Weekly #6 | 再谈 Docker / CI / CD 实践经验

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  8. C#异常处理经验(原则与方法)

         本文是异常处理经验性的文章,其实跟C#关系也不大.比较适合刚刚熟悉异常语法,而缺乏实战的读者.当然,经验老练的读者也可指出不足.给予意见.补充说明,一起完善文章,分享更多知识与经验.   1 ...

  9. 【原创经验分享】JQuery（Ajax）调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  10. 千回百折：百度Java研发offer斩获记和经验分享

    起因 面试过程 等待offer的过程中悟道 Java面试常考知识点个人总结 过程 百度——作为国内互联网的巨头之一,最近的一些风波对其褒贬不一,但是类似事件不是第一次发生,也绝对不是最后一次,对于真的 ...

随机推荐

  1. Python序列的切片操作与技巧

    切片操作 对于具有序列结构的数据来说,切片操作的方法是:consequence[start_index: end_index: step]. start_index: 表示是第一个元素对象,正索引位置 ...

  2. 部署在IIS上的网站如何调试

    引言 今天突然有个朋友问我,总听同事说在IIS中如何如何调试,到底如何调试呢?没办法,人家刚入门,还是亲手给他操作了一遍.也记录一下,希望能帮到那些不知道的孩纸. IIS中的网站调试 调试最常见的一般 ...

  3. RHEL6.4记录一次添加一块新分区的操作

    首先看了下挂载点及目录 fdisk /dev/sda [root@box ~]# fdisk /dev/sda WARNING: DOS-compatible mode is deprecated. ...

  4. C# JavascriptSerializer与匿名对象打造Json的完美工具

    一:背景 在web项目中经常需要生成json数据,返回给前端ajax. 无论是ashx,还是WebMethod,可以人工的用字符串去拼接,最终得到json数据. 有没有更好的方法呢?我个人推荐使用Ja ...

  5. Entity Framework 自动生成CodeFirst代码

    前言 在前面的文章中我们提到Entity Framework的“Code First”模式也同样可以基于现有数据库进行开发.今天就让我们一起看一下使用Entity Framework Power To ...

  6. NGUIJoysticK

    原始的: using UnityEngine; using System.Collections; public class NGUIJoystick : MonoBehaviour { public ...

  7. JAVA-- M选N的组合算法

      M选N的组合算法 只要每个数字出现一次就可以   举例 :也就是说123与321和213属于重复 只算一组  此算法已经排除了重复数据  应用--彩票的注数算法 本程序的思路是开一个数组b,其长度 ...

  8. Awvs如何扫描需要登录的部分

    一个小技巧,可能部分的人习惯了按下一步.所以不大知道.给大家说说哈. 到LOGIN步骤的时候,在Login sequen 新建.然后你懂的了.会新出来一个浏览器,直接登录后一直下一步即可

  9. 【架构】docker环境搭建mysql主从

    序 本文主要研究怎么在docker上搭建mysql的主从.因为在单机搭建mysql多实例然后再配主从,感觉太痛苦了,环境各有不同,配置各不大相 同,从网上找搭建方法,试了半天也没成功,最后也没耐心调试 ...

  10. (int)，Int32.Parse() 和 Convert.toInt32() 的区别

    在 C# 中,(int),Int32.Parse() 和 Convert.toInt32() 三种方法有何区别? int 关键字表示一种整型,是32位的,它的 .NET Framework 类型为 S ...