精通javascript+jQuery（视频笔记）第二讲到第六讲
第二节：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 footer
css定位
第五节：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 onload="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 onload="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 onload="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 onload="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 onload="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 onload="myDOMInnerHTML()">
<div id="myTest">
<span>图库</span>
<p>这是一行用于测试的文字</p>
</div>
第六课：事件
事件流
事件监听
事件对象
冒泡型事件
<title>冒泡型事件</title>
<script language="javascript">
window.onload=function(){
var oP=document.getElementById("myP");
oP.onclick=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.onload=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.onload=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对象的一个属性event
oP.onclick=function(){ var oEvent=window.event;}
DOM中规定的event对象必须最为唯一的参数传给事件处理函数
oP.onclick=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.onload=function(){
var oImg=document.getElementsByTagName("img")[0];
oImg.onclick=handle;
oImg.onmouseover=handle;
}
</script>
</head>
<body >
<div >
<img src="01.jpg" border="0" />
<div id="display"></div>
</div>
