输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
字面量
在编程语言中,一般固定值称为字面量,如 3.14。
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
字符串(String)字面量 可以使用单引号或双引号。
表达式字面量 用于计算。
数组(Array)字面量 定义一个数组。
对象(Object)字面量 定义一个对象。
函数(Function)字面量 定义一个函数。
对象对象:
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
Undefined 和 Null
var person = null; // 值为 null(空), 但类型为对象
var person = undefined; // 值为 undefined, 类型为 undefined
null不会清空类型,undefined会清空类型
字符串
1.字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
2.可以使用内置属性 length 来计算字符串的长度
3.在 JavaScript 中,字符串写在单引号或双引号中。
因为这样,以下实例 JavaScript 无法解析:
"We are the so-called "Vikings" from the north."
可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号,如下:
"We are the so-called \"Vikings\" from the north."
4.javascript中“===” 为绝对相等,即数据类型与值都必须相等。
5.字符串中的方法命名很多和java中的相同,具体再查表,这里不罗列
6.字符串的换行需要用反斜杠()
var x = "Hello \
World!";
for/in遍历
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
typeof
你可以使用 typeof 操作符来检测变量的数据类型
typeof "John" // 返回 string
正则表达式
1.search()方法:查找字符串中指定正则表达式的位置
2.replace()方法:将字符串中指定正则表达式的部分替换为另一个字符串,并返回结果作为函数返回值
3.test()方法:测试某字符串是否与某正则表达式相匹配
bool类型
表达式值为0为false,表达式值为非0为true
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10,而不是 undefined:
for (var i = 0; i < 10; i++) {
// some code
}
return i;
表单验证
1.自动验证:如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
2.邮箱验证:
function emailCheck(){
var email = document.forms["myForm"]["email"].value;
var index1 = email.indexOf("@");
var index2 = email.lastIndexOf(".");
if(index1 < 1 || index2 < index1 + 2 || index2 + 2 > email.length){
document.getElementById("emailAlert").innerHTML = "非法邮箱";
return false;
}
return true;
}
this关键字
在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
注意 this 是保留关键字,你不能修改 this 的值。
let和const
var声明的变量不具备块级作用域的性质,如:
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
这样重复定义的话,第二次声明会覆盖第一次的,这里可以使用let,定义的范围就是块级作用域的,所以循环遍历用let比较好
for(let i = 0; i < 5; i++){...}
const声明的常量并非是真的常量,const 可以定义一个变量能调用的不变的值
JSON
JSON.parse():用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify():用于将 JavaScript 值转换为 JSON 字符串。
href="#"与href="javascript:void(0)"的区别
arguments对象
argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最大的一个参数的值
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = arguments[0];
if(arguments.length < 2) return max;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
DOM对象
查找HTML元素
getElementById():通过id查找HTML元素
getElementByTagName():通过标签名字查找
getElementByClassName():通过类名字查找
改变HTML
document.write():用于直接向 HTML 输出流写内容
改变HTML元素内容:document.getElementById(id).innerHTML=新的 HTML
改变HTML元素属性:document.getElementById(id).attribute=新属性值
改变CSS
document.getElementById(id).style.property=新样式
事件:
onload和onunload:进入和离开页面的时候触发
元素(结点)
在进行结点操作之前都必须先创建好新的HTML元素结点
appendChild():
1.在已经存在的元素后面添加某元素
2.创建新的HTML元素结点
insertBefore():将新元素添加到开始位置
removeChild():移除一个元素(你需要知道这个元素的父元素)
replaceChild():替换一个元素
HTML collection
getElementsByTagName() 方法返回 HTMLCollection 对象。
以下代码获取文档所有的 <p>
元素:
var x = document.getElementsByTagName("p");
访问第二个元素可以用下面的方法:
y = x[1];
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
注意:
HTMLCollection 不是一个数组!HTMLCollection 看起来可能是一个数组,但其实不是。
你可以像数组一样,使用索引来获取元素。HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。
HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合,NodeList 是一个文档节点的集合,NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name,id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
javascript对象
这个例子创建了对象的一个新实例,并向其添加了四个属性:
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
替代语法(使用对象 literals):
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
一旦您有了对象构造器,就可以创建新的对象实例,就像这样:
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
JavaScript for…in 语句循环遍历对象的属性。
定义完结构对象以后,可以通过prototype在结构函数外为结构体新增属性
/*
利用prototype给Person的构造函数添加新的属性
*/
Person.prototype.name = function(){
//firstName和secondName为person对象的两个属性
return this.firstName + this.secondName;
}
数字对象
1.javascript的数字对象均为64位
2.如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。
var y = 0377;
var z = 0xFF;
所以,绝对不要在数字前写零,除非你需要进行八进制转换
3.可以用toString() 方法输出16进制,8进制,2进制。
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
4.无穷大:当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。
5.NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
String 对象
length属性:返回string对象的长度
indexOf():定位字符串中某一个指定的字符首次出现的位置,没找到返回-1
match():查找字符串中特定的字符,找到返回这个字符,没找到就返回null
toUpperCase() / toLowerCase():大小写转换
split()把字符串转换为数组
Date对象
new Date():获取当前日期
数组对象
javascript中的数组对象支持存放不同类型的对象,可以调用数组的内置的对象来实现一些效果:length返回数组的长度,indexof()返回指定对象在数组中的索引
合并两个数组 - concat()
合并三个数组 - concat()
用数组的元素组成字符串 - join()
删除数组的最后一个元素 - pop()
数组的末尾添加新的元素 - push()
将一个数组中的元素的顺序反转排序 - reverse()
删除数组的第一个元素 - shift()
从一个数组中选择元素 - slice()
数组排序(按字母顺序升序)- sort()
数字排序(按数字顺序升序)- sort()
数字排序(按数字顺序降序)- sort()
在数组的第2位置添加一个元素 - splice()
转换数组到字符串 -toString()
在数组的开头添加新元素 - unshift()
浏览器对象模型(BOM)
window.open():打开新页面
window.close():关闭当前页面
screen.availWidth:返回屏幕可用宽度
screen.availHeight:返回屏幕可用高度
location.href:返回当前页面url
location.pathname:返回页面url路径名
location.assign(url):加载新的文档,也可以跳到别的页面
history.back() :加载历史列表中的前一个 URL
history.forward():加载历史列表中的下一个 URL
弹窗
警告框:alert()
确认框:confirm()(返回值为按下的按钮)
提示框:prompt()(返回值为输入的值)
计时
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}