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

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

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

6.锚点定位方法

   window.location.hash = 'm001';
    

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

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

表格

隔行变色

  

    
ID
    
姓名
    
年龄
  
  

    

      
1
      
李四
      
22
    
    

      
2
      
张三
      
26
    
    

      
3
      
王五
      
28
    
    

      
4
      
马六
      
41
    
    

      
5
      
赵七
      
25
    
  

排序

  

    
ID
    
姓名
    
年龄
    
操作
  
  

    

      
5
      
张七
      
25
      

    
    

      
4
      
马六
      
41
      

    
    

      
2
      
张三
      
26
      

    
    

      
1
      
李四
      
22
      

    
    

      
3
      
王五
      
28
      

    

  

添加和删除

姓名：
年龄：


  

    
ID
    
姓名
    
年龄
    
操作
  
  

    

      
1
      
李四
      
22
      

    
    

      
2
      
张三
      
26
      

    
    

      
3
      
王五
      
28
      

    
    

      
4
      
马六
      
41
      

    
    

      
5
      
赵七
      
25
      

    
  

搜索

toLowerCase 忽略大小写

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

split 分割字符串

姓名：


  

    
ID
    
姓名
    
年龄
    
操作
  
  

    

      
1
      
李四
      
22
      

    
    

      
2
      
张三
      
26
      

    
    

      
3
      
王五
      
28
      

    
    

      
4
      
马六
      
41
      

    
    

      
5
      
张七
      
25
      

    
  

表单

全选、不选、反选

鼠标

拖拽

一串div跟着鼠标移动

选型卡

  
  
  
  
  
11111
  
22222
  
33333
  
44444

自定义滚动条

  

    

  
  

    

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

运动

侧栏的运动

  分享到

轮播图

  
  
  


  

    

      
1
      
2
      
3
      
4
      
5
    
    

      
![](images/1.jpg)
      
![](images/2.jpg)
      
![](images/3.jpg)
      
![](images/4.jpg)
      
![](images/5.jpg)
    
  

完美运动框架

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)
}