L2 JavaScript基础

2.1 语法

1、区分大小写；

2、弱类型变量；

3、每行结尾分号可有可无；

4、括号用于代码块；

5、注释方式与C、java相同；

2.2 变量：用var声明，命名规则同C；

2.3 数据类型

1、字符串

2、数值

3、布尔值：true false

4、数组：var a = new Array(xx, xx, xx);

2.4 条件语句

1、比较：==

2、逻辑：与&& 或|| 非!

3、if 同 C

4、switch

2.5 循环语句

1、while

2、for

2.6 函数

1、用function 定义：

function functionName([arg0, arg1, ..., argN]){

  statements

  [return [expression]]

}

L3 CSS基础

3.1 概念

Cascading Style Sheet，层叠样式表，控制网页样式并允许样式信息与网页内容分离的一种标记性语言。

传统HTML语言的缺陷：修改麻烦，

CSS的引入：style标签

3.2 使用CSS控制页面

1、行内样式：在代码中使用style属性直接定义样式，与html没有本质区别

2、内嵌式：用style将格式单独分离出来。

3、链接式：对整个网站来说使用广泛，使用link标记，与外部文件超链接

4、导入样式：与链接式基本相同，使用import语句导入外部文件

3.3 CSS选择器

1、标记选择器：

h1 {color : red; font-size : 25px;}

标记选择器名  {属性:值; 属性:值;}

2、类别选择器

.class {color : green; font-size : 20px;}

.类别选择器名  {属性:值;}

3、ID选择器

#id {color : green; font-size : 20px;}

ID选择器 {属性:值;}

4、选择器的集体声明，用逗号分隔

5、选择器的嵌套：用空格隔开，表示子标记

6、子选择器：与嵌套基本相同，但定义了子标记的范围(用>号表示)

L4 CSS进阶

4.1 div与span标记

1、<div>(division)区块容器标记，即<div>...</div>之间相当于一个容器，可容纳段落、标题、表格、图片乃至章节、摘要和备

注等各种html元素。

2、div与span的区别：span为行内标记，div整体换行

4.2 盒子模型：一个盒子由content、border、padding、margin四部分组成。

4.3 元素的定位

1、float定位：悬浮

2、position定位：absolute、relative

3、z-index空间位置：叠加的顶层底层位置

4.4 CSS排版观念

1、将页面用div分块

2、设计各个块的位置

3、用CSS定位

L5 DOM模型

5.1 DOM 模型框架

文档对象模型DOM（Document Object Module）定义了操作文档对象的接口。

5.2 DOM模型中的节点

1、元素节点

2、文本节点

3、属性节点

5.3 使用DOM

1、访问节点：

  document.getElementsByTagName

  document.getElementById

 

2、父子关系

  hasChildNodes()

  childNodes

3、节点的属性

  getAttribute("...")

4、创建新节点

  createElement("...")

  createTextNode("... ")

  appendChild()

5.4 innerHTML

表示某个标记之间的所有内容，包括代码本身。该属性可以读取，同时还可以设置。

L6 JavaScript事件

6.1 事件流

1、冒泡型事件：事件会由子节点向父节点传递，各个节点会调用各自的响应函数。

2、捕获型事件

6.2 事件监听

1、简单的通用方法

window.onload = function(){

  var xx = document.getElementById("...");

  xx.onclick = function(){... } //处理对象点击的响应函数

}

2、IE：

绑定监听事件：对象.attachEvent（“事件名”， 响应函数）

撤销监听事件：对象.detachEvent（“事件名”， 响应函数）

3、标准DOM

对象.addEventListener(“事件名”，响应函数，false); //添加监听函数

对象.removeEventListener(“事件名”，响应函数，false); //撤销监听

6.3 事件对象

1、IE浏览器事件对象是windows对象的一个属性event

oP.onclick = function(){

  var oEvent = window.event;

}

2、DOM中规定event对象必须作为唯一的参数传给事件处理函数

oP.onclick = function(oEvent){

  ...

}

3、兼容浏览器通常采用的方法

oP.onclick = function(oEvent){

  if(window.event) oEvent = window.event;

}

4、一系列属性、方法

5、事件类型

event.type 事件类型，如：click，mouseover等

L7 表格与表单

7.1 动态控制表格

1、动态添加

var oTr = document.getElementById("Id名...").insertRow(n) //以0为首行，在第n行插入

var oTd = oTr.insertCell(i); //添加单元格

oTd.appendChild(oText[i]); //添加文本属性

2、动态删除

var oTb = document.getElementById("...");

oTb.deleteRow(n);  //删除第n行，后面行号自动补齐

oTb.rows[2].deleteCell[i];  //删除一个单元格，后面单元格自动补齐

7.2 表单基础

1、可通过document.form集合来引用表单：

document.forms["myForm1"];

其中html部分可能为：<form method="post" name="myForm1" action="addInfo.aspx">

2、基本表单元素

label标记可以使界面更加友好。

元素：input type = "..." text/password/radio/checkbox/submit/reset

  select name = "..."

  textarea

7.3 文本框

1、控制字符个数：

  单行文本框的maxlenth属性；

  <textarea>的字符个数：maxlenth = "50" onkeypress = "return LessThan(this);"

  function LessThan(oTextArea) {

    return oTextArea.value.lenth < oTextArea.getAttribute("maxlenth");

}

2、自动选择文本

  鼠标经过时自动聚焦，且能选中默认值以便用户直接删除。代码：

input type = "text" onmouseover = "this.focus()" onfocus = "this.select()"

L8 调试与优化

8.1 错误和异常

1、拼写错误，字母区分大小写

2、访问不存在的变量

3、括号不匹配

4、字符串等变量连接错误

5、等号与赋值（== 与 =的区别）

8.2 错误处理

1、onerror事件

window.onerror = function(){

  alert("出错啦！");

}

2、try...catch语句

try{

  alert("this is an example");

  alert(fresheggs);  //此处出错

} catch() {

  var sError = "";

  for(var i in exception)

    sError += i + ":" + exception[i] + "\n";

    alert(sError);

}

8.3 调试器

1、Firefox错误控制台

2、Microsoft Script Debugger

3、Venkman（firefox插件，功能强大）

8.4 JavaScript优化

1、下载时间：更小更精简，节省空格等字符。

2、使用内置函数

3、最小化语句数量

L9 Ajax

9.1 认识Ajax

1、异步JavaScript与XML（Asynchronous JavaScript And XML）

2、传统web采用同步交互形式，用户发送请求，服务器根据请求执行后返回结果，存在用户等待。

3、Ajax采用异步交互形式。

4、Ajax组成：JavaScript、CSS、DOM、XMLHttpRequest对象

9.2 XMLHttpRequest对象

1、异步对象链接服务器

(1) 创建：

var xmlHttp;

function createXMLHttpRequest() {

  if(window.ActiveXObject) //IE浏览器

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE创建异步对象

  else if(window.XMLHttpRequest) //其他浏览器采用标准DOM创建

    xmlHttp = new XMLHttpRequest();

}

(2) 请求：

xmlHttp.open("GET", "9-1.aspx", true);  //以异步方式（true）获取（GET）9-1.aspx文件

(3) onreadystatechange事件

xmlHttp.onreadystatechange = function() {

  if(xmlHttp.readyState == 4 && xmlHttp.Status == 200) //4表示与服务器交互成功，200表示服务器状态ok

    //do something

}

(4) send()发送

xmlHttp.send(null)； //

2、GET VS. POST

（1）GET

var queryString = "firstName=isaac&birthday=0624";

//getTime()使得每一次点击发送不同数据，欺骗IE浏览器强制刷新

val url = "9-3.aspx?" + queryString + "&timestamp=" + new Date().getTime();

xmlHttp.open("GET", url);

xmlHttp.send(null); //该语句只发送null

（2）POST

var queryString = "firstName=isaac&birthday=0624";

val url = "9-3.aspx?timestamp=" + new Date().getTime(); //使得每一次点击发送不同数据，欺骗IE浏览器强制刷新

xmlHttp.open("POST", url);

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send(queryString); //该语句负责发送数据

（3）在上述两种情况中，9-3.aspx的内容：

if (Request.HttpMethod == "POST")

  Response.Write("POST:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);

else if(Request.HttpMethod == "GET")

  Response.Write("GET:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);

L10 jQuery基础

10.1 jQuery概述

1、是一个优秀的JavaScript框架。主要提供以下功能：

（1）、访问页面框架的局部

（2）、修改页面的表现（Presentation）

（3）、更改页面的内容

（4）、响应事件

（5）、为页面添加动画

（6）、与服务器异步交互

（7）、简化常用的JavaScript操作（数组操作、迭代等）

2、隔行变色的表格

（1）用CSS实现：使用class类别名标注不同的行（tr），统一更改。

（2）用JavaScript实现

window.onload = function(){

  var oTable = document.getElementById("oTable");

  for (var i = 0; i < oTable.rows.lenth; i++) {

    if (i % 2 == 0) //判断是偶数行

      oTable.rows[i].className = "altrow"; //动态设置类别名

  }

}

（3）jQuery实现

<script language="javascripte" src="jquery.min.js"> </script>

$(function() {

  $("table.datalist tr:nth-child(odd)").addClass("altrow");

})

10.2 jQuery的“$”

1、选择器

2、功能函数的前缀

var nString = "    1234567890";

nString = $.trim(nString); //用功能函数去掉字符串前面的空格

3、window.onload

（1）window.onload的冲突

（2）ready方法

$(document).ready(function() {

  ...

});

或者

$(function() {

  ...

});

4、创建DOM元素

var oNewP = $("<p>这是一个感人的故事</p>");

oNewP.insertAfter("#myTarget");

10.3 选择器

1、属性选择器

$(function(){

  $("ul li ul li:has(a)").addClass("myClass");

})

2、位置选择器

$(function(){

  $("p:lt(2)").addClass("myClass"); //p标记的集合，且是选择2之前的标记

})

L11 jQuery控制页面

11.1 标记的属性

1、获取属性的值

2、设置属性的值

11.2 元素的样式

1、添加CSS类

2、动态切换

11.3 页面的元素

1、直接获取、编辑内容：text()和html()方法

2、克隆元素：clone()方法

11.4 jQuery处理事件 （代码比较复杂）

1、事件监听，不用判断浏览器兼容性

2、移除事件监听

L12 jQuery制作动画

12.1 元素的显示与隐藏

1、show()和hide()方法

12.2 渐入渐出的变幻

1、show()和hide()方法中加入参数，表示显示或隐藏的时间，单位ms

2、fadeIn()和fadeOut()方法，也有参数，表示时间，渐隐和渐显效果

12.3 幻灯片效果

1、slideUp()和slideDown()，参数表示时间，模拟ppt拉窗帘效果

L13 jQuery功能函数

13.1 浏览器的检测

1、$browser对象

13.2 盒子模型

1、标准盒子模型

2、IE盒子模型

3、$.boxModel对象，用于检测盒子模型。

4、盒子模型也可以统一，主要是声明，DOCTYPE

13.3 处理JavaScript对象

1、$.each()遍历

（1）$.each(obj, func);  //对象和函数

（2）获取未知对象的信息；

2、数据过滤

3、数组的转化

L14 jQuery与Ajax

14.1 获取异步数据

1、传统方法

2、jQuery的load()方法

function startRequest() {

  $("#target").load("14-1.aspx");

}

14.2 GET VS. POST （get和post的工作机制还是没搞清楚！）

$.get(url, [data], [callback])

$.post(url, [data], [callback], [type])

14.3 控制Ajax

1、设置Ajax的细节

  $.ajax(options)

2、全局设定Ajax

  $.ajaxSetup(options)

L15 jQuery 插件

15.1 表单插件 Form Plugin

jquery.form.js文件，提供获取表单数据、重置表单项目、使用ajax提交数据等功能。

15.2 UI插件

实现特效，如鼠标拖拽、拖入购物车等。