javascript学习笔记全记录

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript学习笔记全记录相关的知识，希望对你有一定的参考价值。

 
js的初步了解
    1.就是用来修改样式的,修改的是行内样式。任何样式都能够修改。
    2.css里面怎么写js就怎么写。
    3.任何元素都能加事件；事件都要小写
js的三大组成部分：
1.ECMAScript——核心解释器，把js代码转换成计算机可以读懂的语言
2.DOM——Document  object model 文档对象模型
          增删改查文档节点
3.BOM——browser object model 浏览器对象模型
          完全不兼容
特别的问题：
 0、document.ready和document.load有什么区别？
      document.ready比onload要快，要先加载
          页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
 
 1.调用一个函数总是返回一个值，如果没有指定这个值则返回undefined;
 2.对象引用问题（Date,json,arr）
    var arr = [1,2];
var arr2 = arr;
arr2.push(5);
document.write(arr+‘<br />‘);//[1,2,5]
document.write(arr2);//[1,2,5]
js的数据类型：
     数字类型（number）,字符串（string）,布尔值（booleans），未定义（undefined），对象（object）
     基本数据类型：数字类型（number）,字符串（string）,布尔值（booleans），未定义（undefined）
     复合数据类型：对象（object）
数据类型转化：
     1.强制数据类型转化
          转整数：parseInt();
          转小数：parseFloat();
          弱转化：number();//严格转化
     2.隐式数据类型转化
          +：字符串拼接==》12+‘5‘=‘125‘;
          -*/%:字符串转数字==》‘12‘-5=7;
          ++:字符串转NaN==》var i=‘12‘;i++;typeOf(i)==‘number‘;    
函数：有返回值，返回值，返回值
函数返回值：
     1.函数没有返回值，返回undefined
     2.函数有return，但是没有值，返回undefined;
     3.return后面的代码不执行
     还有一个特殊的是 "函数function(){}"
          1.函数分定义阶段和调用阶段
          2.在哪里定义不重要，重要的是在哪里调用
          *3.只要函数名能出现的地方，都可以放函数本身
函数传参：
     函数不设置参数接收的话可以调取arguments[i]获取到参数
--------------
字符串：
     字符串定义： var i=0;
                var str=‘abc‘;
     *字符串拼接：
        var name = ‘leo‘;
    var age = 19;
    var hobby = ‘妹子‘;
    var you = ‘你‘;
    var str = you+‘是帅气的‘+name+‘，今年‘+age+‘岁，性别男，爱好‘+hobby;
操作样式的2种方法：
    .     方便灵活
   []能使用变量参数，点能做的它都可以做
循环：操作一组元素的时候使用
     ①条件循环
     while(i<5){
          执行语句；
          i++;
     }
当i不满足条件的时候的，循环自动终止；
     ②固定次数循环
     //循环5次
     for(var i=0;i<5;i++){
          执行语句；
     }
 
for循环小知识：
     continue        跳出当次循环
     break           阻断后面的循环
函数的作用域
1.全局变量=公用卫生间
2.局部变量=次卧卫生间
     局部变量 全局无法使用
     局部声明变量不加var的话就变成全局变量（不推荐使用）
     window.a=123;
3.闭包=次卧的可以用自己的卫生间，也可以用公用卫生间；
 
闭包：变量作用域
 
预解析（从上至下，从左至右）
     1、先把变量声明 全部提前，赋值不动
     2、函数也有预解析，直接提前
     3、预解析 不会脱离函数作用域，也不会冲出script标签 最多提到自己标签的顶部
代码执行顺序 见一个script解析执行一个，执行完了 在执行下一个
 
预解析的时候，函数和变量重名的时候，函数覆盖变量
执行代码的时候，有表达式的为大，会覆盖掉同名的函数值，最后读取变量的值；
var a=function(){
     alert(1);
};
function a(){
      alert(2);
}
     a();
预解析的时候a=function a(){alert(2)}
正常执行代码时候a=function(){alert(1)};覆盖了上面的值
所以弹1(表达式为大)
if语句和switch语句
     不适用break会导致case穿越，且不会报错
     switch(条件){
    case 条件可能的取值1:
        执行的语句1;
        break;
    case 条件可能的取值2:
            执行的语句2;
            break;
    default:
        默认的情况;
    break;
     }
 
     if(判断条件1){
          判断条件1成立执行 语句1
     }else if(判断条件2 ){
          判断条件2成立执行 语句2
     }else{
          以上判断条件都不成立的情况这条语句
     }
     
     if语句的简写形式：
          1.
          var a=500;
          if(a==500){
               alert(‘吃大餐‘);
          }
          可以简写成：a==500&&alert(‘吃大餐‘);
          2.三目运算符
          条件成立不？执行语句1:执行语句2;
运算符
算数运算符    +-*/%
赋值运算符    = += -= /= *= %=
比较运算符    <><= >= == === != !==(三等号：数据类型和值都完全相等的情况下才是true;)
逻辑运算符    &&  ||  ！取反
运算优先级    ()
return
     后面的代码不执行了
     用函数的返回值代替执行结果
定时器：
先开后关
     开启：setInterval(function(){}||fn,300);有返回值
     清除：clearInterval(定时器名);
     setTimeout(fn,300);
     clearTimeout(定时器名);
定时器的问题：
    1.循环里面加定时器，定时器里面用i 的问题
          用闭包解决
    2.定时器函数不能放括号
          否则会undefined;因为函数没有返回值，返回一个undefined
    3.定时器里面不能用this  当事件发生的时候先把this存下来，而不是在定时器里直接用this （定时器里面的this指向window）;
          在定时器外面：var _this=this;
    例子：
        延迟选项卡
     2.第一次起作用的时候要等一个定时器的时间；解决：封装成函数，先调用一次
日期对象：
     特殊用法：
          var oData=new Data(oData.getTime()时间戳);
          时间戳是毫秒数
          里面放置时间戳也可以获得，时间戳转化得来的时间
     获取日期对象：
     var oDate=new Date();
     var year=oDate.getFullYear();
     var month=oDate.getMonth()+1;小1
     var day=oDate.getDay();//获取星期(0，1，2，3，4，5，6)
     var date=oDate.getDate();
     var hour=oDate.getHours();
     var mintues=oDate.getMinutes();
     var seconds=oDate.getSeconds();
     oDate.getTime();获取时间戳
     设置日期对象：
     var oDate= new Date();
     oDate.setFullYear(2017,0,1);设置：年，月，日
     oDate.setHours(0,0,0,0);设置：时，分，秒，毫秒
     oDate.getTime();
经典案例：获取到本月最后一天是星期几？
    var arr=[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘];
    var oDate=new Date();
    oDate.setMonth(oDate.getMonth()+1);//设置日期到下个月
    oDate.setDate(0);//获取到上个月的最后一天
    var week=oDate.getDay();
    alert(arr[week]);
数组常用方法：增，删，改，查     9
     var arr=[12,5,8];
     arr.push(0);向后添加==》arr=[12,5,8,0];
     arr.unshift(0);向前添加==》arr=[0,12,5,8];
     arr.pop();数组后删除一位==》arr=[12,5];
     arr.shift();数组前删除一位==》arr=[5,8];
     arr.join(‘-‘);数组连接成字符串==》‘12-5-8‘;
     arr.splice(‘开始位置‘,‘几位‘,‘元素‘);具备‘增删改’
          for(){}时候需要i--;
          增加：arr.splice(1,0,3);==》arr=[12,3,5,8];
          删除：arr.splice(1,1);==》arr=[5,8];
          修改：arr.splice(1,1,3);==》arr=[12,3,8];
     arr.reverse;数组反转==》arr=[8,5,12];
     arr.concat();数组连接
     arr.sort(function(n1,n2){
              return n1-n2; 由小到大的排序
              return n2-n1; 由大到小的排序
               n1n2可以是对象的某个具体属性值比较
     })
字符串常用方法：7
     var str=‘welcome to zhinengshe‘
     str.charAt(0);==>w  //查找位置范围相应字符 
     str.indexOf(‘e‘);==>1【UA检测】
     str.lastIndexOf(‘e‘);==>20【判断文件名】
     找到相对应的元素返回元素位置
     找不到元素的位置返回-1
     str.split(‘ ‘);分割成数组==》[‘welcome‘,‘to‘,‘zhinengshe‘];
     str.substring(‘开始位置‘,‘结束位置‘不包含结束位置);截字符串
     str.substring(0,1);==>‘w‘
     str.substring(0,str.length-1);把最后一个字母去掉
     str.toUpperCase();转成大写；
     str.toLowerCase();转成小写；
     str.charCodeAt(位置);返回指定位置的字符编码
     String.fromCharCode(字符编码);返回对应字符编码的字符
     str.replace(‘要更换的‘，‘更换的‘);
          注意：字符串的比较 其实就是编码大小的比较
Math的常用方法：9
     Math.round();四舍五入
     Math.random();获取0-1之间的随机数字，不包含1本身
     Math.floor();向下取整数
     Math.ceil();向上取整；
     Math.max();获取最大数字
     Math.min();获取最小数字；
     Math.abs();获取绝对值；
     Math.sqrt();幂
     Math.pow();开方
闭包（匿名函数自执行、封闭空间）变量作用域
    1.命名冲突
        商量
    2.i的问题
for(var i=0;i<arr.length;i++){
      (function(index){
          直接用index代替i
      })(i);
}
        a)循环里面用事件，事件里面用i,i变成长度而不是对应的i的值 0 1 2
        b)循环里面加定时器，定时器里面用i
    左边小括号里面用的是匿名函数的定义，右边的小括号是函数的调用
    (function(){ })();
json={};
    JSON.stringify(json)   -> 普通json变成标准json版字符串
    JSON.parse(str) ->  把字符串变成json
    兼容：IE8+ chrome FF
        后台返回的是‘{}‘字符串的json
eval:把字符串变成可以执行JS代码，把结果放过去
eval解析json必须加括号;不然会报错
var str1=‘({"name":"shiyou","age":20})‘;
    alert(eval(str1).name); ==>shiyou
    ////////
    var str2=‘{"name":"shiyou","age":20}‘;
    //直接eval一个‘json‘会报错(Uncaught SyntaxError: Unexpected token :)
    //必须eval 的时候加上小括号
    alert(eval(‘(‘+str2+‘)‘).age);
 
var json={a:5,b:5,c:5};
delete json.a;可以移除a和它的值
它值兼容ie9以上的浏览器
<select></select>
先创建 ，后添加
var opt = new Option(‘text‘，‘value‘);    //创建选项
oS.options.add(opt)                             //添加
oS.options.remove(下表||opt);           //删除
 
selectedIndex 获取选中的那个项 下标
oS.options[oS.options.selectedIndex].value/text
 
注意1：<option value="北京">北京</option>一定要加value  
注意2：事件oS.onchange=function(){};
对象引用：
     1、基本数字类型：number,string,undefined,boolean
          赋值就是复制；
          var a = 12;
       var b =a ;
       b=b+2;
       a的值还是不变
     2、对象引用
          1）赋值不会复制，对象比较不相等，看起来一样也不行
     var oDate1=new Date();
     var oDate2=new Date();
     oDate1 !==oDate2
     
          2）一个东西改变，另外一个东西也跟着改变
          案例1：
          var a = [12,5,8]; //对象
    var b =a;
    b.pop();
    alert(a);
    给b赋值了a对象，a,b同时指向了同一个对象
     当一个改变了，对象就会发生改变；
案例2：
     var oDate = new Date();
    var oDate2 = oDate;
    oDate2.setFullYear(2020);
    alert(oDate)

‘use strict‘严格模式

解决的问题
1.变量必须加var
2.不允许 if 里面定义函数，必须顶层定义
3.严格模式干掉了with
 
严格模式特性
1.必须写use strict 不能是其它单词 否则不起作用
2.use strict 有作用范围 只针对当前函数起作用
3.只针对 当前自己 script标签起作用
4.只针对当前js文件起作用
各种表达式：
     1.逗号表达式：优先级特别低用（）括起，读取后面的
          var a = (12,5);
         alert(a);//5
     ————————
     同样读取最后一个，走else
           if(undefined,true,false,32,0){
        alert(‘ok‘);
    }else{
        alert(‘不ok‘);   
    }
 
     2.||：比较懒，碰到真的就返回
     var a=0||5;
     alert(a);结果5
 
     3.&&：比较勤快，得查完，有一个假就都是假的
DOM     增，删，改，查
oUl.children         获取UL的子节点         有length的属性
oUl.children[0]    获取UL第1个子节点     使用比较多
oUl.children[oUl.children.length-1]    获取Ul的最后一个子节点    使用比较多
 
oUl.parentNode    获取Ul的父节点    body,html,document
 
oUl.firstElementChild||oUl.firstChild    首个节点（first）    "firstChild 低版本IE6 -8
firstElementChild 高级浏览器"
oUl.lastElementChild||oUl.lastChild    最后一个字节点    同上
 
oLi.previousElementSibling||oLi.previousSibling    获取上一个兄弟节点    相对自己