精通JavaScript+jQuery.学习小结.v1.0.docx

第0课 课程内容概述JavaScript与“可编程”- JavaScript使网页具备了“可编程”的特性- 通过浏览器内置的JavaScript解释器，JavaScript程序可以使HTML动态化，形成DHTML为什么JavaScript越来越重要- 面向机器的变成面向虚拟机的编程- ECMAScript的广泛应用：JavaScript/Flash/Silverlight/- 学习JavaScript包含三个部分- ECMAScript，语言规范- DOM- BOM学习方法建议- 重视基础，先掌握JavaScript，在学习JQuery或其他专业- 学习相关的计算机专业基础课程：高级语言/数据结构/算法基础- 程序=数据结构+算法- 实践+钻研- 学会提问和寻找答案- 学会调试第1课 JavaScript简介JavaScript的起源- 1992年，Nombas公司开发出C-（C-minus-minus）的嵌入式脚本语言- Netscape公司开发LiveScript，于1995年11月与Sun公司联合把其改名为JavaScript- IE 3.0中搭载JavaScript的克隆版本，命名为Jscript- 第39届技术委员会（TC39），最终锤炼出ECMA-262标准- 2005年初，Google公司的网上产品使得Ajax兴起并受到广泛好评JavaScript的实现- ECMAScript- DOM- BOMWeb标准- 结构（Structure）- 表现（Presentation）- 行为（Behavior）第2课 JavaScript基础2.1 JavaScript的语法-区分大小写-弱类型变量【案例】var age=25; var name=”Dennis”; var result=true;- 每行结尾的分号可有可无，但是好的编程习惯，建议在结尾加上分号- 括号用于代码块- 注释的方式与C语言、Java语言相同2.2 变量-JavaScript中变量是通过var关键字（variable的缩写）来声明的，例如：var boy=”isaac”-首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）-余下的字母可以是下划线、美元符号、任意字母或者数字字符-变量名不能是关键字或者保留字2.3 数据类型-字符串-数值-布尔值-数组var aMap = new Array(China,USA,Britain);alert(aMap.length + + aMap2);2.4 条件语句-比较操作符： =-逻辑操作符：& | !-if语句-switch语句2.5 循环语句-while语句-for语句【语法】for(initialization;expression;post-loop-expression)statement2.6 函数【语法】function functionName(arg0,arg1,argN)statementsreturn expression第3课 css基础3.1 css的概念-css（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是实现页面表现（Presentation）的核心元素-传统HTML的缺陷-css的引入3.2 使用css控制页面-行内控制，就是给标记添加style属性，用;隔开CSS内容1- 内嵌式- 链接式其中，1.css文件内容如下：h2color:#0000FF;pcolor:#FF33CC;text-decoration:underline;font-style:italic;font-size:28px;- 导入样式3.3 css选择器-标记选择器- 类别选择器class类别选择器1- ID选择器ID选择器使用1- 选择器的集体声明- 选择器的嵌套选择器嵌套使用CSS标记的方法选择器嵌套之外的标记并不生效- 子选择器ul.myList li a/* 子选择器 */text-decoration:none;/* 没有下划线 */color:#336600;isaacs Picasa CSS1 第4课 css进阶4.1 div与span标记- 在使用css排版的页面中，与是两个常用的标记。（division）简单而言是一个区块容器标记，即之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节】摘要和备注等各种HTML元素- div与span的区别-div换行-span行内块元素，不换行-案例这是一个div标记4.2 盒子模型-一个盒子由content、border、padding、margin这四部分组成，如下图所示4.3 元素的定位-float定位-position定位-absolute-relative-z-index空间位置，对于position设置为absolute4.4 css排版观念- 将页面用div分块- 设计各个块的位置- 用css定位第5课 DOM模型5.1 DOM模型框架-文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前空前的访问能力5.2 DOM模型中的节点-元素节点-文本节点-属性节点5.3 使用DOM-访问节点-document.getElementsByTagName-document.getElementById-父子关系-节点的属性-创建新节点function createP()var oP = document.createElement(p);var oText = document.createTextNode(这是一段感人的故事);oP.appendChild(oText);document.body.appendChild(oP);事先写一行文字在这里，测试appendChild()方法的添加位置5.4 innerHTML-innerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持-该属性表示某个标记之间的所有内容，包括代码本身-该属性可以读取，同时还可以设置function myDOMInnerHTML()var myDiv = document.getElementById(myTest);alert(myDiv.innerHTML);/直接显示innerHTML的内容/修改innerHTML，可直接添加代码myDiv.innerHTML = ;图库这是一行用于测试的文字第6课 事件6.1 事件流-冒泡型事件- 捕获型事件（IE不支持）6.2 事件监听-简单的通用方法-IE浏览器-标准DOM浏览器，如firefox6.3 事件对象-IE浏览器中事件对象是window对象的一个属性eventoP.onclick=function()var oEvent = window.event;- DOM中规定event对象必须作为唯一的参数传给事件处理函数oP.onclick=function(oEvent)/- 因此，为了兼容两种浏览器，通常采用下面的方法oP.onclick=function(oEvent) if(window.event) oEvent = window.event;- 一些列属性和方法- 事件类型第7课 表格与表单7.1 动态控制表格-动态添加-获取表格的引用-插入一行-添加单元格内容-将单元格添加到行-动态删除-获取表格的引用-删除一行-删除一个单元格内容7.2 表单基础-可以通过document.form集合来引用表单，例如一个name属性为“myForm1”的表单可以用如下语句来获得：document.form “myForm1”其中，HTML部分为：- 基本的表单元素7.3 文本框-控制字符个数-单行文本框的maxlength属性-的字符个数-自动选择文本-鼠标经过时自动聚焦，并且能够选中默认值以便用户直接删除第8课 JavaScript的调试与优化8.1 错误和异常-拼写错误-访问不存在的变量-括号不匹配-连接错误-等号与赋值8.2 错误处理-onerror事件-trycatch语句8.3 调试器- firefox错误控制台-Microsoft Script Debugger-Venkman，针对firefox的一个强大插件8.4 JavaScript优化-下载时间-使用内置函数-最小化语句数量第9课 Ajax9.1 认识Ajax-Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML）是相对较新的名字，通常被人们亲切的称作“阿贾克斯”-传统的web采用同步交互的形式，即用户向服务器发送一个请求，然后服务器根据用户的请求执行相应的任务，并返回结果-Ajax与传统的web应用不同，它采用的是异步交互的方式-Ajax的组成部分-JavaScript-CSS-DOM-XMLHttpRequest对象9.2 XMLHttpRequest对象-异步对象链接服务器-创建var xmlHttp;function createXMLHttpRequest()if(window.ActiveXObject) xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);else if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();- 建立请求xmlHttp.open(“GET”,”9-1.aspx”,true)GET：访问服务器的方式9-1.aspx：异步请求的地址true：true表示为异步，false为传统的同步- onreadystatechange事件，判断异步请求和服务器之间交互的状态/当服务器的状态发生变化的时候，即调用该函数xmlHttp. onreadystatechange = function() /是否发生交互以及服务器状态是否准备好if(xmlHttp.readyState = 4 & xmlHttp.status = 200) /do something- send发送/GET异步请求xmlHttp.send(null);/POST异步请求xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xmlHttp.send(数据);- GET vs POST第10课 JQuery基础10.1 JQuery概述-JQuery是一个优秀的JavaScript框架-主要提供如下功能-访问页面框架的局部-修改页面的表现（Presentation）-更改页面的内容-响应时间-为页面添加动画-与服务器异步交互-简化常用的JavaScript操作-隔行变色的表格-css-JavaScript-JQuery-下载并使用JQuery-官方网站（/）-不需要任何安装过程10.2 JQuery的“$”-选择器-功能函数前缀-window.onload-window.onload的冲突-ready()方法，代替window.onload$(document).ready(function()/);$(function()/);- 创建DOM元素10.3 选择器-属性选择器-位置选择器第11课 JQuery控制页面11.1 标记的属性-获取属性的值-设置属性的值11.2 元素的样式-添加css类-动态切换css样式11.3 页面的元素-直接获取、编辑内容-text方法-html方法-克隆元素11.4 JQuery处理事件-事件监听-移除事件监听第12课 JQuery制作动画与特效12.1 元素的显示与隐藏-show( )和hide( )12.2 渐入渐出的变换-再探show(minus)和hide(minus)-fadeIn( )与fadeOut( )12.3 幻灯片效果-slideUp(minus)和slideDown(minus)来模拟PPT中的类似幻灯片拉窗帘的特效第13课 JQuery的功能函数13.1 浏览器的检测-$.browser对象属性说明msie如果是IE浏览器则为true，否则为falsemozilla如果是mozila相关的浏览器则为true，如firefox、caminosafari如果是safari浏览器则为true，否则为falseopera如果是opera浏览器则为true，否则为falseversion浏览器的版本号13.2 盒子模型-标准盒子模型-IE盒子模型- $.boxModel对象，判断是什么盒子模型- 声明DOCTYPE，指定使用什么盒子模型13.3 处理JavaScript对象-$.each( )遍历-$.each(object,fn);-获取未知对象的信息-数据过滤-grep( )-数组的转化-map( )第14课 JQuery与Ajax14.1 获取异步数据-传统方法-JQuery的load( )方法14.2 GET vs POST-$.get(url, data, callback)-$.post(url, data, cal