JavaScript笔记

目录

01、JS写法

02、变量的定义，输出

03、数据类型

04、算数运算符

05、比较运算符

06、逻辑运算符

07、DOM元素获取

08、事件

09、JS控制HTML内容

10、JS控制CSS属性及类样式

11、This问题

12、自定义属性标签

13、定时器

14、DOM操作基础

15、创建和插入子元素

16、可视区宽高

17、数组

18、JSON

19、循环语句

20、分支结构

21、函数

22、break和continue

23、字符串

01、JS写法

1、行内引入（不推荐），安全性能低<div onclick="alert('hello world')"></div>

2、内嵌式（常用）将js写在script脚本块中 <script type="text/javascript"></script>

3、外链式 将js写在外面文件中，通过src找到引入

02、变量的定义，输出

var a=10

1、alert(a);

2、console.log(a);

3、document.write(a);

//用的极其少，将变量输出到标题

4、document.title=a;

03、数据类型

查看数据类型 typeof：var s="hello"; alert( typeof s);

1、字符串string ：加引号，引号中不能解析变量

2、数值number：整型和浮点型

3、布尔值boolean

4、未定义undefined

5、空null：但是null会显示是对象[object]类型

6、对象object

04、算数运算符

1、+ 加 注：+不但有算术运算的作用，还有链接字符串的作用

2、- 减

3、* 乘

4、/ 除

5、% 取余数 var a=10;var b=3; alert(a%b);// 结果1

6、++ 累加

7、-- 递减

05、比较运算符

1、== 等于（值） 数值10==字符串10

2、=== 全等于（值 & 类型）

3、> 大于

4、< 小于

5、>= 大于或等于

6、<= 小于或等于

7、!= 不等于（比值）

8、!==不全等于（比值和数据类型）

06、逻辑运算符

1、&& and //if (a==b && c<d)

2、|| or

3、! not //if ( !(a==b) )

07、DOM元素获取

1、通过Id获取元素 document.getElementById('id');

2、通过Class获取元素 document.getElementByClassName('class');

3、通过标签获取元素 document.getElementByTagName('tag');

08、事件

var onBox= document.getElementById('box');

1、单击事件 onclick //onBox.onclick=function(){}

2、双机事件 ondblclick //onBox.ondblclick=function(){}

3、鼠标移入 onmouseover

4、鼠标移出 onmouseout

09、JS控制HTML内容

input 没有innerHTML，它是单标签，有value

1、获取非input 输入表单以外元素的内容 var data=对象.innerHTML;

2、修改非input 输入表单以外元素内容 对象.innerHTML=内容；

3、获取input输入框的内容 var data=对象.value;

4、改变input输入框的内容 对象.value=内容；

10、JS控制CSS属性及类样式

1、改变对象的class 对象.className=class;

2、改变对象的id 对象.id=id;

3、改变对象的样式 对象.style.width=宽度； 对象.style.backgroundColor=颜色;

横杠'-'识别不出来，要去掉'-'，并将第二个单词首字母大写

          background-color --->backgroundColor

          background-bottom --->backgroundBottom

11、This问题

this就是向上找一层，这个函数属于谁，this就是谁

    var oBox=document.getElementById('box');        oBox.onclick=function(){                //第一类                alert(this); //this 就是oBox对象                //第二类                demo();                function demo(){                        alert(this);//this 就是demo()；                }        }

12、自定义属性标签

——就是自定义一个html+css中没有的属性

    <div id="box" s="200">小胖</div>        <button id="btn">获得小胖信息</button>        <button id="btn1">设置小胖信息</button>        <script>                var oBox=document.getElementById('box');                var oBtn=document.getElementById('btn');                var oBtn1=document.getElementById('btn1');                //获得自定义属性                oBtn.onclick=function(){                var data=oBox.getAttribute('s');                        alert(s);                }                //设置自定义属性                oBtn1.onclick=function(){                        oBox.setAttribute('s',100);                }        </script>

13、定时器

时间1000毫秒=1秒

1、一次定时器

设置：var timer=setTimeout(function(){} , 时间/毫秒 );

清除：clearTimeout(timer);

2、循环定时器

设置：var timer=setInterval( function(){} ,时间/毫秒);

清除：clearInterval(timer);

 var timer=setInterval(function(){                        num++;                        if(num==10){                                clearInterval(timer);                        }                        else{                                console.log(num);//1,2,3,4,5,6,7,8,9                        }                },1000);

14、DOM操作基础

    <div id="root">                 <p>1-p</p>                <span id="span">                        <div>2-div</div>                        <p>                                <div>3-div</div>                        </p>                </span>                <i>1-i</i>        </div>

var oRoot=document.getElementById('root');

var oP=document.getElementById('p');var oSpan=document.getElementById('span');

1、获得子级节点

var children=oRoot.children; var childrenNodes=oRoot.childNodes;//会把标签之间的空格也算成一个子级，此方法不提倡

2、获得父级节点

var parent=oP.parentNode;

3、弟节点——下一个节点

var next=oSpan.nextElementSibling(兼容ie 9+,chrome) || oSpn.nextSibling(兼容ie 6,7,8);

4、兄节点——上一个节点

var pre=oSpan.previousElementSibling(兼容ie 9+,chrome) || oSpan.previousSibling(兼容ie 6,7,8);

5、首节点

var first=oRoot.firstElementChild || oRoot.firstChild;

6、尾节点

var last=oRoot.lastElementChild || oRoot.lastChild;

15、创建和插入子元素

<div id="box"></div><button id="btn"></button><script>        var oBox=document.getElementById('box');        var oBtn=document.getElementById('btn');</script>

1、第一种方式，innerHTML

var string="<div>这是插入的元素</div>";oBtn.onclick=function(){        oBox.innerHTML=string;}

2、第二种方式，createElement(), appendChild();

var oDiv=document.createElement('div');oDiv.innerHTML="这是第二种插入方法";oDiv.className="class";oDiv.id="id";oBox.appendChild(oDiv);

16、可视区宽高

var oDiv=document.getElementById('id');var vW=document.documentElement.clientWidth || document.body.clientWidth;//兼容性var vH=document.documentElement.clientHeight || document.body.clientHeight;oDiv.style.width=vW + 'px';oDiv.style.Height=vH+ 'px';

17、数组

//数组的定义var a = [1 , 2 , 3 , 4 , 5]; //数组的初始化var a = new Array();//获得数组的长度alert(a.length);

//向数组内添加数据

1、尾部添加

a.push(6);alert(a);//1,2,3,4,5,6

2、尾部删除，无需传参

a.pop();//自动删除最后一位（删除 值 & 位）

3、 头部添加

a.unshift(a);

4、 头部删除，无需传参

a.shift();//自动删除第一位（删除 值 & 位）

5、 删除值，不删除位 不常用

delete a[1]; //1, ,3,4,5

6、 删除并添加 [1 , 2 ,3 , 4 , 5]

splice(起点，删除长度，添加元素1，添加元素2 ... );

a.splice(2, 1 , 11 , 12 , 13 , 14);alert(a);// 1 , 2 , 11 , 12 , 13 , 14 , 4 , 5 

7、 只删除

splice(起点，删除长度）；

a.splice(2 ,2);alert(a);// 1 , 2 , 5 , 6

8、 只插入不删除

splice(起点，0, 插入元素1, 插入元素2 ...);

a.splice(2 , 0 , 11 , 12);alert(a);// 1，2 , 11 , 12 , 3 , 4 , 5 , 6

9、 替换 先删除2两个，再添加2个

splice(2 , 2 , 11 ,12);alert(a); //1，2，11，12，5，6

10、 数组链接

var a=[1, 2, 3, 4, 5];var b=[11, 12, 13];var c=a.concat(b);alert(c);// 1,2,3,4,5,11,12,13

11、 Join参数

var a=[1, 2, 3, 4, 5]; 数组 typeof objectvar string=a.join('-'); 字符串 typeof stringalert(string); //1-2-3-4-5

12、 排序

var b=[23, 1, 4551, 345, 5];//方法一b.sort(); alert(b); //sort()会按照数的第一位排序，1, 23, 345, 4551, 5//方法二b.sort(function(n1,n2){        //从小到大排序        return n1-n2;});//方法三b.sort(function(n1,n2){        //从大到小排序        return n2-n1;});

13、 数据翻转

a.reverse();

18、JSON

JSON：轻量级的数据格式

JSON格式：键值对方式展示 {键：值，键：值 ...}

1.1 一维json

var json={"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" };

//json另一种写法，强烈建议var json={        "name":"上海大众",        "url":"http://www.csvw.com",         "city":"上海"};

1.2 访问一维json

alert(json.name);

2.1 二维json

var json1={        "name":"上海大众",        "city":"上海",        "brand":{                "name1":"大众",                "name2":"斯柯达"        }};

2.2 二维json的访问

alert(json1.brand.name1); 

3 解析json数据 两种方式 eval() , JSON.parse()

//特别的注意，json内全部使用双引号，这样不容易出问题

//json格式的字符串, json另一种写法不行，有换行

3.1 eval()

var json='{"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" }';//可以解析var json="{'name':'上海大众','url':'http://www.csvw.com' , 'city':'上海' }";//可以解析 var data =eval('('+json+')');for( var a in data ){        alert(a+'='+data[a]);}

3.2 JSON.parse()

var json="{'name':'上海大众','url':'http://www.csvw.com' , 'city':'上海' }";//不可以解析var json='{"name":"上海大众","url":"http://www.csvw.com" , "city":"上海" }';//可以解析var data=JSON.parse(json);for(var a in data){        alert(a+"="+data[a]);}

4 真正的json转换成字符串

var string=JSON.stringify(json);alert(typeof string);//string类型

19、循环语句

1、for循环

        for(初始化;条件;自增){                //语句，条件成立执行        }

2、for in循环 ，主要用于json，性能不如for循环

      var json={                "name":"上海大众",                "url":"http://www.csvw.com",                "city":"上海"        }        // for( 初始化 in json){}        for(a in json){                // a 代表json 的键        //在for in 循环的第一层，我们不能使用 . ,而要使用[]        //不能使用 json.a                alert(json[a]);        }

20、分支结构

1、if else

  if(判断){                //成立 真        }else{                //不成立 假        }

2、 if else if

      if(判断1){                ...........        }else if(判断2){                ...........        }else{                ...........        }

3、switch

   //逐个对比的判断        switch(a){                case '1': //和a对比，如果相等，走底下的语句，并且break是停止的意思                        ........                        break; //不写break, case穿透，会一直向下执行，直到碰到break                case 10: //数值10                        ........                        break;                 case '11': //字符串11                        ........                        break;                 //默认                default:                        ...........                        break;        }

4、三元

       a>b?alert('true'):alert('false');

21、函数

1、函数的定义，函数需要调用

    function (函数名){                ...........        }        function say(){                alert("上海大众");        }

2、函数的调用

     say();

3、函数的返回值

3.1 返回一个值

   function demo(){                var a=10,b=6;                //return不仅有返回数据的作用，也有停止函数执行的作用                //return以后所有的代码不再执行                return a-b;        }        var data=demo();        alert(data);

3.2 返回一个函数

   function demo() {                var a=10;                return function(){                        alert(a);                }        }        var data=demo();        data();

4、匿名函数，即没有名字的函数

      function (){                 .........        }        // 匿名函数的调用        //方法一：        var say=function(){                alert("上海大众");        }        say();        //方法二：        (function(){                alert("斯柯达");        })();

5、函数的嵌套

        function say(){                var s="保时捷";                return s1;                function s1(){                        alert(s);                }        }        var d=say();        d();

6、作用域，每一个函数体都代表一个层或者一个作用域

       //子级可以调用父级变量，父级不能调用子级变量        var a=10; //父级        function demo(){                var c=5;//子级        }        demo();        alert(a);//10        alert(c);//c is undefined

7、函数传参

7.1 普通传参

      function login(name , password){ //形参,可以不用手动var ,会自动var                alert(name);                alert(password);        }        login('高渐离'，'123456');//实参，多个参数用逗号分隔开

7.2 json传参

   var json={                "name":"上海大众",                "url":"http://www.csve.com",                "city":"上海"        }        function login(j){                alert(j.name);//上海大众        }        login(json);

8、函数的回调

8.1 麻烦一点的方法

       function login(name,password,sFn,eFn){                if(name=="高渐离" && password=="123456"){                        sFn();                }else{                        eFn();                }        }        login('高渐离','123456',successFn,errFn);        function successFn(){                alert("登录成功");        }        function errFn(){                alert("登录失败");        }

8.2 高端一点的方法....函数做实参

 function login(name,password,sFn,eFn){                if(name=="高渐离" && password=="123456"){                        sFn();                }else{                        eFn();                }        }        login('高渐离','123456',function(){                alert("登录成功");        },function(){                alert("登录失败");        });

8.3 更高端点....json

       var json={                "name":"高渐离",                "password":"123",                "successFn":function(){                        alert("登录成功");                },                "errorFn":function(){                        alert("登录失败");                }        }        //可以放入单独的js文件,通过引入js文件，直接调用        function login(j){                if(j.name=="高渐离" && j.password=="123"){                        j.successFn();                }else{                        j.errorFn();                }        }        login(json);

22、break和continue

1、break, 整个循环全部结束

   for(var i=0;i<10;i++){                if(i==5){                        break;                }                alert(i);//0,1,2,3,4        }

2、continue, 结束当次循环，后面的循环继续执行

       for(var i=0;i<10;i++){                if(i==5){                        continue;                }                alert(i);//0,1,2,3,4,6,7,8,9        }         

23、字符串

字符串就是一串字符或者数字、字母、特殊符号

1、长度length

      var string="上海大众海";        alert(string.length);//5 

2、通过下标查找字符charAt()

     var string="上海大众海";        var data=string.charAt('1');//第0位开始        alert(data);//海

3、通过字符查找下标，从左向右查找，一旦查找到，立刻返回下标，不再继续查找

       var string="上海大众海";        alert(string.indexOf('海'));//1

4、从右向左查找，下标大小仍是从左向右排的

 var string="上海大众海";        alert(string.lastIndexOf('海'));//4 

5、字符串的截取，substring(开始位置，结束位置)；substring(开始位置)如果不写结束位置，默认截取到最后

    var string="上海大众海";        alert(string.substring(2,3));//大        alert(string.substring(3,2));//大        alert(string.substring(0,4));//上海大众

6、demo 截取图片的后缀

      var img="little.bear.bear.jpg"        alert(img.substring(img.lastIndexOf('.')));// .jpg

7、字符串转成数组 split()，一定有规律的切

        var string="1-2-3-4-5";        var arr=string.split('-');        alert(typeof arr);//object         alert(arr['1']);//2

8、字符串转大小写

        //小写转大写        var str="www.baidu.com";        alert(str.toUpperCase());        //大写转小写        var str="WWW.BAIDU.COM";        alert(str.toLowerCase());