在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。
1.插入
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
<script src="script.js"></script>
注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。
比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
尤其要注意的是，如果某个函数不是通过事件调用，但是它使用到了，html下面才出现的id，那么就会出错。id也是先定义再使用的，在id定义前获取id显然是错误的
错误：head中startcount先被调用，但此时id="1"的标签还未定义。
<head>
<title> 事件</title>
<script type="text/javascript">
var num=5;
function startCount() {
if (num > 0)
{
document.getElementById("1").innerHTML = num; //id="1"，页面中还未定义
num=num-1;
setTimeout(startCount,1000);
}
}
startCount();
</script>
</head>
<body>
<h1>操作成功</h1>
<p id="1"></p>秒后回到主页<a>返回</a>
<input type="button" value="dianji" onclick="startCount()">
<input type="text" id="2">
</body>
-----------------------------------------------------------------------------------------
正确位置，id="1"，先定义再被调用
<body>
<h1>操作成功</h1>
<p id="1"></p>秒后回到主页<a>返回</a>
<input type="button" value="dianji" onclick="startCount()">
<input type="text" id="2">
<script type="text/javascript">
var num=5;
function startCount() {
if (num > 0)
{
document.getElementById("1").innerHTML = num;
num=num-1;
setTimeout(startCount,1000);
}
}
startCount();
</script>
</body>
2.输出内容
document.write("开启JS之旅!");
alert("xxx");
confirm("xxx");
prompt("xxx");
3.简单DOM操作
document.getElementById("IDname");
document.getElementById("IDname").style.color = "red"; //改变属性
document.getElementById("IDname").removeAttribute("style"); //移除属性
进阶：
JavaScript 可以通过 "==" 比较两个字符串是否相等。
定义二维数组
<script type="text/javascript">
var myarr = new Array();
for (var i=0;i < 3;i++)
{
myarr[i] = new Array();
for(var j = 0 ; j < 6;j++)
myarr[i][j]=i*j;
}
//没有int
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
</script>
事件：
1.鼠标点击事件：onclick
2.鼠标经过事件：onmouseover
3.鼠标离开事件：onmouseout
4.光标聚焦事件：onfocus
4.失焦事件：onblur
5.内容选择事件：onselect
6.文本框内容改变事件：onchange
7.加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
内建对象
1.Date对象
var Udate=new Date();
2.字符串对象
var mystr = "I love JavaScript!"
3.Math对象
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
4.数组对象
var 数组名= new Array();
var 数组名= new Array(n);
var 数组名 = [<元素1>, <元素2>, <元素3>...];
Window对象
window对象方法
计时器
在js里声明的变量，整个全局都能使用
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
取消计时器clearInterval()
语法：
clearInterval(id_of_setInterval)
参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
clearTimeout(id_of_setTimeout)
参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
history对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]<br>
注意：window可以省略。
back()加载history列表中的前一个URL
forward()加载history列表中下一个URL
go()加载history列表中的某个具体的页面
length返回浏览器历史列表中URL数量
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
location.[属性|方法]
location对象属性图示
location 对象属性
location 对象方法
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性
screen对象
screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性
对象属性
DOM对象
HTML文档可以说由节点构成的集合，DOM节点有:
- 元素节点：上图中<html>、<body>等都是元素节点，即标签。type：1
- 属性节点:元素属性，如a标签的链接属性href="http://www.imooc.com" type：2
- 文本节点:向用户展示的内容，如li标签中的JavaScript、DOM、CSS等文本。type：3
注意：也就是说 标签的内容 那些文字 也是一个节点，属于文本节点。
<b id="oldnode">JavaScript</b>
```这里b的下一个节点就是文本节点 JavaScript
**而且设置文本节点的内容是，使用的是 innerHTML，不是value，value用来设置属性的**
实现全选，复选框属性 checked
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0; i<hobby.length;i++)
{
if(hobby[i].name == "hobby")
hobby[i].checked = true;
}
// 任务1
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0; i<hobby.length;i++)
{
hobby[i].checked = false;
}
// 任务2
}
function checkone(){
var j=document.getElementById("wb").value;
var tar=document.getElementById("hobby"+j);
tar.checked = true;
// 任务3
}
</script>
</body>
</html>
#####getAttribute()方法和setAttribute()方法
getAttribute()方法通过元素节点的属性名称获取属性的值。
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.getAttribute(name)
elementNode.setAttribute(name,value)
######访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
node.firstChild //访问子节点的第一项
node.lastChild
elementNode.parentNode //访问唯一的父节点
nodeObject.nextSibling //访问下一个兄弟节点
nodeObject.previousSibling
#####插入节点
语法:
document.createElement(tagName)
//createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
document.createTextNode(data)
//createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
appendChild(newnode)
//在指定节点的最后一个子节点列表之后添加一个新的子节点。
insertBefore(newnode,node);
// 方法可在已有的子节点node前插入一个新的子节点。
nodeObject.removeChild(node)
//removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
node.replaceChild (newnode,oldnew )
//replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "php";
otest.appendChild(newnode)
var element = document.createElement("p");
//创建文本节点，放到p标签后面
var textnode = document.createTextNode("Hello world!");
element.appendChild(textnode);
document.body.appendChild(element);
</script>
>** var tbody = document.getElementById('table').lastChild; //如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签也就是说你没写上去但是这三个字元素是默认存在的。所以("table").lastChild获取的是最后一个子元素，也就是tbody **
>**动态给标签添加事件，不能使用setAttribute**
var trs = document.getElementsByTagName("tr");
for(var i = 0 ; i < trs.length; i++)
{
trs[i].onmouseover = function () {
this.style.backgroundColor = "#f2f2f2";
}
trs[i].onmouseout = function(){
this.style.backgroundColor = "#fff";
}
}
网友评论