精通javascript+jQuery（视频笔记）第二讲到第六讲-CSDN博客

第二节：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都起作用

第四节：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 ο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对象的一个属性event
oP.ο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+="你点击了我&nbsp  "
else if(oEvent.type=="mouseover")
oDiv.innerHTML+="你移动到了我上方&nbsp  "
}
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>