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 οnclick="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.οnclick=function(){}

2、双机事件 ondblclick //onBox.οndblclick=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.οnclick=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.οnclick=function(){
                var data=oBox.getAttribute('s');
                        alert(s);
                }
                //设置自定义属性
                oBtn1.οnclick=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.οnclick=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 object
var string=a.join('-'); 字符串 typeof string
alert(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());