js笔记

1.阻止默认事件

  var event = ev || event;//兼容性
 event.cancelBubble = true;//不会在向上一级传递，阻止冒泡
 7.window.history.forward(1); 阻止页面后退；

2.正则

/d [0-9]          /D [^0-9]除了0-9                                       
/s [a-z0-9_]     /S  [^0-9a-z_]
/w 空白字符      /W 除了空白字符                                              


//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("蔡宝坚"));

3.排序

 var arr = [1,19,25,13].sort((a,b) => a-b);
      alert(arr);

4.按照 json 的属性值排序

 var arr = [

          { name : "柠夏" ,age : 20},
          { name : "宝宝" ,age : 18},
          { name : "婴国baby" ,age : 19},
          { name : "香丽" ,age : 10}
].sort( (a,b) => a.age - b.age);

for(var i=0;i<arr.length;i++){
    alert(arr[i]['age']);
}

5..把 document.getElementById(id) 转换成 $("id")

      function $(id) {
        return typeof (id) == 'string' ? document.getElementById(id) : id
       }

6.锚点定位方法

   window.location.hash = 'm001';
   <a name="m001"> </a>

7..多点击事件获取点击的是哪个

   $('#IndexLink,#IndexLink1').on('click', function (e) {
      var id=e.target.id;
      //id 取到的就是被点击的ID值
    }

8.页面到底部自动加载内容：

    var divH = document.body.scrollHeight,
        top = document.body.scrollTop,
        windowH = window.screen.availHeight;
      if ((top + windowH) >divH) {
      console.log('该他妈的加载内容了。');
      }
      console.log('网页正文全文高：' + document.body.scrollHeight + ' 网页被卷去的高： ' + document.body.scrollTop + ' 屏幕可用工作区高度:' +       window.screen.availHeight);

列表

appendchild

先把元素从原有的父级上删掉再添加到新的父级

表格

隔行变色

<script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oldColor='';

        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            oTab.tBodies[0].rows[i].onmouseover=function(){
                //将初始的颜色值存入函数中，当鼠标移出的时候恢复原来的色值
                oldColor=this.style.background;

                this.style.background='#07db00';
            };

            oTab.tBodies[0].rows[i].onmouseout=function(){
                this.style.background=oldColor;
            };

            //隔行变色
            if(i%2){
                oTab.tBodies[0].rows[i].style.background='';
            }else{
          oTab.tBodies[0].rows[i].style.background='#ccc';
        }
        }
    };
</script>
<body>
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>2</td>
      <td>张三</td>
      <td>26</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
    </tr>
    <tr>
      <td>4</td>
      <td>马六</td>
      <td>41</td>
    </tr>
    <tr>
      <td>5</td>
      <td>赵七</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
</body>

排序

<script>
  window.onload=function()
  {
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    oBtn.onclick=function()
    {
      var arr=[];

      for(var i=0;i<oTab.tBodies[0].rows.length;i++)
      {
        arr[i]=oTab.tBodies[0].rows[i];
      }

      arr.sort(function(tr1,tr2)
      {
        var n1=parseInt(tr1.cells[0].innerHTML); //排第几列
        var n2=parseInt(tr2.cells[0].innerHTML);

        return n1-n2;
      });

      for(var i=0;i<arr.length;i++)
      {
        oTab.tBodies[0].appendChild(arr[i]);
      }

    };


  }
</script>

<body>
<input id="btn" type="button" value="排序">
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>张七</td>
      <td>25</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>马六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>张三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>

  </tbody>
</table>
</body>

添加和删除

<script>
  window.onload=function()
  {
    var oName=document.getElementById('name');
    var oAge=document.getElementById('age');
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    //让删掉之后的序列不在重复使用
    var id=oTab.tBodies[0].rows.length+1;

    oBtn.onclick=function()
    {
      var oTr=document.createElement('tr');

      //在最后一行添加的序列
      var oTd=document.createElement('td');
      oTd.innerHTML=id++;
      oTr.appendChild(oTd);

      //在最后一行添加的姓名
      var oTd=document.createElement('td');
      oTd.innerHTML=oName.value;
      oTr.appendChild(oTd);

      //在最后一行添加的年龄
      var oTd=document.createElement('td');
      oTd.innerHTML=oAge.value;
      oTr.appendChild(oTd);

      //删除操作
      var oTd=document.createElement('td');
      oTd.innerHTML='<a href="javascript:;">删除</a>'
      oTr.appendChild(oTd);

      oTd.getElementsByTagName('a')[0].onclick=function()
      {
        oTab.tBodies[0].removeChild(this.parentNode.parentNode);
      };

      oTab.tBodies[0].appendChild(oTr);
    };
  }
</script>

<body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn" type="button" value="添加" />
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>张三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>马六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>赵七</td>
      <td>25</td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>

搜索

toLowerCase 忽略大小写

search 模糊搜索如果没有找到任何匹配的子串，则返回 -1

split 分割字符串

<script>
  window.onload=function()
  {
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    oBtn.onclick=function()  // 关键字搜索 忽略大小写 和 模糊搜索
    {
      for(var i=0;i<oTab.tBodies[0].rows.length;i++)
      {
        var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt=oTxt.value.toLowerCase();

        var arr=sTxt.split(' ');  //split分割字符串

        oTab.tBodies[0].rows[i].style.background='';
        // oTab.tBodies[0].rows[i].style.display='none';  //筛选  //初始化为未显示的

        for(var j=0;j<arr.length;j++)
        {
          if(sTab.search(arr[j])!=-1)
          {
            oTab.tBodies[0].rows[i].style.background="yellow";
            // oTab.tBodies[0].rows[i].style.display='block';  //找到时显现
          }
        }
      }
    };
  }
</script

<body>
姓名：<input id="name" type="text"/>
<input id="btn" type="button" value="搜索">
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>张三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>马六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>张七</td>
      <td>25</td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>

表单

全选、不选、反选

<script>
  window.onload=function()
  {
    var oBtn1=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');
    var oBtn3=document.getElementById('btn3');
    var oDiv=document.getElementById('div1');
    var aCh=oDiv.getElementsByTagName('input');

    //全选
    oBtn1.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        aCh[i].checked=true;
      }
    };

    //不选
    oBtn2.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        aCh[i].checked=false;
      }
    };

    //反选
    oBtn3.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        if(aCh[i].checked==true)
          aCh[i].checked=false;
        else
          aCh[i].checked=true;
      }
    };
  }
</script>

<body>
<input id="btn1" type="button" value="全选"><br />
<input id="btn2" type="button" value="不选"><br />
<input id="btn3" type="button" value="反选"><br />
<div id="div1">
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
</div>
</body>

鼠标

拖拽

<style type="text/css">
  #div1{width:200px; height:200px; background:yellow; position: absolute;}
</style>
<script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');

    var disX=0;
    var disY=0;

    oDiv.onmousedown=function(ev)
    {
      var oEvent=ev||event;

      disX=oEvent.clientX-oDiv.offsetLeft;  ////鼠标跟矩形框之间的距离
      disY=oEvent.clientY-oDiv.offsetTop;

      //写在onmousedown里面，是为了让点击的时候才开始移动，如果写在了外面，没有点击是就已经开始移动了
      //写成document就算移动的很快，鼠标也不会离开矩形框
      document.onmousemove=function(ev)
      {
        var oEvent=ev||event;

        var l=oEvent.clientX-disX;  //存的是物体的位置
        var t=oEvent.clientY-disY;

        //当物体被拖出去的时候
        if(l<0)
        {
          l=0;
        }                   //可视区宽度 - div宽度
        else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
        {   //让l = 最大值
          l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }

        if(t<0)
        {
          t=0;
        }
        else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
        {
          t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }

        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';
      };

      document.onmouseup=function()
      {
        document.onmousemove=null;  //当鼠标松开时停止移动
        document.onmouseup=null;   //不留垃圾
      };

      return false; //防止火狐中空div拖拽是的bug   阻止默认事件
    };

  };
</script>

<body>
<div id="div1"></div>
</body>

一串div跟着鼠标移动

<style type="text/css">
  div{width:10px; height:10px; background:red; position: absolute;}
</style>
<script>
function getPos(ev)
{
  //scrollTop就是可视区的顶部距离网页顶部的距离
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

  return{x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}

  document.onmousemove=function(ev)
  {
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;

    var pos=getPos(oEvent);

    //后一个div跟着前一个div走
    for(var i=aDiv.length-1;i>0;i--)
    {
      //后一个div的left 是 前一个div的offsetLeft
      aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
      aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }

    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
  }

</script>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

选型卡

<style type="text/css">
  #div1 .active{background:yellow;}
  #div1 div{width:200px; height:200px; background:#ccc; border: 1px solid #000; display: none;}
</style>
<script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');
    var oBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');

    for(var i=0;i<oBtn.length;i++)
    {
      oBtn[i].onclick=function()
      {
        for(var i=0;i<oBtn.length;i++)
        {
          oBtn[i].index=i;
          oBtn[i].className='';
          aDiv[i].style.display='none';
        }
        this.className='active';
        aDiv[this.index].style.display='block';
      }
    }

  };
</script>

<body>
<div id="div1">
  <input class="active" type="button" value="教育">
  <input type="button" value="培训">
  <input type="button" value="招生">
  <input type="button" value="出国">
  <div style="display: block;">11111</div>
  <div>22222</div>
  <div>33333</div>
  <div>44444</div>
</div>
</body>

自定义滚动条

<style type="text/css">
  #parent{width:600px; height:20px;background:#ccc; position: relative; margin:10px auto;}
  #div1{width: 20px; height:20px; background: red; position: absolute; left:0; top:0;}
  #div2{width: 400px;height:300px; border: 1px solid #000; position: relative; overflow: hidden;}
  #div3{position: absolute;top:0;left:0; padding:4px;}
</style>
<script>
window.onload=function()
{
  var oDiv1=document.getElementById('div1');
  var oDiv2=document.getElementById('div2');
  var oDiv3=document.getElementById('div3');
  var oParent=document.getElementById('parent');

  var disX=0;

  oDiv1.onmousedown=function(ev)
  {
    var oEvent=ev||event;

    //鼠标跟矩形框的距离
    disX=oEvent.clientX-oDiv1.offsetLeft;

    //写成document就算鼠标移动的很快，鼠标也不会离开矩形框
    document.onmousemove=function(ev)
    {
      var oEvent=ev||event;

      var l=oEvent.clientX-disX;  //将oEvent.clientX - disX 存起来

      if(l<0) //保证div1不会被拖拽到parent之外
      {
        l=0;
      }
      else if(l>oParent.offsetWidth-oDiv1.offsetWidth)
      {
        l=oParent.offsetWidth-oDiv1.offsetWidth;
      }

      oDiv1.style.left=l+'px';

      //将scale的值设置为0~1
      var scale=l/(oParent.offsetWidth-oDiv1.offsetWidth);

      //top的值  滚动条 * 需要滚动的距离   div3的offsetHeight-div2的高
      oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';

    };

    document.onmouseup=function()
    {
      document.onmousemove=null;//当鼠标松开时停止移动
      document.onmouseup=null;
    };

    return false;  //阻止火狐中空div拖拽时的bug
  };
};

</script>

<body>
  <div id="parent">
    <div id="div1"></div>
  </div>
  <div id="div2">
    <div id="div3">
     我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费，才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可。但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心，夜里警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们直是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！
      　　我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪，怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子望回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的，过一会说，“我走了；到那边来信！”我望着他走出去。他走了几步，回过头看见我，说，“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
      　　近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。那知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。我北来后，他写了一信给我，信中说道，“我身体平安，惟膀子疼痛利害，举箸提笔，诸多不便，大约大去之期不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的，青布棉袍，黑布马褂的背影。唉！我不知何时再能与他相见！
    </div>
  </div>
</body>

运动

侧栏的运动

<style type="text/css">
  #div1{width:150px; height:200px; background:yellow; position: absolute;left:-150px;}
  #div1 span{width: 20px; height: 60px; background:#0f9; line-height: 20px;position: absolute;right:-20px; top:70px;}
</style>
<script type="text/javascript">
window.onload=function()
{
  var oDiv=document.getElementById('div1');

  oDiv.onmouseover=function()
  {
    startMove(0);
  }
  oDiv.onmouseout=function()
  {
    startMove(-150);
  }
};

var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');

  clearInterval(timer);
  timer=setInterval(function(){
    var speed=0;

    if(oDiv.offsetLeft>iTarget)   //当div的左位置大于目标参数时，应该向左运动
      speed=-10;
    else
      speed=10;

    if(oDiv.offsetLeft==iTarget)
      clearInterval(timer);
    else
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
  },30)
}

</script>

<body>
<div id="div1">
  <span>分享到</span>
</div>
</body>

轮播图

  <style type="text/css">
    body{
      width: 960px;
      height:150px;
      margin:20px auto;
    }
    .play{
      width: 960px;
      height:150px;
      overflow: hidden;
      position: relative;
    }
    ol{
      position: absolute;
      right:10px;
      bottom: -5px;
      list-style: none;
      z-index: 10;
    }
    ol .active{background:yellow;}
    ol li{
      width:20px;
      height: 20px;
      float: left;
      background:#fff;
      text-align: center;
      line-height:20px;
      cursor: pointer;
      border: 1px solid #ccc;
      margin-left: 5px;
    }
    ul{
      list-style: none;
      clear:both;
      position: absolute;
      top:0;
      left:0;
      z-index:9;
    }
    ul li{
      width: 960px;
      height:150px;
    }
  </style>
  <script type="text/javascript">
    function $(id) {
      return typeof (id) == 'string' ? document.getElementById(id) : id
    }

    window.onload=function()
    {
      var aBtn=$('play').getElementsByTagName('ol')[0].getElementsByTagName('li');
      var oUl=$('play').getElementsByTagName('ul')[0];

      var now=0;

      for(var i=0;i<aBtn.length;i++)
      {
        aBtn[i].index=i;
        aBtn[i].onclick=function()
        {
          now=this.index;

          tab();
        }
      }

      function tab()
      {
        for(var i=0;i<aBtn.length;i++)
        {
          aBtn[i].className='';
        }
        aBtn[now].className='active';

        startMove(oUl,{top:-150*now});
      }

      function next()
      {
        now++;
        if(now==aBtn.length)
        {
          now=0;
        }

        tab();

      }

      var timer=setInterval(next,2000);

      $('play').onmouseover=function()
      {
        clearInterval(timer);
      };
      $('play').onmouseout=function()
      {
        timer=setInterval(next,2000);
      };
    };
  </script>
  <script type="text/javascript" src="完美运动框架.js"></script>

<body>
  <div id="play" class="play">
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <ul>
      <li style="margin-top: -16px;"><a href="#">![](images/1.jpg)</a></li>
      <li><a href="#">![](images/2.jpg)</a></li>
      <li><a href="#">![](images/3.jpg)</a></li>
      <li><a href="#">![](images/4.jpg)</a></li>
      <li><a href="#">![](images/5.jpg)</a></li>
    </ul>
  </div>
</body>

完美运动框架

function getStyle(obj,name)
{
  if(obj.currentStyle)
    return obj.currentStyle[name];  //IE
  else
    return getComputedStyle(obj,false)[name];  //FF chrome
}


function startMove(obj,json,fnEnd)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){

    var bStop=true;  //假设所有的值都到了

    for(var attr in json)  //将json中的参数都循环一遍
    {
      var cur=0;

      if(attr=='opacity')
      {   //判断传入参数的是否为opacity
        cur=Math.round(parseFloat(getStyle(obj,attr))*100);
      }
      else
      {
        //用cur简化后面重复的getStyle(oDiv1,'height')
        cur=parseInt(getStyle(obj,attr));
      }

      // json[attr]  json中参数的目标值
      var speed=(json[attr]-cur)/6;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取整操作  缓冲运动

      //假设所有的点都到了目标值  如果有一个点没到 则为false
      if(cur!=json[attr])
        bStop=false;

      if(attr=='opacity')  //缓冲运动
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else
      {
        obj.style[attr]=cur+speed+'px';
      }
    }

    //如果bStop是true，则关闭定时器，并且执行fnEnd
    if(bStop)
    {
      clearInterval(obj.timer);

      if(fnEnd)fnEnd;
    }

  },30)
}

最后编辑于：2017.12.10 10:18:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

js笔记

1.阻止默认事件

2.正则

3.排序

4.按照 json 的属性值排序

5..把 document.getElementById(id) 转换成 $("id")

6.锚点定位方法

7..多点击事件获取点击的是哪个

8.页面到底部自动加载内容：

列表

appendchild

先把元素从原有的父级上删掉 再添加到新的父级

表格

隔行变色

排序

添加和删除

搜索

toLowerCase 忽略大小写

search 模糊搜索 如果没有找到任何匹配的子串，则返回 -1

split 分割字符串

表单

全选、不选、反选

鼠标

拖拽

一串div跟着鼠标移动

选型卡

自定义滚动条

运动

侧栏的运动

轮播图

完美运动框架

推荐阅读更多精彩内容

先把元素从原有的父级上删掉再添加到新的父级

search 模糊搜索如果没有找到任何匹配的子串，则返回 -1