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")
运算符
- 数学运算±*/%,除法时整数除以整数可以得到小数
- 自增自减
- 赋值运算符=,和运算符组合+=等
- 比较运算符,==比较 值,如"5"==5,===全等于,比较值和类型
- 逻辑运算符,&&、||、!
- 三目运算符 条件表达式?满足条件执行:不满足条件执行
- +,+=可以实现字符串的拼接,字符串可以直接拼接数字
隐式转换
- number+基本数据类型将数据转换成number类型,数字和NaN或undefined相加结果为NaN
- string和number比较,string先转换成number
- NaN和其他任何类型比较都是false,包括NaN==NaN
- 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文档
- 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");
- 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
- let声明的变量不能重复声明
- 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();