什么是JavaScript
JavaScript是一种脚本语言，是一种弱类型语言（可以不用声明变量的类型，与强类型语言不同）。
如何使用JavaScript
- 在HTML或XHTML文档中直接编写JavaScript代码
- 在HTML或XHTML文档中引入扩展名为
.js的JavaScript文件
以上两种方式的使用位置最好放在HTML或XHTML文档的最后，即</body>标签之前，这样有利于页面的快速加载。
JavaScript中的注释方式
- 单行注释使用
//代码行 - 多行注释使用
/* 多行代码 */
JavaScript中的变量
- 可以不用显示的声明变量的类型，但最好声明
- 变量的命名要规范（驼峰命名法等），且区分大小写，不能包含标点符号或空格
- 以
var关键字进行变量的声明
JavaScript中的内置函数
JavaScript中的内置对象
JavaScript中使用window对象
- 使用
window.onload在页面加载时调用指定函数，如：window.onload = showPic();在页面加载时调用showPic()函数 - 使用
window.open打开一个新的窗口，如：window.open(url, name, features)，其中url表示打开的新窗口的链接地址，name是新窗口的名字，features是一个字符串，用来设置新的窗口的特征，如宽度，高度等，属性之间以逗号进行分割
JavaScript中的事件处理函数
-
onmouseover当鼠标指责悬停在某个元素上时调用指定函数，如：onmouseover="uf_Over();" -
onmouseout当鼠标指针离开某个元素时调用指定函数 -
onclick当鼠标点击某个元素时调用指定函数，如：onclick="showPic();add();return false;" -
onkeypress当敲击键盘上任意一个按键时调用指定函数，这个时间处理函数请谨慎使用
注意：以上事件处理函数调用的指定函数的数量可以有多个，并用分号分割开即可。
HTML或XHTML文档中的节点
- 元素节点，如：
<body>,<p>等 - 文本节点，如：
<a>This is a link</a>中的This is a link - 属性节点，如：
中的src
获取页面（Document）中元素的三种方法
-
使用
getElementById("xxx")根据id获取元素节点（唯一），如：document.getElementById("form1");获取id为form1的元素节点 -
使用
getElementsByTagName("xxx")根据标签的名字获取元素数组，如：document.getElementsByTagName("li");获取li标签的元素数组，该方法返回的是一个数组，因此，数组相关的一些属性和方法就可以使用，如：获取数组长度等 -
使用
getElementsByClassName("xxx")根据class属性的值获取元素数组，如：document.getElementsByClassName("sale");获取元素中class属性为sale的元素数组，有的元素的class属性有多个值，如class="sale red big"，要获取类似的元素，依然可以使用document.getElementsByClassName("red pig");注意：class属性值得顺序，数量并不重要，只要是含有这些值得元素都可以进行获取。由于getElementsByClassName("xxx")这个方法适用于较新版本的浏览器，为了兼容老版本浏览器，我们可以改写该方法，如：function getElementsByClassName(node, classname) {//node是节点元素，classname是class值 if(node.getElementsByClassName) {//判断是否可以使用该方法 return node.getElementsByClassName(classname);//如果可以，返回该方法 } else { var results = new Array(); var nodes = node.getElementsByTagName("*"); for(var i = 0; i < nodes.length; i++) { if(nodes[i].className.indexOf(classname) != -1) {//判断每个节点的class属性值是否包含classname results[results.length] = nodes[i];//如果包含 } } return results; } }
操作元素中的属性节点
-
使用
getAttribute("xxx")获取xxx属性节点的值，如：document.getElementById("p1").getAttribute("title"); -
使用
setAttribute("xxx", "yyyy")将xxx属性节点的值修改为yyyy，如该属性节点不存在，则会先创建该属性，然后再设置值。 -
使用
childNodes获取任意元素的所有子元素，返回的是一个数组，如：document.getElementsByTagName("body")[0].childNodes获取body元素下的所有子元素。 -
使用
nodeType获取节点的类型，返回的是一个数字，其中，1为元素节点；2为属性节点；3为文本节点。 -
使用
nodeValue获取文本节点的值 -
使用
firstChild获取节点的第一个子元素 -
使用
lastChild获取节点的最后一个子元素 -
使用
nodeName获取节点的标签名称，返回值为标签名的大写英文，如IMG等 -
使用
innerHTML获取节点中的html代码，也可以写入相应的html代码 -
使用
createElement创建一个新的元素节点，如：var para = document.createElement("p");创建一个p标签，变量para代表对这个p标签的引用 -
使用
appendChild向父节点中插入子节点，如：var testdiv = document.getElementById("testdiv");//获取父节点testdiv var para = document.createElement("p");//创建新的节点p testdiv.appendChild(para);//将节点p插入到testdiv中 -
使用
createTextNode创建新的文本节点，如：//接上边代码 var textNode = document.createTextNode("hello world");//创建一个新的文本节点textNode para.appendChild(textNode);//插入该文本节点 -
使用
parentNode获取父节点 -
使用
insertBefore将一个新元素插入到一个现有元素的前面，其调用语法：parentElement.insertBefore(newElement, targetElement)，因此需要知道三个元素，父元素parentElement，要插入的元素newElement，目标元素targetElement -
使用
nextSilbing获取该元素的下一个兄弟元素 -
JavaScript没有内置一个
insertAfter函数用来在一个元素后面插入新元素，因此，可以编写一个这样的函数，如：function insertAfter(newElement, targetElement) { var parentElement = targetElement.parentNode;//获取父元素 if(parentElement.lastChild == targetElement) {//判断父元素的最后一个子元素是不是目标元素 parentElement.appendChild(newElement);//如果是，直接插入子节点 } else { parentElement.insertBefore(newElement, targetElement.nextSibling);//如果不是 } }
Ajax
这一部分的学习请参考Ajax学习笔记
网友评论