javaScript基础知识总结
---------------------- 一 ----------------------
一、前言
1.javascript dom
全称：javaScript Document Object Model;
Document：文档，html文档与xml文档
Object：对象，javaScript document对象方法及属性
Model：模型
2.DOM：
DOM是针对xml、html的基于树的API，DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点。节点这个概念在javascript中很重要。DOM结构理解为树型结构，节点就是树枝分叉处的那个点。
3.DOM树示例图如下：
图一
图二
将DOM树图形翻转过来看就是树的形状，节点的概念就很好理解了。因为文档中部分标签支持相互嵌套，所以节点下允许出现相同元素的节点对象，但不是同一个节点对象。
简单举例：
div盒子嵌套一个div盒子，外层盒子与内层盒子是相同元素的节点。但使用外层div对象与使用内层div对象不同。外层的值：div.value;内层的值：div.div.value;需要先拿到外层对象才能调用内层对象
4.关键字标签：<script>
5.对象声明关键字：var
6.函数声明关键字：function
7.javascript的运行入口：window.onload = function(){}
---------------------- 二 ----------------------
二、javascript基础知识点
1.基本对象
<1>基本对象的声明关键字为var，没有其他类型像int,String,varchar等，在这一点javascript还是很实用很方便的。
例如：
var name = "zhangsan";//创建name对象，值为zhangsan;可以理解为String name="zhangsan";
var i = 1;//创建对象i，值为1;可以理解为int i=0;<2>节点对象通过文档的方法获取对应元素的对象即一个或一组节点。
例如：
var button = document.getElementById("button1");//根据id查找，在整个文档document中查找id为button1的节点对象
var liNodes = ulNode.getElementsByTagName("li");//根据标记名为li查找对象ulNode下的li节点2.常用方法
<1>查找方法：
getElementById("id");
//根据id属性值查找元素，返回值为一个对应id值的元素节点，如果不存在返回null;该方法只适用于document对象。
getElementsByTagName("name");
//查询拥有给定标签名的所有元素，返回值为一个元素集合，对应可以理解为数组。length属性为集合的长度。
hasChildNodes()
//查询某节点对象是否有子节点，返回值为true或false
getAttribute("attributeName")
//查询给定元素节点的一个给定属性节点的值，返回值为字符串
setAttribute("attributeName", "attributeValue")
//为给定元素节点的添加一个新的属性值或改变现有的属性值<2>节点的属性：
nodeName
//节点的名称
nodeType
//节点的类型
parentNode
//当前节点的父节点
childNodes
//元素节点的子节点构成的集合
firstChild
//元素节点的第一个子节点，等价于childNodes[0]
lastChild
//元素节点的最后一个子节点
nextSibling
//给定节点的下一个子节点
previousSibling
//给定节点的上一个子节点
nodeValue
//节点的当前值
innerHTML
//元素节点里的HTML文档内容
onclick
//元素节点相应点击事件<3>其他方法：
createElement("type")
//在document下创建一个元素节点
createTextNode("text");
//创建一个拥有给定文本的文本节点
appendChild(newChild);
//为某个元素节点添加新的子节点，通常与上面两个方法配合使用
insertBefore(newNode,targetNode)
//添加一个子节点newNode到某个元素节点的子节点targetNode前面，通常与create的两个方法配合使用
removeChild(node)
//删除某个元素的子节点。某个节点被删，其本身包含的子节点也同时被删除。3.javaScript的简单使用
javascript代码用标签<script>包含。对于HTML文档，该标签一般放在文档的<head>标签内。
例如：
实现弹出一个警告框，内容为hello javascript
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){ //javascript的入口
alert("hello javascript"); //alert为警告框
}
</script>
</head>
<body>
</body>
</html>效果如图：
---------------------- 三 ----------------------
三、简单编程演示
下面以一个信息添加与删除的例子来简单介绍部分方法与属性的使用。通过对节点的操作实现增加一组数据，删除一个记录的。用到了基本常用方法及属性。
<!DOCTYPE html>
<html>
<head>
<!-- 信息管理 -->
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
需求：
a) 对话框 ：
需要删除xx的信息吗？(xx是a链接对应的td对应的文本)
注意：a是一个超级链接：可以通过onclick事件返回的值来取消其默认行为
tr的直接父节点是tbody
b) 添加一个对象记录：
为button添加一个onclick事件
获取对应文本框的值，根据获取的值创建对应个数的td节点，并把td节点添加到tr节点中
创建一个td节点：<td><a href="deleteEmp?id=xxx"> Delete</a> </td>,把此节点也添加到tr节点下
再把tr添加到tbody下
*/
window.onload = function(){
/*
1.自定义函数，去空格
*/
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
/*
2.自定义函数，删除指定节点
*/
function removeTr(node){
var trNode = node.parentNode.parentNode;
var tdNodes = trNode.getElementsByTagName("td");//获取元素节点集合
var name = tdNodes[0].firstChild.nodeValue; //获取对应元素节点td的第一个节点值
name = trim(name); //给文本去前后空格
var flag = confirm("确定要删除" + name + "的信息吗?");//confirm 弹出确认对话框
if(flag){
trNode.parentNode.removeChild(trNode); //删除节点，父节点删除，其包含的子节点同时也被删除
}
return false;
}
/*
3.为每一个a节点添加删除事件
*/
var tableNode = document.getElementById("table"); //根据id获取元素节点tableNode
var aNodes = tableNode.getElementsByTagName("a"); //获取a元素节点(tableNode的子节点)集合
for(var i = 0; i < aNodes.length; i++){ //遍历子节点，并为每一个子节点添加onclick相应事件
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
/*
4.为提交按钮添加点击事件
实现添加一组数据到table
*/
var btn = document.getElementById("button");
btn.onclick = function(){
/*
1).获取用户输入文本值
*/
var nameVal = document.getElementById("name").value;//获取对应节点的值value
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value;
/*
2).创建所需节点
*/
var nameTd = document.createElement("td");//创建元素节点td
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var nameText = document.createTextNode(nameVal);//创建文本节点text
var emailText = document.createTextNode(emailVal);
var salaryText = document.createTextNode(salaryVal);
/*
3).使td子节点集合到一个tr父节点
*/
nameTd.appendChild(nameText);//添加文本节点到对应的td元素节点
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
var tr = document.createElement("tr");//创建一个tr元素节点
tr.appendChild(nameTd);//依次添加td节点到tr元素节点
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
/*
4).新建元素节点aNode，并添加onclick事件
*/
var aNode = document.createElement("a");
aNode.href = "deleteEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));//新建文本为delete的节点并添加到aNode节点
var aTd = document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd);
aNode.onclick = function(){
removeTr(this);
return false;
}
/*
5).添加tr节点到表table的tbody下
*/
tbody = tableNode.getElementsByTagName("tbody");
tbody[0].appendChild(tr);
}
}
</script>
</head>
<body>
<center>
<hr color="#abcdef">
<br> <br> 信息增删 <br> <br>
姓名: <input type="text" name="name" id="name" />
邮箱: <input type="text" name="email" id="email" />
收入: <input type="text" name="salary" id="salary" /> <br> <br>
<button id="button" value="abc">提交</button>
<hr color="#abcdef">
<table id="table" border="1" >
<tbody>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>薪水</th>
<th> </th>
</tr>
<tr>
<td>ni</td>
<td>ni@qq.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>wo</td>
<td>wo@qq.com</td>
<td>4000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>ta</td>
<td>ta@qq.com</td>
<td>4500</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
<hr color="#abcdef">
</center>
</body>
</html>效果演示：
添加信息：
删除信息：
图delete1
图delete2
这个练习大量使用了基础方法。
对javascript相关对象方法与属性的熟练掌握很有帮助。
--------------------- end ---------------------
950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
