JavaScript用于网页和用户之间的交互,完整的JavaScript由语言基础、BOM和DOM组成。
语言基础
Script标签
JavaScript代码必须放在script标签中,script标签可以放在html的任何地方,一般建议放在head标签里,若与多段script代码就会按照从上到下顺序执行。
<script type="text/javascript"></script>
引用外部js文件
<script type="text/javascript" src=""></script>
注释
- 单行注释 /
- 多行注释 /*
声明变量
- 使用var声明变量
var a = 10; - 不使用var声明变量
a = 10;
注:变量名命名规则和java一样
基本数据类型
- undefined 声明了但未赋值 var x;
- Boolean 声明布尔类型 var x = true;
- Number 声明数字类型 var a = 10;
- String 声明字符串类型 var a = “hello”;
- null 空对象/对象不存在
注:JavaScript没用字符概念,只有字符串,故单引号和双引号都表示字符串
注:用var定义的变量为动态类型,会根据变量的实际值而改变
注:可用typeof来判断变量当前的类型 document.write(typeof x);
类型转换
-
伪对象
JavaScript的基本类型也是伪对象,他们都有属性和方法。 -
转换为字符串toString()
var a = 10;
a.toString(); -
数字转换为字符串toString()
toString() 转换为十进制
toString(2) 转换为二进制
toString(8) 转换为八进制
toString(16) 转换为十六进制 -
转换为数字
parseInt() 转换为整数
parseFloat 转换为浮点数
Number() 转换为数字
注:若被转换的字符串中,同时由数字和字符构成,那么parseInt会一直定位到数字,直到出现非数字字符,返回NaN。Number会直接返回NaN。
-
转换为Boolean
转换字符串: 非空即0
转换数字: 非0即true
转换对象: 非null即true -
String()和toString()的区别
对于null的处理,String()会返回字符串"null",toString()就会报错,无法继续执行
函数
函数即一段可以重复执行的代码
<script type="text/javascript">
function print(m){
document.write(m);
}
</script>
注:js中形参为可变类型,故不需要先声明
运算符
同Java
条件语句
同Java
错误处理
try catch
同Java
对象
JavaScript中的对象是有着属性和方法的一种特殊数据类型,常见的对象有Number、String、Date、Array等
Number
-
创建数字对象
var x = new Number(“123”); -
非数字NaN
可通过函数isNaN来判断是否为数字
当通过非数字创建Number时就会得到NaN -
返回一个数字的小数表达式
toFixed(2); //保留两位小数点 -
返回一个数字的科学计数法表达
toExponential(); -
返回一个数字对象的基本数字类型
var a = new Number(“123”);
var b = a.valueOf(); //基本数字类型
String
-
创建字符串对象
var x = new String(“abc”); -
字符串长度
x.length; -
返回指定位置的字符
charAt:返回指定位置的字符
charCodeAt:返回指定位置的字符对应的Unicode码 -
字符串拼接
var a = new String(“123”);
var b = new String(“abc”);
a.concat(y); -
子字符串出现的位置
indexOf:返回自子符串第一次出现的位置
lastIndexOf:返回子字符串最后一次出现的位置
var a = new String(“abc”);
a.indexOf(“a”); -
比较两段字符串是否相同
localeCompare比较,相同返回0,不相同返回非0
var a = new String(“abc”);
var b = new Strihg(“bac”);
a.localeCompare(b); //因为b在a前面故返回1 -
截取一段字符串
var x = new String(“hello world”);
x.subString(0,3); -
根据分隔符,把字符串转换为数组
var x = new String(“hello world”);
x.split(" “);//通过空格分隔符,得到数字{hello,world}
x.split(” ",1);通过空格分隔符,并保留前一个,得到数字{hello,world} -
替换子字符串
只替换第一个
var x = new String(“hello world”);
x.replace(“l”,“o”); //把第一个l替换为o
替换所有
var regs = new RegExp(“l”,“g”);
x.replace(regs,“o”); //所有的l替换为o
数组
JavaScript中的数组时动态的,即长度是可以发生变化的
-
创建一个数组对象
var a = new Array();
var b = new Array(1,2,3); -
数组长度
a.length; -
遍历数组
普通for循环
增强for循环
for(i in a){
a[i];
} -
连接数组
var a = new Array(1,2,3);
var b = new Array(a,b,c);
var c = a.concat(b); -
通过指定分隔符,返回一个数组的字符串表达式
var a = new Array(1,2,1);
a.join(""); //返回121
a.join("@"); //返回1@2@1 -
分别在最后位置插入数据和获取数据
push() 相当于入栈,有参
pop() 相当于出栈,无参 -
分别在最开始位置插入数据和获取数据
unshift() 在最前面加入,有参
shift() 在最前面删除,无参 -
对数组内容进行排序
var x = new Array(3,1,4,2);
x.sort(); //返回1,2,3,4 -
自定义排序算法
用比较函数作为参数传递给sort()
function compartor(v1,v2){
return v2-v1; //表示大的在前面
}
x.sort(compartor); -
对数组进行反转
x.reverse(); -
获取子数组
var a = new Array(1,2,3,4);
a.slice(1);//相当于[1,+)
a.slice(1,3);//相当于[1,3) -
删除和插入元素
splice既可以删除元素,也可以插入元素
var x = new Array(1,2,1,4,5);
x.splice(3,2); //从位置3开始删除两个元素
x.splice(3,0,2,3); //从位置3开始删除0个元素,并插入2,3,相当于从3开始插入2,3
日期对象
-
创建日期对象
var a = new Date(); //返回当前的具体日期
var d = new Date(“1996/2/4”); //返回指定日期 -
分别获取年/月/日
var a = new Date();
a.getFullYear(); //返回当前年份
a.getMonth()+1; //返回当前月份,注:getMonth()返回的月份是基0的,0代表1月份
a.getDate(); //返回当前天数 -
分别获取时:分:秒:毫秒
var a = new Date();
a.getHours(); //返回当前时
a.getMinutes(); //返回当前分
a.getSeconds(); //返回当前秒
a.getMillionSeconds(); //返回当前毫秒 -
获取一周的第几天(星期几)
getDay()
例:
var a = new Date().getDay(); //基值为0,通过日期对象获取数字形式的星期几
var week = new Array(“星期天”,“星期一”,“星期二”,“星期三”,“星期四”,“星期五”,“星期六”);
document.write(week[day]); //返回星期 -
修改日期和时间
例:
var d=new Date();
document.write(“修改日期对象的值为世界末日:
”);
d.setFullYear(2012);
d.setMonth(11); //月份时基0的,所以11表示12月
d.setDate(12);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
Math对象
- 自然对数和圆周率
- Math.E:自然对数,返回2.718281828459045
- Math.PI:圆周率,返回3.141592653589793
-
绝对值
通过方法abs()获取绝对值
var a = Math.abs(-5); -
最大值、最小值
通过max()和min()
var a = Math.max(1,5,8,4,2); //返回8
var b = Math.min(1,5,8,4,2); //返回1 -
求幂
通过方法pow(a,a)求一个数的n次方
var a = Math.pow(3,3); //返回3的立方,即27 -
四舍五入
方法round(),小数四舍五入取整
var a = Math.round(3.4); //返回3 -
取随机数
方法random()
Math.random():一个0-1之间的随机数
Math.round(Math.random()*5+5):一个5-10之间的随机整数
自定义对象
- 创建自定义对象
通过new Object()
例:
var obj = new Object(); //创建一个自定义对象
obj.name = "lousen"; //定义一个属性并赋值
obj.love = function(){ //定义一个函数love
document.write(obj.name+"喜欢猫");
}
obj.love(); //调用函数love
- 通过function设计一个对象
function Hero(name){
this.name = name;
this.love = function(){
document.write(this.name+"喜欢");
}
}
var c1 = new Hero("狂三");
c1.love();
var c2 = new Hero("奈叶");
c2.love();
- 为已存在的对象,增加新的方法
通过prototype实现
function Hero(name){
this.name = name;
this.love = function(){
document.write(this.name+"喜欢");
}
}
var c1 = new Hero("狂三");
c1.love();
var c2 = new Hero("奈叶");
c2.love();
Hero.prototype.from = function(){
document.write(this.name+"来自二次元");
}
c1.from();
c2.from();
BOM
BOM即浏览器对象模型(Brower Object Model)
Window
- 获取文档显示区域的高度和宽度
一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。通过window对象可以获取文档显示区域的高度和宽度 (即显示当前状态下内容的高度和宽度,可变)
- window.innerWidth:内容的宽度
- window.innerHeight:内容的高度
- 获取外部窗体的宽度和高度
即浏览器的高度和宽度,一般为固定值,根据不同的浏览器而不同
- window.outerWidth:窗体的宽度
- window.outerHeight:窗体的高度
- 打开一个新的窗口
window.open(“url”); //不推荐使用,一般情况下优先使用超链接打开新窗口
Navigator
打印浏览器相关信息
navigator.appName; //返回浏览器产品名称
navigator.appVersion; //返回浏览器版本号
navigator.appCodeName; //返回浏览器内部代码
navigator.platform; //返回操作系统
navigator.Cookies; //返回是否启用Cookies
navigator.userAgent; //返回浏览器的用户代理报头
Screen
表示用户屏幕的相关信息
- 返回用户的屏幕大小
- screen.width
- screen.height
- 返回用户屏幕的可用大小
- screen.avalidWidth
- screen.avalidHeight
注:因为有任务栏的存在,所以可用区域的高度会比屏幕高度小一点
History
用于记录访问历史
-
返回上一次的访问
通过history.back();
例:
funcation goback(){
history.back();
} -
返回上上次
history.go(-2); //-1表示上一次,-2表示上上次,以此类推
Location
Location表示浏览器的地址栏
-
刷新当前页面
location.reload(); -
跳转到另一个页面
- location = “url”
- location.assign(“url”)
- 其他属性
- location.protocol:返回协议
- location.hostname:返回主机名
- location.port:返回端口号
- location.host:返回主机名+端口号
- location.pathname:返回访问路径
- location.hash:返回锚点
- location.serach:返回参数列表
弹出框
-
警告框
通过alert(),常用于消息提示
alert(“注册成功!”); -
确认框
通过confirm(),常用于危险性操作的确认提示
confirm(“是否确认删除?”); //确认返回true,取消返回false -
输入框
通过prompt(),弹出一个输入框供用户输入相关信息,因界面风格问题,很少在实际中使用
prompt(“请输入用户名:”);
计时器
- 只执行一次
setTimeout(函数名,距离开始时间)
例:
function test(){
document.getElementById("t_1").innerHTML = "测试成功!"; //innerHTML表示修改该元素内容
}
function p(){
setTimeout(test(),3000); //1秒等于1000毫秒
}
<div id="t_1">
<button>点击后,3000毫秒后显示</button>
</div>
- 不停的重复执行和终止重复执行
var t = setInterval(函数名,重复执行的时间间隔毫秒数) //重复执行
clearInterval(t); //终止重复执行
即重复执行同一个函数,重复的间隔由第二个参数指定
例:
var d = 0;
var t = setInterval(print,1000); //重复执行
function print(){
document.getElementById("dt").innerHTML= d++;
if(d == 5){
clearInterval(t); //终止重复执行
}
}
注:不要在setInterval调用的函数中使用document.write(); 部分浏览器,只会执行一次打印结果,比如firefox有这个问题,其他浏览器没这个问题。
HTML DOM
DOM是Document Object Model(文档对象模型),DOM是把html里面的各种数据当作对象进行操作的一种思路。
节点概念
DOM把所有的html都转换为节点
整个文档是一个节点
元素是一个节点
元素属性是一个节点
元素内容是一个节点
注释也是节点
已知:
<div id = "d1">hello</div>
var d = document.getElementById("d1");
document; //返回文档节点[object HTMLDocument]
d; //返回元素节点[object HTMLDivElement]
d.attributes[0]; //返回属性节点[object Attr]
d.childNodes[0]; //返回内容节点[object Text]
获取节点
-
通过id获取元素节点
var t = document.getElementById(); -
通过标签名获取元素节点
var t = document.getElementByTagName();
注:可以同时获取多个元素节点,形成一个元素数组 -
通过类名获取元素节点
var t = document.getElementByClassName();
注:同标签名,可以返回一个节点数组 -
通过表单的name获取元素节点
var t = document.getElementByName(); -
获取属性节点
先通过getElementById()获取元素节点,然后通过元素节点的attributes获取其下所有的属性节点
var t = document.getElementById(“div1”);
var a = t.attributes;
a[0].nodeName; //返回第一个属性的名称
a[0].nodeValue; //返回第一个属性的值
a[“id”]; //取出名称是id的属性 -
获取内容节点
首先通过document.getElementById()获取元素节点,然后通过childNodes获取其所有的子节点。 其中第一个子节点,就是其内容节点。
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
content.nodeName; //返回内容节点名称#text
content.nodeValue; //返回内容节点值hello HTML DOM
</script>
</html>
节点的属性
- 节点名称
nodeName表示一个节点的名字
例:
<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");
document.nodeName 文档的节点名,是 固定的#document
div1.nodeName 元素的节点名,是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名,是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名,是固定的 #text
- 节点值
nodeValue表示一个节点值
例:
<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");
document.nodeValue 文档的节点值,是 null
div1.nodeValue 元素的节点值,是null
div1.attributes[0].nodeValue 属性的节点值,是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值,是内容 即:hello HTML DOM
- 节点类型值
nodeType表示一个节点类型值
<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");
document.nodeType 文档的节点类型,是 9
div1.nodeType 元素的节点类型,是 1
div1.attributes[0].nodeType 属性的节点类型,是 2
div1.childNodes[0].nodeType 内容的节点类型,是 3
-
修改元素的文本内容
先通过getElementById()获取元素节点,然后通过 childNodes[0].nodeValue进行 ,或者innerHTML进行
document.getElementById(“d1”).childNodes[0].nodeValue= “通过childNode[0].value改变内容”;
document.getElementById(“d1”).innerHTML= “通过innerHTML改变内容”; -
获取和修改元素的属性
元素上的属性,比如id,value可以通过.直接获取和修改
如果是自定义属性,可以通过以下方式来获取
getAttribute(“test”) //获取自定义属性test
attributes[“test”].nodeValue
例:
var div1 = document.getElementById("d1");
div1.id; //返回d1
div1.className; //返回c1
div1.getAttribute("test"); //返回t1
注:class要通过className获取
改变样式
先通过getElementById()获取元素节点,然后再通过style.属性来改变样式
常用样式:
- 隐藏和显示
<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");
div1.style.display = "none"; //设置为隐藏
div1.style.display = "block"; //设置为显示
- 改变背景色
div1.style.backgroundColor = “green”; //设置为绿色
事件
- 焦点事件
- onfocus:获取焦点
- onblur:失去焦点
注:一般用于输入框
- 鼠标事件
- onmousedown:鼠标按下
- onmouseup:鼠标弹起
- onmousemove:鼠标经过
- onmouseover:鼠标进入
- onmouseout:鼠标离开
注:onmousemove和onmouseover的区别是,前者每次移动都会触发,后者仅触发一次
- 键盘事件
- onkeydown:键盘按下
- onkeypress:键盘按下
- onkeyup:键盘弹起
- 点击事件
- onclick:单击事件
- ondbclick:双击事件
-
变化事件
onchange
当组件发生变化时,会触发的事件
注:对于输入框而言,只有在失去焦点的时候才会触发 -
提交事件
onsubmit
当form表单提交的时候会触发onsubmit事件 -
加载事件
onload
当整个文档加载成功或者一个图片加载成功会触发加载事件 -
当前组件
this
this表示触发事件的组件,可以在调用函数的时候,作为参数传进去
例:
οnclick=get(this);
节点关系
- 父节点关系
先通过getElementById获取元素节点,再通过parentNode获取该节点的父节点
例:
<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");
var node = div1.parentNode;
- 同胞节点关系
- previousSibling:获取前一个同胞节点
- nextSiling:获取后一个同胞节点
注:标签之间有任何字符、空白、换行都会产生文本元素,获取到的节点为#text,只有两个标签紧挨着才不会。
例:
<div1></div1><div2></div2> //div1后一个同胞节点为div2
<div3></div3> //div2后一个同胞节点为#text
- 子节点关系
- firstChild:第一个子节点
- lastChild:最后一个子节点
- childNodes:所有子节点
注:同上,如果父节点与子节点之间有任何字符、空白、换行都会产生文本元素,那么第一个子节点和最后一个子节点都会是#text,因为文本节点的存在,子元素个数返回要加上文本节点
- childNodes和children的区别
childNodes会包含文本节点,children不会包含文本节点
创建节点
- 创建元素节点
通过createElement创建一个新的元素节点,再通过appendChild把该节点加入到另一个元素节点中
例:
var a = document.creatElement("br"); //创建一个元素节点,换行<br>
var div1 = document.getElementById("div1"); //获取一个元素节点
div1.appendChild(a); //把换行放到div1中去
- 创建文本节点
通过createElement创建一个新的文本元素节点p,再通过createTextNode创建一个内容节点text,将该内容节点text通过appendChild加入到p中;再获取要加入的元素节点div,通过appendChild把p加入到div中。
例:
var p = document.creatElement("p"); //创建一个元素节点,段落
var text = document.creatTextNode("文本内容"); //创建一个内容节点
p.appendChild(text); //把内容节点放到段落中
var div1 = document.getElementById("div1"); //获取一个元素节点
div1.appendChild(p); //把段落放到div中去
- 创建属性节点
首先通过createElement创建一个新的元素节点a,然后通过createTextNode创建一个内容节点c,将该内容节点c通过appendChild加入到a;通过createAttribute创建一个属性节点href,设置href的属性值,通过setAttributeNode把该属性设置到元素节点a上;获取要加入的元素节点div1,最后用appendChild加入到div1中去。
例:
var a = document.creatElement("a"); //创建一个元素节点,超链接
var c = document.creatTextNode("这是链接"); //创建一个内容节点
a.appendChild(c); //把内容节点放到超链接中
var href = document.createAttribute("href"); //创建一个属性节点
href.nodeValue = "www.lousenjay.info"; //设置属性值
a.setAttributeNode(href); //把该属性设置到超链接中
var div1 = document.getElementById("div1"); //获取指定的元素节点,div
div1.appendChild(a); 把超链接设置到指定div中
删除节点
- 删除元素节点
先分别获取该元素的父节点和该节点,再通过removeChild删除该节点
<div id = "d1">
<div id = "d2">被删除</div>
</div>
var a = document.getElementById("d1");
var b = document.getElementById("d2");
a.remove(b);
-
删除属性节点
先获取该元素节点,再调用removeAttribute删除指定属性
var a = document.getElementById(“al”);
a.removeAttribute(“href”); //移除id为al的超链接的href属性 -
删除文本节点
先通过childNodes[0]获取文本节点,再通过removeChild删除该文本节点
var p = document.getElementById(“p1”);
var t = p.childNodes[0];
p.removeChild(t);
注:一般通过innerHTML直接设置为空
替换节点
a.获取父节点
b.创建子节点
c.获取被替换的子节点
d.通过replaceChild进行替换
插入节点
-
追加节点
把新的节点放在最后面
a.创建新节点
b.获取父节点
c.通过appendChild追加 -
在指定位置插入
a.创建新节点
b.获取父节点
c.获取需要加入的子节点位置
d.通过insertBefore插入