JavaScript学习记录

1.引入方式

内联定义

外部引入

2.创建数组

var cars = ["奔驰", "宝马", "保时捷"];
var arr = ["aa", 23, 3.14, false];

3.遍历数组

for(var i = 0; i < cars.length; i++) {
    var car = cars[i];
    console.log('car: ' + car);
}

// ECMA5.1新增 
cars.forEach((item, index, array) => {
    console.log('idx: ' + index+', item: ' + item);
})

4.自定义函数

//1
function myFunction(a, b) {
     return a * b;
}
//2
var x = function (a, b) {return a * b};
var z = x(4, 3);

5.参数规则

JavaScript 函数定义不会为参数（parameter）规定数据类型。

JavaScript 函数不会对所传递的参数（argument）实行类型检查。

JavaScript 函数不会检查所接收参数（argument）的数量。

6.arguments对象

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    // 通过arguments遍历传进来的所有参数
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

7.对象

创建自定义对象

// 使用构造函数

function Student(sname, age, sex) {
    this.sname = sname;
    this.age = age;
    this.sex = sex;
}

// 构造函数定义对象支持通过prototype属性扩展对象功能(是在对象原型上扩展功能，类似与Java中的类，所以后续通过该构造函数创建出的对象都带有扩展的功能)
Student.prototype.say = function() {
    console.log("Hi, I'm " + this.sname + "!");
}

let stu2 = new Student("李四", 23, "女");
console.log(stu2.sname); // 李四
stu2.say();        // Hi, I'm 李四!

8.JavaScript事件DOM定时器

// 给按钮绑定点击事件
var btn = document.getElementById("btn");
btn.onclick = function() {
    alert('您点击了按钮');
}

// 给文档对象绑定加载完成事件
window.onload = function() {
    console.log('当前页面已经加载完毕');
}

9.常用的DOM *** 作API

document.getElementById(id) 按照标签的id属性值获取dom对象，返回单个

document.getElementsByTagName(name) 按照标签名称获取dom对象，返回dom数组

document.querySelector(cssSelector) 按照css选择器获取dom对象，返回单个

document.querySelectorAll(cssSelector) 按照css选择器获取dom对象，返回dom数组

document.createElement(name) 创建DOM元素

parentNode.appendChild(node) 将元素添加到父元素中

element.innerHTML 设置标签内容

element.style.left 设置样式属性值

element.setAttribute() 设置属性值

element.getAttribute() 获取属性值

element.addEventListener() 绑定事件处理函数

window.scrollTo() 滚动窗口

10定时器

setInterval() 和 setTimeout()。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

示例：

用定时器实现时钟效果

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

示例：

function test() {
   alert('5 seconds!'); 
}
var timerId = setTimeout(test,5000);  // 延时5秒d窗

// 如果想取消定时任务
clearTimeout(timerId);

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。