第一章、JavaScript语法
1. 位置
- Html文档标签中的
2. 注释
- 单行注释 // 或
- 多行注释 /*…… */或
//这是注释
<!-- 这是注释-->
/* 这是注释
这是注释
这是注释*/
3. 数据类型
- 字符串
- 数值
- 布尔
var a="字符串";
var b=1;
var c=true;
4. 变量
-
全局变量 （声明在函数外部）
-
局部变量 （声明在函数内部）
系统优先调用全局变量。
5. 数组
//数组声明
var a=Array();
var b=Array(数组长度)；
var c=Array("元素1"，"元素2"……)；
var d=["元素1"，"元素2"……]；
//数组赋值
a[index]= 数值 ;
6. 对象
//对象声明与初始化
1.直接声明
var 对象名 = {
属性名: 数值,
方法名: function() {},
};
2.创建构造函数
function 对象名(参数) {
this.属性名 = 数值;
this.方法名 = function() {};
};
3. Object()构造函数
var 对象名 = new Object();
对象名.属性名 = 数值;
对象名.方法名 = function() {};
分类：
-
用户定义对象
-
内建对象 （库中自带的对象）
如 Array()、Date()、Math()……
-
宿主对象（浏览器提供的预定义对象被称为宿主对象)
如Form、Image、Element……通过这些对象获得关于网页上表单、图像等各种信息。
7. 操作
- 算数操作符 +、-、*、/……
- 比较操作符>、<、==……
- 逻辑操作符||、&&、
8. 语句
- 条件语句 if
- 循环语句 for 、while
9. 函数
//函数声明
function 函数名(参数)
{
//函数内容
//函数内容
//函数内容
return 数值; //可省略
}
//函数调用
函数名(参数);
第二章、DOM
document、object、modle
1. 节点
DOM是由节点构成的集合。
分类：
- 元素节点
- 文本节点（文本节点总是被包含在元素节点内）
- 属性节点（属性节点总是被包含在元素节点内）
获取元素节点:
-
document.getElementById(“元素id”)
返回节点对象
-
document.getElementByTagName(“元素名称”)
返回节点对象数组
-
document.getElementByClassName(" 元素类名 元素类名 元素类名……")
返回节点对象数组
总结：
1. 一个文档是一个节点树对象，每个节点也是一个对象。
2. 可以通过组合使用3个方法获取所需的元素节点。
2. 获取和设置属性
-
获取属性值——getAttribute
节点对象.getAttribute(“属性名”)
-
设置属性值——setAttribute
节点对象.setAttribute(“属性名”,“属性值”)
-
可以创建不存在的属性。
-
不改变文档内容，只改变显示内容。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。
-
第三章、案例研究：JavaScript图片库
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#placeholder
{
width: 400px;
height: 300px;
}
a:visited {
color: #0000FF; /*连接访问的bai颜色变化*/
}
</style>
<script>
function showPic(img)
{
var source=img.getAttribute("href");
var text=img.childNodes[0].nodeValue;
var imgholder = document.getElementById("placeholder");
imgholder.setAttribute("src",source);
var textholder = document.getElementById("textholder");
textholder.firstChild.nodeValue=text;
}
function count(){
var bodyelement = document . getElementsByTagName("body")[0];
alert(bodyelement. childNodes . length);
}
window.onload=count;
</script>
</head>
<body>
<h1>图片</h1>
<ul>
<li>
<a href="img/wallhaven-737q1e.jpg" onclick="showPic(this);return false">1</a>
</li>
<li>
<a href="img/wallhaven-dgy8gg.jpg" onclick="showPic(this);return false">2</a>
</li>
<li>
<a href="img/wallhaven-dgzdpl.jpg" onclick="showPic(this);return false">3</a>
</li>
<li>
<a href="img/wallhaven-eylvpo.jpg" onclick="showPic(this);return false">4</a>
</li>
<li>
<a href="img/wallhaven-r2yz2j.jpg" onclick="showPic(this);return false">5</a>
</li>
</ul>
<img src="img/wallhaven-wykxqp.jpg" alt="" id="placeholder">
<p id="textholder">test
</p>
</body>
</html>
学习内容：
-
childNodes属性
在一棵节点树上, childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含 这个元素全部子元素的数组。
-
nodeType属性
每一个节点都有nodeType属性。
- 元素节点的nodeType属性值是1。
- 属性节点的nodeType属性值是2。
- 文本节点的nodeType属性值是3。
-
nodeValue属性
设置或获取一个节点的值，可以是任何节点，如元素节点、文本节点。元素节点的第一个子节点就是它的文本节点。
-
firstChild和lastChild属性
返回对象的第一个或最后一个子节点。
等于childNodes[0]和childNodes[childNodes.length-1]
第四章、图片库改进
如何优化JavaScript代码
-
尽量少使用javascript伪协议，例如将herf属性设置为真实跳转地址。
-
将js与html分离。监测函数是否可用，然后再js实现事件监听。
-
通过addLoadEvent()函数初始化。
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } -
使用HTML-DOM简化DOM Core代码。
如
元素.setAttrinute(“src”,source)
简化为
var source= 元素.src
第五章、动态创建标记
本章内容
传统技术: document write和innerHTML。
深入剖析DOM方法: createElement、createTextNode、 appendChild和insertBefore。
1. 传统方法
-
document.write()可以方便快捷的将字符串插入到文档里。
document.write("this is new addition") -
元素对象.innerHTML()可以向文档读取或写入大量的Html代码。
element.innerHTML="this is new addition";
2. DOM方法
-
createElement()方法
创建一个元素节点
document.createElement("节点名") -
appendChild()方法
将节点插入文档节点树
parent.appendChild(child) -
createTextNode()方法
创建一个文本节点
document.createTextNode("文本内容") -
insertBefore()方法,
将个一个元素插入到现有元素之前
//(1)新元素:你想插入的元素(newElement)。 //(2)目标元素:你想把这个新元素插入到哪个元素(targetE7ement) 之前。 //(3)父元素:目标元素的父元素(parentElement)。 //下面是这个方法的调用语法: parentElement.insertBefore(newElement , targetElement)
3. Ajax
XMLHttpRequest对象
- readyState属性
当一个XMLHttpRequest对象被创立后，readyState属性标示了当前对象处于什么状态，可以通过对该属性的访问，来判读此次请求的状态然后做出相应的操作，
case 0 :
未初始化状态，此时，已经创建了一个XMLHttpRequest对象，但是还没有初始化。
Case 1:
准备发送状态：此时，已经调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器。
case 2：
已发送状态，此时已经通过send方法把一个请求发送到服务器，等待响应。
case 3:
正在接收状态，此时已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到。
case 4:
完成响应状态，此时已经完成了HttpResponse响应的接收 - responseText属性
responseText属性包含客服端接收到的HTTP响应的文本内容，当readyState属性为0、1或2时，responseText属性包含一个空字符串：当readyState属性值为3时，响应中包含客服端还没完成的响应信息；当readyState属性值卫4，responseText属性才包含完整的响应信息。3 - responseXML属性
只有当readyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会有值并且被解析成一个XML文档，否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传，该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。 - status属性
status属性描述了HTTP状态代码，注意，仅当readyState属性值为3（正在接受中）或者4（已加载）时，才能对此属性进行访问。如果在readyState属性值小于3时，试图去读取status属性值，将引发一个异常。 - statusText属性
statusText属性描述了HTTP状态代码文本，并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。 - onreadystatechange事件
每当readyState属性发生改变时，就好触发onreadystatechange事件，一般都要通过该事件来触发回传处理函数。 - open()方法
XMLHttpRequest对象是通过调用open(method,uri,async,username,password)方法来进行初始化工作的。调用该方法将得到一个可以用来进行发送的对象，open有五个参数。
//method参数是必须的，用来指定发送请求的HTTP方法（GET,POST,PUT,DELETE,HEAD)参数要大写。
//async参数用用指定是否请求是异步的，默认是true。如果需要发送一个同步请求，需要把该参数设置为false。
//如果需要服务器验证访问用户的情况，可以设置username和password - send方法
调用open()方法后，就可以通过调用send()方法按照open方法设定的参数将请求进行发送。当open方法中async为true，在send（）方法调用后立即返回，否则将会中断直到请求返回。要注意的是，send方法必须在readyState为1时调用open方法以后才能调用。在调用send方法以后到接收响应信息知情，readyState属性的值将被设置成2.一旦接收到响应信息，readyState属性将被设为3.直到响应接收完成，readyState属性的值才会被设定为4。
send()方法使用一个可选的参数，该参数可以包含可变类型的数据。用户可以使用它并通过POST方法把数据发送到服务器。另外可以显示的使用null参数调用sned方法，这与不用参数调用该方法一样。对于大多数其他的数据类型，在调用send方法之前，应该使用setRequestHeader()方法先设置Content-Type头部，如果send（data)方法中的data参数的类型为DOMString,那么数据将被编码成UTF-8，如果是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。 - abort()方法
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收，并且将XMLHttp Request对象设置 为初始化状态。 - setRequestHeader()方法
该方法用来设置请求的头部信息。当readyState属性为1时，可以调用opne方法后调用这个方法；否则将得到一个异常。setRequestHeader(header,value)方法包含两个参数，第一个是header键名称，后一个是键值。 - getResponseHeader方法
此方法用于检索响应的头部值，仅能当readyState属性是3或者4（既响应头部可用以后）才可用调用该方法。否则，该方法返回一个空字符串。此外，还可以通过getAllResponse Header()方法获取所有的HttpResponse的头部信息。
代码：
//addLoadEvent声明
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
//根据浏览器不同，来获取XMLHttpRequest对象函数
function getHTTPObject()
{
if(typeof XMLHttpRequest=="undefine")
XMLHttpRequest=function(){
try{return new ActiveXObject("Msxml2.XMLHTTp.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTp.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTp.");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
//异步刷新核心代码
function getNewContent(){
var reqest = getHTTPObject();
if(reqest){
reqest.open("GET","example.txt",true);
reqest.onreadystatechange=function(){
if(reqest.readyState==4){
var para = document.createElement("p");
var txt = document.createTextNode(reqest.responseText);
para.appendChild(txt);
document.getElementById("new").appendChild(para);
}
}
reqest.send(null);
}
else{
alert("Sorry");
}
alert("Finish");
}
addLoadEvent(getNewContent);
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
