前端学习笔记|JavaScript基础

JS基础

数据类型

基于动力节点视频。
Number、String、Boolean、object

强制转换

Number 强转,boolean强转(undefined、null、NaN都是转成false)，String强转

myAge = Number("123445");
Boolean(0);
String(123);

parseInt、parseFloat
遇到非数字（包括空格）为止，功能更强大。

var num1=parseInt("123A123")
var num2=parseFloat("123.123a")

运算符

1. 数学运算±*/%，除法时整数除以整数可以得到小数
2. 自增自减
3. 赋值运算符=,和运算符组合+=等
4. 比较运算符，==比较 值，如"5"==5，===全等于，比较值和类型
5. 逻辑运算符，&&、||、!
6. 三目运算符 条件表达式?满足条件执行:不满足条件执行
7. +，+=可以实现字符串的拼接，字符串可以直接拼接数字

隐式转换

1. number+基本数据类型将数据转换成number类型，数字和NaN或undefined相加结果为NaN
2. string和number比较，string先转换成number
3. NaN和其他任何类型比较都是false，包括NaN==NaN
4. undefined==null为true

函数

function 函数名(逗号间隔的参数列表){}//函数表达式
var res = function (m, n) {return m * n;
}
res(2,2)

arguments对象

封装实参的对象

function add(a, b) {console.log(arguments);//实参个数console.log(arguments.length);//函数引用console.log(arguments.callee);//通过索引访问实参数据console.log(arguments[0] + " " + arguments[1] + arguments[2]);arguments[0] = 5;
}
add(1, 2, 4);

变量的作用范围

函数内部声明的变量只能在函数内部访问，在函数外声明的变量可以访问

内置对象

内置对象

数组：数组是特殊类型的对象。正因如此，可以在相同数组中存放不同类型的变量。可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;//数组遍历元素做操作
numbers.forEach(myFunction);function myFunction(item) {sum += item;console.log(sum);
}

Math:round四舍五入，ceil向上取整，abs绝对值

正则表达式

^开始，$结束
[]某个范围的单个字符
\w：单词字符，\d：数字，{m,n}至少m个，最多n个，{m,}至少m个

警告框、询问框、确认框

alert("warning");
var key = prompt("please input key");
var flag = confirm("Confirm the modification?确认修改吗?");

定时器

//定时任务,时间单位为毫秒
setInterval(myPrint, 1000);//一次性定时器
setTimeout(myPrint, 5000);function myPrint() {console.log("bang!");
}

自定义对象

var obj = new Object();
obj.name = "spike";
//注意访问对象属性时要加上this
obj.line = function () {console.log("bang" + this.name);
}
obj.line();定义对象的方法二，属性后用冒号：
var obj = {name: 'spike',age: 10,show: function () {console.log(this.name + this.age);}}

DOM

DOM文档

1. document获取元素

//id//var ele = document.getElementById("fathers");//tag// var ele = document.getElementsByTagName("p");//class//var ele = document.getElementsByClassName("a");//name属性var ele = document.getElementsByName("bebop");

2. element操作属性
   ELement对象
   注意：innerHTML连同标签一起获取，innerText只获取文本内容

//获取属性值
//ele.getAttribute("id");//设置属性值
// ele.setAttribute("name", "time");

操作父子节点

<div id="parent"><button id="child1">b1</button><button id="child2">b2</button></div> <script>
var ele = document.getElementById("parent");var children = ele.children;var ele = document.getElementById("child1");var pa = ele.parentNode;
//通过pa.nodeName知道节点类型为'div'</script>

插入和删除节点

//创建节点（元素节点等）并附加到其他元素上var p = document.createElement("p");p.innerText = "作为最后一个子元素添加到元素";
//appendChild() 方法将节点（元素）作为最后一个子元素添加到元素
//document.body.appendChild(p);document.getElementById("parent").appendChild(p);p.innerText = "在现有子节点之前插入子节点";  var ele = document.getElementById("parent");var title = document.getElementById("child1");       
//insertBefore() 方法在现有子节点之前插入子节点。ele.insertBefore(p, title)//removeChild() 方法删除元素的子节点。
// ele.removeChild(title);title.parentNode.removeChild(title);

dom表单

//获取或设置表单的value// var ele = document.getElementById("inputtext");// ele.value = "ZHANGSAN";//获取或设置单选框选中状态// var ele = document.getElementById("female");// ele.checked = true;//下拉框设置选中var ele = document.getElementById("fe");//ele.selected = true;//设置禁用效果ele.disabled = true;

事件

//单击事件
var ele = document.getElementById("btn");ele.onclick = function () {document.getElementById("inputpwd").value = "123455";}//焦点事件//onfocus 事件在元素获得焦点时发生。onfocus 事件最常与 < input >、<select> 和 <a> 一起使用。var ele = document.getElementById("textinput");ele.onfocus = function () {document.getElementById("hint1").innerHTML = "6-8位";}//onblur 事件发生在对象失去焦点时。//onblur 事件最常与表单验证代码一起使用（例如，当用户离开表单字段时）ele.onblur = function () {var t = /^[0-9]{6,8}$/;var flag = t.test(ele.value);if (flag) {document.getElementById("hint1").innerHTML = "succeed";} else {document.getElementById("hint1").innerHTML = "not accepted";}}//改变事件
//	当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件var ele = document.getElementsByName("sex");ele[0].onchange = function () {console.log(ele[0].value);console.log(this.value);}//鼠标移入移出事件
//onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时。var ele = document.getElementById("pp");ele.onmouseover = function () {ele.setAttribute("class", "overBlue");}ele.onmouseout = function () {ele.setAttribute("class", "blue");}//页面加载事件
window.onload = function () {//初始化操作}

bom操作

//location包含有关当前 URL 的信息。
//Location 对象是窗口对象的属性。
//href设置或返回整个 URL。
setTimeout(function () {location.href = "https://music.douban.com/subject/25710168/";}, 3000);//加载历史列表中的上一个 URL（页面）。
setTimeout(function () {history.back();}, 3000);

es6新语法

let

1. let声明的变量不能重复声明
2. let有代码块的概念，如大括号里面

const

声明（对象，数组的引用）为不能更改的常量

构造函数

 function person(name) {this.name = name;this.run = function () {console.log("running");}}var p = new person("spike");p.run();

原型对象

let stu = {name: "素子"}//原型对象stu.__proto__.jump = function () {console.log("ghost in the shell");}stu.jump();

原型继承

function student(score) {this.score = score;}student.prototype = new person("faye");var stu = new student(100);console.log(stu.score + " " + stu.name);stu.run();