1.Javascript语法
JS是一种解释性语言,浏览器中的JavaScript解释器将直接读入源码并加以执行。
// 单行注释
/*
* 多行注释
*/
<!- 单行注释(为避免与HTML的多行注释混淆,在JS中不推荐此类型注释)
<!- -> HTML多行注释,JS会把'->' 视为注释内容的一部分
变量声明:
var data = "123"; //data为局部变量
data = "123"; //data为全局变量
建议在声明变量的同时,声明数据类型。
数据类型:
string: 字符串型;
number: 数值型;
boolean: true 或 false;
null:用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
undefined:当声明的变量还未被初始化时,变量的默认值为undefined。
alert(typeof undefined); //output "undefined"
alert(typeof null); //output "object"
//null即是一个不存在的对象的占位符
alert(null == undefined); //output "true"
alert(null === undefined); //output "false"
alert(typeof null == typeof undefined); //output "false"
//注意 "===" 是绝对等于,在变量比较时,推荐"==="或"!=="
数组Array:
var list = Array();
list["name"]=lennon;
list["age"]=23;
推荐使用关联数组,即填充数组时,数组下标用字符串表示,提高数组的可读性。
对象Object
对象Object:包含属性和方法。
内建对象:Javascript自定义对象,如Array();
宿主对象:浏览器提供的对象,如Form\Element\Image等。
2.DOM
DOM即 Document Object Model,一个HTML文档,就是一棵树。
树上的节点分为:属性节点、文本节点、元素节点。
这些节点中的每一个都是一个对象。
getElementById():返回一个元素节点;文档中的每一个节点都对应一个对象。
getElementsByTagName():返回一个对象数组;
修改getElementsByTagName()获取的元素内容时,记得它是一个数组,正确引用为
getElementsByTagName()[0].childNodes
getAttribute():获取元素节点的属性值;
setAttribute():设置元素节点的属性值,可以重置某个属性值,也可以为元素节点新添加属性值;
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
<style type="text/css">
body{
color: #fff;
background-color: #ccc;
font-size: 20px;
}
p {
color: blue;
font-size: 1.2em;
}
#purchase {
background-color: #333;
color: #ccc;
padding: 1em;
}
</style>
</head>
<body>
<h1>What to Buy?</h1>
<p title="list_title">不要忘记买这些东西!</p>
<p>购物清单列表</p>
<ul id="purchase">
<li>衣服 鞋子</li>
<li>考试必备数据</li>
<li>考试必备数据</li>
<li>衣服 鞋子</li>
</ul>
<script type="text/javascript">
window.onload = function(){
// alert(typeof document.getElementById("purchase")); //返回ul节点的类型:对象
var shopping = document.getElementById("purchase"); //获取ul节点
var items = shopping.getElementsByTagName("*"); //获取ul节点内的所有元素节点
for(var i=0; i < items.length; i++) { //ul节点内有4个li节点
// alert(typeof items[i]); //返回ul节点内的li节点类型
}
shopping.setAttribute("title","新标题");
alert(shopping.getAttribute("title"));
var paras = document.getElementsByTagName("p"); //获取p节点
for(var i=0; i< paras.length; i++) {
var title_p = paras[i].getAttribute("title");
if(title_p) {
alert(title_p);
}
}
}
</script>
</body>
</html>
3.document.write()和innerHTML
document.write()是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改
document.documentElement.innerHTML.
4.常用事件
1.鼠标事件
onclick:鼠标单击
ondbclick:鼠标双击
onblur:失去焦点
onfocus:获得焦点onmouseover: 鼠标移到某元素之上
onmouseout:鼠标从某元素离开
onmousedown:鼠标按下
onmouseup:鼠标按键被松开
2.键盘事件
onkeydown:键盘某个键被按下
onkeyup:键盘某个键被松开
onkeypress:某个键盘按键被按下并松开