第二节：Javascript基础
主要讲了三方面的内容：语法 语句 函数
数据类型：
字符串类型：slice 和substring slice（1，3）从第二个取到第三 个 substring一样 slice（4） 从第五个开始到最后数值类型 alert进行输出
布尔值 true不加引号 通过typeof（）判断类型
数组 var aMap= new array 通过amap.length 判断长度
语句： 比较和逻辑操作符 输出document.write
> < == && || ！
if语句 用Number（prompt）prompt 是手工输入转换转换成数值类
型 用isNaN来判断是否为数值型swich语句
循环语句：while语句声明变量 循环语句 输出
for语句函数： function sayName（sName）{alert ("hello"+sName);}
sayName("freshegas"); 文本框输出： hello freshegas第三节：Css
@import url（1.css）
标记选择器 h1
类别选择器 .class
ID选择器 #id
选择器的嵌套声明 p b
子选择器 例子：ul.11>li>a 只有a标记中起作用 如果去了大于号
那么所有的li都起作用<ul class="11">
<li> <a href></a> <ul><li></li></ul> </li></ul>第四节：Css进阶
div和span标记的区别 块 行内
盒子模型 content border padding margin
float定位
position：absolute relative
z-index排版：
container banner content links footercss定位第五节：dom模型
document object moudle 文档对象模型
dom模型中的节点： 元素节点 文本节点 属性节点
如何使用： 访问节点： getElementsByTagName
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>getElementByTagName</title><script language="javascript">function searchDOM(){ //放在函数内，页面加载完成后才用<body>的onload加载 var oLi=document.getElementsByTagName("li"); //输出长度、标签名称以及某项的文本节点值 alet(oLi.length+" "+oLi[0].tagName+" "+oLi [3].childNodes[0].nodeValue); var oUl=document.getElementsByTagName("ul"); var oLi2=oUl[1].getElementByTagName("li"); alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2 [1].childNodes[0].nodeValue); }</script></head><body οnlοad="searchDOM()">
<ul>客户端语言 <li>HTML</li> <li>JavaScript</li> <li>CSS</li></ul><ul>服务器端语言 <li>ASP.NET</li> <li>JSP</li> <li>PHP</li> </ul></body>
</html>说明： childNodes是元素的子节点 nodevalue是元素值 getElementById<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>getElementById</title><script language="javascript">function searchDOM(){ var oLI=document.getElementById("cssLi"); alert(oLI.tagName+" "+oLI.childNodes[0].nodeValue); }</script></head> <body οnlοad="searchDOM()"><ul>客户端语言 <li>HTML</li> <li>JavaScript</li> <li id="cssLI">CSS</li></ul><ul>服务器端语言 <li>ASP.NET</li> <li>JSP</li> <li>PHP</li> </ul></body>
</html> 父子关系childnodes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>getElementById</title><script language="javascript"> function myDOMInspector(){ var oUl=document.getElementById("myList"); varDOMString=""; if(oUl.hasChildNodes()){ var oCh=oUl.childNodes; for(var i=0; i<oCh[i].length;i++) DOMString+=oCh[i].nodeName+"\n"; } alert(DOMString); }</script></head><body οnlοad="myDOMInspector()"><ul id="myList"> <li>糖醋排骨</li> <li>泡菜与</li> <li>半勺立即</li> <li>麻婆豆腐</li></ul></body></html>节点的属性
<script language="javascript"> function myDOMInspector(){ //获取图片 var myImg=document.getElementsByTagName("img")[0]; //获取图片title属性 alert(myImg.getAttribute("title")); }</script>
</head><body οnlοad="myDOMInspector()"><img src="01.jpg" title="情人坡" />创建新节点
<script language="javascript"> function creatP(){ var oP=document.createElement("p"); var oText=document.createTextNode("这是一段感人的故 事"); oP.appendChild(oText); document.body.appendChild(oP); }</script>
</head><body οnlοad="creatP()"><p>事先写一行文字在这里，测试appendChild()方法的添加位置</p>innerHTML 表示某个标记之间的所有内容，包括代码本身
<script language="javascript"> function myDOMInnerHTML(){ var myDiv=document.getElementById("myTest"); alert(myDiv.innerHTML); //直接显示innerHTML的内容 myDiv.innerHTML="<img src='01.jpg' title='情人坡'>"; }</script>
</head><body οnlοad="myDOMInnerHTML()"><div id="myTest"> <span>图库</span> <p>这是一行用于测试的文字</p></div>第六课：事件
事件流事件监听事件对象冒泡型事件
<title>冒泡型事件</title><script language="javascript">window.οnlοad=function(){ var oP=document.getElementById("myP"); oP.οnclick=function(){alert('我被电击了');} }</script></head><body ><div > <p id="myP">Click Me</p></div>捕获型事件（ie不支持）事件的监听
简单的通用方法（不能将方法删除）ie<title>IE的监听函数</title><script language="javascript">function fnClick(){ alert("我被点击了"); oP.detachEvent("onclick",fnClick); //点击了一次删 除监听函数window.οnlοad=function(){
oP=document.getElementById("myP"); //找到对象 oP.attachEvent("onclick",fnClick); //添加监听函数 }</script></head><body ><div > <p id="myP">Click Me</p></div>标准DOM的事件监听<title>标准DOM的监听函数</title><script language="javascript">function fnClick1(){ alert("我被fnClick1点击了"); //oP.removeEventListener("click",fnClick2,false); //点击了一次删除监听函数}function fnClick2(){ alert("我被fnClick2点击了"); //oP.removeEventListener("click",fnClick2,false); //点击了一次删除监听函数}var oP;window.οnlοad=function(){ oP=document.getElementById("myP"); //找到对象 oP.addEventListener("click",fnClick1,false); // 添加监听函数2 false表示是采用冒泡型函数 oP.addEventListener("click",fnClick2,false); //添 加监听函数2 }</script></head><body ><div > <p id="myP">Click Me</p></div>事件对象
IE浏览器中事件对象是window对象的一个属性eventoP.οnclick=function(){ var oEvent=window.event;}DOM中规定的event对象必须最为唯一的参数传给事件处理函数oP.οnclick=function(oEvent){}兼容浏览器 oP.onclik=funtion(oEvent){if(window.event)
oEvent=window.event;}事件类型
<script language="javascript">function handle(oEvent){ var oDiv=document.getElementById("display"); if(window.event)oEvent=window.event; if(oEvent.type=="click") oDiv.innerHTML+="你点击了我  " else if(oEvent.type=="mouseover") oDiv.innerHTML+="你移动到了我上方  "}var oP;window.οnlοad=function(){ var oImg=document.getElementsByTagName("img")[0]; oImg.οnclick=handle; oImg.οnmοuseοver=handle; }</script></head><body ><div > <img src="01.jpg" border="0" /> <div id="display"></div></div>