js初级复习

1.条件语句

1.三目运算符：

num % 2 == 0 ? alert('该数字是偶数') : alert('该数字是奇数');

2.switch语句

var a = '星期一';
            switch(a) {
                case '星期一':
                    alert('今天星期一');
                    break;
                // default:

            }

3.break：跳出当前循环（函数），继续向后执行。
continue：结束本次循环，开启下一次循环。

2.数组

1.数组中常用的方法

var arr1 = [1, 2, 3, 3, 'hello', 3, '22'];

            // 把数组转为字符串的方法：toString()；
            var str = arr1.toString();
            console.log(str);
            console.log(arr1);
            // join():把数组转为字符串时，可以指定元素与元素之间的连字符
            str = arr1.join('+');
            console.log(str);
            console.log(arr1);

            // 从数组末尾添加新元素：push();
            var count = arr1.push('我是新元素1', '我是新元素2','我是新元素3');
            console.log(count);
            console.log(arr1);

            // 从数组末尾删除元素：pop()
            count = arr1.pop();
            console.log(count);
            console.log(arr1);

            // 从数组起始位置删除元素：shift()
            count = arr1.shift();
            console.log(count);
            console.log(arr1);

            // 从数组的起始位置插入新元素：unshift()
            count = arr1.unshift('23');
            console.log(count);
            console.log(arr1);

            // 根据当前数组创建一个新数组:concat()
            var arr2 = arr1.concat([1, 2, 3, 4, 5])
            console.log(arr1);
            console.log(arr2);

            // 根据已有的数组创建新数组：slice()函数中的两个参数分别表示要获取当前数组中元素的起始下标（包含）和结束下标（不包含）；
            var arr3 = arr1.slice(1,3);
            console.log(arr1);

            //判断3在下标为4的地方开始到最后是否存在，存在返回下标，不存在返回false。
            var inde = arr1.indexOf(3, 4);
            console.log(inde);

2.冒泡排序
外侧循环控制比较的趟数，内层循环控制比较的次数。

var arr = [100, 29, 23, 13, 4]
        // 外层循环控制趟数：元素个数-1
        for (var i = 0; i < arr.length-1; i++) {
            // 内层循环控制每一趟比较的次数：元素个数-趟数
            for (var j = 0; j < arr.length-1-i; j++) {
                // j代表当前获取到的元素下标
                if (arr[j] > arr[j+1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);

3. 字符串

1.字符串的管理形式借助于数组结构，所以也可以使用变量名[下标]的形式获取到单个字符，也可以通过遍历取到每一个字符。
2.字符串的方法

// 字符串拼接操作：concat()\+
            var str4 = str3.concat(' kitty');
            // console.log(str3);
            // console.log(str4);

            // slice():有一个参数时，从当前参数指定的下标截取到字符串末尾
            var str5 = str4.slice(5);
            // console.log(str4);
            // console.log(str5);
            // slice():有两个参数时，第一个参数时截取的起始下标，第二个参数是截取的终止下标(不包含终止下标的字符)
            var str6 = str4.slice(5, 9);
            // console.log(str4);
            // console.log(str6);

            // substring():如果有一个参数，表示从当前下标一直截取到结束位置；如果有两个参数，第一个参数表示截取起始位置，第二个参数表示截取结束位置（不包含结束为止的字符）

            // substr():如果有一个参数，表示从当前下标一直截取到结束位置；如果有两个参数：第一个参数是截取起始位置，第二个参数是从起始位置开始截取的字符个数
            var str7 = str4.substr(5, 2);
            // console.log(str4);
            // console.log(str7);

            // indexOf():如果只有一个参数，则表示从左向右搜寻和该参数匹配的字符，并返回该下标，如果没有，则返回-1；
            var inde = str4.indexOf('o');
            console.log(str4);
            console.log(inde);

            // indexOf():如果有两个参数，第一个参数表示要查找的字符，第二个参数表示从指定的下标开始从左向右查找。
            inde = str4.indexOf('o', 5);
            // console.log(str4);
            // console.log(inde);

            // lastIndexOf():如果有一个参数，表示：从后向前查找匹配的字符并返回第一个匹配成功的字符下标
            inde = str4.lastIndexOf('o');
            // console.log(str4);
            // console.log(inde);

            // lastIndexOf():如果有两个参数，表示：第一个参数是要查找的字符，第二个参数表示查找的起始坐标。从起始坐标开始，向前查找匹配的字符
            inde = str4.lastIndexOf('o', 5);
            // console.log(str4);
            // console.log(inde);

3.Math对象（数学函数）

// 获取数据的最大值
            var max = Math.max(12,34,0,-1);
            console.log(max);
            // 获取数据中的最小值
            var min = Math.min(12, 34, 0, -1);
            console.log(min);

            // Math.ceil()：向上取整,进一法
            console.log(Math.ceil(99.1));
            console.log(Math.ceil(99.5));

            // Math.floor():向下取整，去尾法
            console.log(Math.floor(99.1));
            console.log(Math.floor(99.5));

            // Math.round():四舍五入取整
            console.log(Math.round(99.1));
            console.log(Math.round(99.5));

            // Math.pow(x,y)：求x的y次方
            console.log(Math.pow(2,2));
            // Math.sqrt():开平方运算
            console.log(Math.sqrt(4));
            // Math.abs(num):求绝对值
            console.log(Math.abs(-100));

4. bom浏览器对象模型

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

1.bom对象：window对象，location对象，screen对象，history对象，navigator对象。
2.window对象：
window.screenX/screenY主窗口的位置。
window.innerWidth/innerHeight浏览器宽度和浏览器的高度
window.open()打开新页面：参数一：要打开页面的url链接，参数二三可以省略。
系统对话框：alert(),prompt(),confirm().
定时器：setInteral(),setTimeout()
3.location对象
该对象中的属性和方法操作浏览器的url区域。
location.reload()没有参数时，从缓存中加载一遍页面。当参数为true时从服务器请求数据。
location.replace（'url字符串'）该方法修改页面，不会被历史记录保存。
4.screen对象（一般用于移动设备）
screen.availHeight：屏幕的高度减去系统部件高度的像素值。
scrern.availWidth:宽度
screen.height():屏幕高度
screen.width():屏幕的宽度
5.navigator对象（识别客户端浏览器的事实标准）

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

5. dom

        // 什么是DOM：文档对象模型，一份html文件在js中就是一个DOM对象（document对象）
        // BOM是包含DOM的

        // 节点的概念：组成一份DOM文档的所有内容都是DOM的节点，包括但不仅限于：标签、空格、换行、注释、标签的属性、标签中嵌套的文本

获取标签

// 查询标签的范围是整个html文件，也就是在document范围中搜索指定的标签，所以要使用document对象调用相关查找方法。

        // 因为W3C协议规定id值唯一，所以通过id获取标签，只能获取一个标签，如果页面中出现同名id，则只获取匹配的第一个标签
        var pTag = document.getElementById('p');
        // console.log(pTag);


        // 通过标签名获取标签：可以获取到页面中所有的同名标签
        // 返回值是一个类似于数组的数据类型，把所有匹配到的标签按照先后顺序，利用下标管理起来。
        var aTags = document.getElementsByTagName('a');
        // console.log(aTags[0]);

        // 通过class名获取标签
        var linkTags = document.getElementsByClassName('link');
        // console.log(linkTags);


        // 通过name属性值获取input类型（form表单）的标签
        var inputs = document.getElementsByName('user');
        // console.log(inputs);


        // 通过标签的选择器获取标签
        // querySelector():不管页面中与参数匹配的标签有几个，只能拿到第一个匹配的标签
        var tag = document.querySelector('.link');
        // console.log(tag);

        // querySelectorAll():可以获取到页面中所有与参数匹配的标签
        var tags = document.querySelectorAll('.link');
        console.log(tags);

for循环添加事件

也可以把var i = 0改为let i = 0；这样每一回循环都会重新声明一个变量。
还可以用闭包解决。

// for循环给按钮添加事件
         for (var i = 0; i < btnTags.length; i++) {
             console.log(i);
             // 利用i充当数组数组下标，逐个获取按钮，并添加事件
             // 使用for循环给标签添加事件时，不能在事件函数中使用循环变量，因为当触发事件函数时，循环已经结束，循环变量已经变为最后一个数值了，点击任何按钮，访问到的循环变量都是同一个数字
             // 解决办法：给每一个标签添加一个属性，用这个属性存储该标签对应的下标值，在通过事件函数获取标签下表时，不能使用循环变量，而是通过该属性拿值。
             btnTags[i].box = i;
             btnTags[i].onclick = function () {
                 // 当点击事件触发时，执行该函数，获取按钮的下标，借助于当时新添加的属性获取（按钮下标和颜色下标是一一对应的）
                 var inde = this.box;
                contentTag.style.backgroundColor = colorArr[inde];
             }


         }