JavaScript讲义记录1-5

一、Web标准
网页由三部分组成   结构(Structure)，表现(Presentation)和行为(Behavior)。

 

二、JavaScript的语法
(一)

1.区分大小写
2.弱类型变量
3.每一句末尾都加分号
4.括号用于代码块

 

(二)变量： 由var关键字声明

 

(三)弱类型 但也提供数据类型 用typeof()方法查看类型  数据类型有：

1.字符串类型    有slice()和substring()等方法
2.数值类型      浮点  整型  负数
3.布尔值        true  false
4.数组          var aMap = new Array("China","USA","Britain");
  aMap.length是数组的长度   用aMap[2]取值

(四)字符串之间的比较："Pear"=="Pear"与Java不同

(五)函数：
function sayName(){

}

 

三.CSS基础
(一)CSS概念：层叠样式表，用于控制网页样式   并允许将样式信息与网页内容分离   的一种标记性语言。

(二)使用css控制页面的方式：
1.行内样式
2.内嵌式
3.链接式  例如：<link href="1.css" type="text/css" rel="stylesheet">
4.导入样式 @import url(1.css);

 

(三)CSS选择器：

1.标记选择器 
<style>
h1{
color:red;
font-size:25px;
}
</style>

 

2.类别选择器(html标记中有class属性)
<style>
  .class{
    color:red;
    font-size:25px;
  }
</style>

 

3.ID选择器(html标记中有ID属性)
  #ID{
    color:red;
    font-size:25px;
  }

(四)选择器可以集体声明，使用逗号分割

 

(五)选择器的嵌套：
标记中的父子关系：指的是p标记中的b标记的样式
p b{
color:red;
font-size:25px; 
}

 

(六)子选择器：ul只包含子标记li而不包含孙标记，同样li只包含a子标记而不包含它的孙标记
ul.myList > li > a{
color:red;
font-size:25px; 
}

四.CSS进阶
(一)div与span标记
<div></div>之间相对于一个容器，可以容纳段落，标题，表格，图片，乃至章节。摘要和备注等各种html元素。

(二)盒子模型：一个盒子由content、border、padding、margin四部分组成
content：内容
padding：空隙(填充)
border：边框
margin： 间隙(边界)
这四部分由内而外

(三)元素的定位：
1.float定位
2.position定位：absolute和relative
3.z-index空间位置

(四)CSS排版观念：
1.将页面用div分块
2.设计各个块的位置
3.用CSS定位

五.DOM模型：
(一)文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口，使用户对html有了空前的访问能力。

 

(二)DOM模型：树状结构，通过将html用DOM模型抽象，我们可以通过一个节点遍历其他所有的节点

 

(三)DOM模型中的节点：
1.元素节点
2.文本节点
3.属性节点
元素节点包含文本节点和属性节点

 

(四)DOM的使用
1.访问节点
getElementsByTagName 例如：var oli = document.getElementsByTagName("li");
getElementById  例如：var oli = document.getElementById("idname"); 

 

2.父子关系
例如：
var oUL = document.getElementById("myList");
//判断是否有子节点
if(oUL.hasChildNodes()){
 var oCh= oUL.childNodes;//得到的oCh是子节点数组
}

 

3.节点属性：通过获取和修改元素节点的属性节点来完成的
例如：
<img src="01.jpg" title="烟花">
var myImg = document.getElementsByTagName("img")[0];
alert(myImg.getAttribute("title"));

 

4.创建新节点
例如
var oP = document.createElement("p");
var oText = document.createTextNode("这是一段感人的故事");
oP.appendChild(oText);
document.body.appendChild(oP);

 

5.innerHTML:
该属性表示某个标记之间的所有内容，包括代码本身
该属性可以读取，同时还可以设置
例如：
<div id="myTest"></div>
var myDiv = document.getElementById("myTest");
alert(myDiv.innerHTML);
myDiv.innerHTML = "<img src='01.jpg' title='烟花'>";