<input type="button" value="轻轻点我一下" onclick="javascript:alert('正在学习Javascript!')">
<script type="text/javascript"> function testClickTwo(){ alert("正在学习JavaScriptTwo") }</script><input type="button" value="轻轻点我一下Two" onclick="testClickTwo()">
<!-- 引入外部js脚本文件 --><script src="js/test.js" type="text/javascript"></script>
typeof
查看数据类型;
关键字 | 类型 |
---|---|
undefined | 未定义 |
number | 数字 |
string | 字符串 |
boolean | 布尔 |
number 的注意点
JavaScript在设计之初,为了方便初学者学习,并不强制要求用 var 申明变量。这个设计错误带来了 严重的后果:如果一个变量没有通过 var 申明就被使用,那么该变量就自动被申明为全局变量;
为了修补JavaScript这一严重设计缺陷,ECMA在后续规范中推出了strict模式,在strict模式下运行的 JavaScript代码,强制通过 var 申明变量,未使用 var 申明变量就使用的,将导致运行错误。
<!--启用strict模式的方法是在JavaScript代码的第一行写上:--><script> `use strict`; // 如果浏览器支持strict模式,下面的代码将报ReferenceError错误: abc = 'Hello, world'; //没有使用var声明变量 console.log(abc);</script>
由于多行字符串用 n 写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反 引号 ``表示:
`这是一个多行字符串`;
ES6新增了一种模板字符串,表示方法和上面的多行 字符串一样,但是它会自动替换字符串中的变量:
var name = '小明';var age = 20;var message = `你好, ${name}, 你今年${age}岁了!`;alert(message);
方法 | 说明 |
---|---|
length() | 字符串长度 |
str[index] | 通过下标获取字符 |
toUpperCase() | 变大写 |
toLowerCase() | 变小写 |
charAt(index) | 返回指定下标的字符 |
indexOf(str) | 返回指定字符串的下标 |
lastIndexOf(str) | 返回指定字符串最后一次出现的下标 |
substring(index1,index2) | 返回区间的字符(前闭后开) |
... | ... |
JavaScript的 Array 可以包含任意数据类型,并通过索引来访问每个元素。
//定义数组1:var 数组名 =new Array([长度]),长度可以省略var varArray1 = new Array();//访问数组元素varArray1[0] = "LPL";varArray1[1] = "LCK";varArray1[3] = "LEL";console.log(varArray1);//定义数组2,支持直接初始化var varArray2 = new Array(10,20,30,40,50);varArray2[5] = 60;console.log(varArray2);//定义数组3:直接支持使用中括号var varArray3 = [100,90,80];console.log(varArray3);
方法 | 说明 |
---|---|
indexOf(index) | 通过下标获取元素 |
slice(index1,index2) | 截取指定下标元素,返回新数组(前闭后开) |
push(元素...) | 向末尾添加任意元素 |
pop() | 将末尾的元素删除 |
unshift(元素...) | 向头部添加任意元素 |
shift() | 将头部的元素删除 |
sort() | 排序 |
reverse() | 反转 |
splice(index,num,元素...) | 从指定的索引开始删除若干元素,然后再 从该位置添加若干元素 |
concat(array) | 把当前的 Array 和另一个 Array 连接起来,并返回一个新的 Array |
join([符号]) | 把当前 Array 的每个元素都用指定的字符串连接起 来,然后返回连接后的字符串: |
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。
var 对象名 = { key: 'value', key: 'value', key: 'value'}
对象.属性
var xiaoming = {name: '小明'};xiaoming.age; // undefinedxiaoming.age = 18; // 新增一个age属性xiaoming.age; // 18delete xiaoming.age; // 删除age属性xiaoming.age; // undefineddelete xiaoming['name']; // 删除name属性xiaoming.name; // undefineddelete xiaoming.school; // 删除一个不存在的school属性也不会报错
如果我们要检测对象是否拥有某一属性,可以用 in 操作符:
var xiaoming = {name: '小明',birth: 1990,school: 'No.1 Middle School',height: 1.70,weight: 65,score: null};'name' in xiaoming; // true'grade' in xiaoming; // false
不过要小心,如果用 in 判断一个属性存在,这个属性不一定是 这个对象的,它可能是这个对象继承得 到的:
1 'toString' in xiaoming; // true//因为 toString 定义在 object 对象中,而所有对象最终都会在原型链上指向 object,所以xiaoming 也拥有 toString 属性。
要判断一个属性是否是 xiaoming 自身拥有的,而不是继承得到的,可以用 hasOwnProperty() 方法:
var xiaoming = {name: '小明'};xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('toString'); // false
for ... in , 它可以把一个对象的所有属性依次循环出来:
var o = { name: 'Jack', age: 20, city: 'Beijing'};for (var key in o) { if (o.hasOwnProperty(key)) { console.log(key); // 'name', 'age', 'city' }}
由于 **Array 也是对象**,而它的每个元素的**索引被视为对象的属性**,所以**遍历出来是下标**;
var a = ['A', 'B', 'C'];for (var i in a) { console.log(i); // '0', '1', '2' console.log(a[i]); // 'A', 'B', 'C'}//请注意,for... in 对 Array 的循环得到的是 String 而不是 Number 。
Map 是一组键值对的结构,具有极快的查找速度。
//初始化 Map 需要一个二维数组,或者直接初始化一个空 Map;var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined//由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:
Set 和 Map 类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在 Set 中, 没有重复的key;
var s1 = new Set(); // 空Setvar s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'//重复元素在 Set 中自动被过滤:3//通过 delete(key) 方法可以删除元素:
遍历 Array 可以采用下标循环,遍历Map 和 Set 就无法使用下标。 为了统一集合类型,ES6标准引入了新的 iterable 类型,Array,Map,Set 属于; 具有 iterable 类型的集合可以通过新的 for ... of 循环来遍历。
更好的方式是直接使用 iterable 内置的 forEach 方法,它接收一个函数,每次迭代就自动回调该 函数。
var a = new Array(元素...);a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 console.log(element + ', index = ' + index);})
Map 的回调函数参数依次为 value 、 key 和 map 本身:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);m.forEach(function (value, key, map) { console.log(value);});
Set 没有索引,因此回调函数的前两个参数都是元素本身:
var s = new Set(['A', 'B', 'C']);s.forEach(function (element, sameElement, set) { console.log(element);});
方法 | 说明 |
---|---|
alert(str) | 警告弹窗,没有返回值,只有确定按钮 |
prompt(str) | 有输入框(返回值为输入内容,直接取消返回值为空null,没有输入但确认返回值为空字符串) |
prompt(str1,str2) | 有输入框和默认值 |
confirm(str) | 是否选择框(返回值,true,false) |
方法 | 说明 |
---|---|
parseInt(strNum) | 将字符串转换为整型数字 |
parseFloat(strNum) | 将字符串转换为浮点型数字 |
isNaN(值) | true,表示不是数字,false,表示是数字 |
方式1
function abs(x) { if (x >= 0) { return x; } else { return -x; }}//一旦执行到 return 时,函数就执行完毕,并将结果返回。//如果没有 return 语句,函数执行完毕后也会返回结果,只是结果为 undefined 。
方式2
var abs = function (x) { if (x >= 0) { return x; } else { return -x; }};//在这种方式下, function (x) { ... } 是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量 abs ,所以,通过变量 abs 就可以调用该函数。//上述两种定义完全等价,注意第二种方式按照完整语法需要在函数体末尾加一个 ; ,表示赋值语句结束。
JavaScript还有一个免费赠送的关键字 arguments ,它只在函数内部起作用,并且永远指向当前函数 的调用者传入的所有参数。
function foo(x) {console.log('x = ' + x); // 10for (var i=0; i<arguments.length; i++) {console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30}}foo(10, 20, 30)
function foo(a, b, ...rest) {console.log('a = ' + a);console.log('b = ' + b);console.log(rest);}foo(1, 2, 3, 4, 5);// 结果:// a = 1// b = 2// Array [ 3, 4, 5 ]foo(1);// 结果:// a = 1// b = undefined// Array []
rest参数只能写在最后,前面用 ... 标识,从运行结果可知,传入的参数先绑定 a 、 b ,多余的 参数以数组形式交给变量 rest ;
描述 | 作用域 |
---|---|
var声明的变量 | 全局变量 |
不用var声明的变量(不建议使用) | 全局变量 |
方法以内的变量 | 局部变量 |
关键字 | 说明 |
---|---|
let | 声明局部变量的关键字 |
const | 声明常量的关键字 |
实际上,JavaScript默认有一个全局对象 window ,全 局作用域的变量实际上被绑定到 window 的一个属性:
事件 | 说明 |
---|---|
onclick | 单机事件 |
onfocus | 获取焦点事件 |
onblur | 失去焦点事件 |
onkeydown | 键盘按下事件 |
onkeyup | 键盘抬起事件 |
onkeypress | 键盘产生可输入字符事件 |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移除事件 |
方法 | 说明 |
---|---|
close() | 关闭浏览器窗口 |
open() | 打开指定url浏览器窗口(可指定窗口大小) |
方法 | 说明 |
---|---|
back() | 返回上一个页面 |
forward() | 下一个页面 |
go() | 加载某个具体URL (go(-1)返回上一个页面 go(1)下一个页面) |
属性 | 说明 |
---|---|
host | 主机名+端口号 |
hostname | 主机名 |
href | 完整URL(给href赋值可以跳转到指定页面) |
方法 | 说明 |
---|---|
repload() | 重新加载文档 |
replace() | 用新的文档替换当前文档 |
属性 | 说明 |
---|---|
referrer | 返回载入前文档的URL |
URL | 返回当前文档的URL |
cookie | 返回当前页面的cookie |
方法 | 说明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementByName() | 返回带有指定name值的对象集合 |
getElementByTagName() | 返回带有指定标签的对象的集合 |
getElementByClassName() | 返回带指定class值的对象集合 |
write() | 向文档写文本,HTML表达式或JavaScript代码 |
方法() | 说明 |
---|---|
innerHTML = "" | 往节点里里面些内容,里面的标签会被解析 |
innerHTML | 获取节点里面的内容 |
innerText = "" | 往节点里里面些内容,里面的标签不会被解析 |
innerText | 获取节点里面的内容 |
toFixed(number) 保留指定位数
方法 | 说明 |
---|---|
getDate() | 每月中的第几天 |
getDay() | 每周的第几天 |
getHours() | 小时 |
getMinutes() | 分钟 |
getSeconds() | 秒数 |
getMonth() | 月份(0~11) |
getFullYear() | 年份 |
getTime() | 时间戳 |
方法 | 说明 |
---|---|
ceil() | 向上舍入 |
floor() | 向下舍入 |
rand() | 四舍五入 |
random() | 返回0~1之间的随机数 |
定时函数
方法 | 说明 |
---|---|
setTimeout("调用的函数",等待的秒数) | 指定时间后执行一次函数 |
setInterval("调用的函数",间隔的秒数) | 指定时间间隔一直执行函数 |
清除函数
方法 | 说明 |
---|---|
clearTimeout(setTimeout返回的ID值) | 停止执行函数 |
clearInterval(setInterval返回的ID值) | 停止执行函数 |
层次访问节点1,包含text,注释等其他内容;
属性名称 | 说明 |
---|---|
parentNode | 返回接待你的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
层次访问节点2,只包含标签元素节点
属性名称 | 说明 |
---|---|
firstElementChild | 返回节点的第一个子节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
方法 | 说明 |
---|---|
getAttribute("属性名") | 获得节点指定属性值 |
setAttribute("属性名",属性参数) | 设置节点的属性值 |
方法 | 说明 |
---|---|
cerateElement(tagName) | 通过标签名创建新的元素节点 |
A.appendChild(B) | 把B节点(作为子节点)追加到A节点的末尾 |
inseretBefore(A,B) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
cloneNode(deep)的深拷贝和浅拷贝
方法 | 说明 |
---|---|
cloneNode(false) | 浅拷贝(不拷贝标签内部的子元素) |
cloneNode(true) | 深拷贝(包括标签内部的子元素一起拷贝) |
方法 | 说明 |
---|---|
removeChild(node) | 删除指定的节点 |
replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
注意
只有父节点才可以删除子节点或者替换子节点;
修改样式主要与事件一起使用;
事件 | 说明 |
---|---|
onclick | 单机事件 |
onfocus | 获取焦点事件 |
onblur | 失去焦点事件 |
onkeydown | 键盘按下事件 |
onkeyup | 键盘抬起事件 |
onkeypress | 键盘产生可输入字符事件 |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移除事件 |
元素节点.style.样式属性=”样式值“;
//举例document.getElementById("cart").style.backgroundColor="#fff";
//carOut类属性时在CSS外部样式中已经存在的document.getElementById("cart").className = "cartOut";
原文出处:前端(三)-JavaScript