1 Aptana插件安装
1、Aptana插件安装
<1>Aptana是一个非常强大，开源，JavaScript-focused的AJAX开发IDE。
<2>它的特点包括：
JavaScript，HTML，CSS语言的Code Assist功能。
Outline(大纲)：显示JavaScript，HTML和CSS的代码结构。
<3>支持各种JS框架：JQuery、Ext、Dojo、Prototype、Yahoo User Interface。
<4>安装Aptana插件
方法一：（适合于myeclipse8.5以上版本及eclipse3.2以上版本（不包含4.2版本））
解压apatana_update.zip—>将除了features、plugins两个包之外的所有文件删除—>在此目录下，新建一个eclipse文件夹—>然后将features、plugins两个文件剪切到eclipse文件夹中—>在MyEclipse的dropins目录下创建一个aptana文件夹，并且把eclipse文件夹剪切进去。
方法二：（适合于myeclipse8.5以下版本及eclipse3.2以下版本）
将上面创建的aptana文件夹放在任意一个目录下—>在MyEclipse的根目录下创建一个links文件夹—>在此文件夹下创建一个aptana.link—>在此文件中写入path=E:/目录\aptana或者path=E:/目录/aptana
<5>查看是否安装成功
方法一：
点击windows—>查看是否有My Aptana
方法二：
点击windows—>Preferences—>Aptana
<6>修改相关设置
①Windows—>Preferences—>Aptana—>My Aptana/Message—>Never display after startup。
②Windows—>Preferences—>Aptana—>Browsers/User Agent—>IE&Mozilla。
③Windows—>Preferences—>Aptana—>Editors—>JavaScript—>Code Assist—>DOM0、DOM1&2、DOM3、DOM5、jQuery1.3。
④Windows—>Preferences—>Editors—>File Association—>File types:*.html、Assocaited editors:Aptana。
⑤Windows—>Preferences—>Editors—>HTML—>Initial HTML file contents:设置charset为utf-8。
2、
2 JavaScript基础知识
1、JavaScript发展历史
<1>95年网景(Netscape)个公司推出LiveScript。在此之前，没有所谓的前端技术。所有的服务都需要由服务器端进行操作。当时的目的是同时在客户端和服务器端使用。
<2>由Netscape(网景)公司联合SUN公司完善LiveScript。此时，Netscape公司将LiveScript更名为JavaScript。目的是利用Java语言的流行。
<3>微软在推出IE3.0时，使用了JavaScript的克隆版本，Jscript。
<4>此时，JavaScript拥有多个版本：版本不统一的问题出现！
<5>97年JavaScript1.1由欧洲计算机制造商协会定义。此举，只为JavaScript语言定制统一的语言版本。该全新版本的推出，更名为ECMAScript。该版本由Netscape、Sun、微软共同定义。
<6>微软的IE浏览器产品的推广，间接推广了JavaScript。（JavaScript脚本语言已经成为浏览器的必要组建、JavaScript语言的版本问题越加突出）。
<7>JavaScritp语言的版本不统一问题至今仍为解决！
2、JavaScript的核心组成部分
- ECMAScript
ECMAScript是一种脚本语言的标准，ECMA-262标准。
该标准不仅限于JavaScript语言使用，例如ActionScript语言中的标准也为ECMA-262标准。
ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符和对象。 - BOM：全称：Browser Object Model，译为浏览器对象模型。
- DOM：全称：Document Object Model，译为文档对象模型。
3、script标签属性说明：
type：text/javascript，指定使用的脚本语言。
language：JavaScript，也是指定使用的脚本语言，弃用！
src：载入外部JavaScript脚本代码（路径可以是绝对路径和相对路径）。
4、ECMAScript入门
- 区分大小写：与Java一样。变量、函数名、运算符以及其他一切东西都是区分大小写的。
- 变量是弱类型的：与Java不一样。ECMAScript中的变量无特定的类型，定义变量时只用var运算符，可以将它初始化为任意的类型。变量的类型取决于给变量赋值的内容。
- 每行结尾的分号可有可无：与Java不一样。如果一条语句的结尾没有分号表明结束的话，前提是这样没有破坏代码的语义。最好的编码习惯是加入分号。
- 注释：与Java一样。支持//、/**/这几种常见的注释方式。
- {}括号表明代码块：与Java一样。
5、BOM简介
浏览器内置对象的介绍
- Navigator对象：浏览器对象，包含了正在使用的Navigator的版本信息。反映了当前使用的浏览器的资料。JavaScript 客户端运行时刻引擎自动创建navigator对象。
- Window对象：表示的是浏览器窗口。最顶层的对象, window的属性对应于整个窗口。
- Document对象：文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从到的内容。
- Links对象：是一个数组，包含了文档中所有连接标记（包含href属性的标记和
- Archors对象：是一个数组，包含了文档中所有锚标记（包含name属性的标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。
- Forms对象：是一个数组，包含了文档中所有的表单（）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在标记中加上“name=”…“”属性，那么直接用“document.<表单名>”就可以引用了。
- Images对象：图片对象 document.images[] 是一个数组，包含了文档中所有的图片（）。
- Frame 对象：是 window 对象。用最容易理解的话说，每一个HTML 文件占用一个 window 对象， 包括定义框架的网页（“框架网页”）。
- Location对象：地址对象 它描述的是某一个窗口对象所打开的地址。window.location = “链接地址”;
- History对象：历史对象包含了用户已浏览的 URL 的信息，是指历史对象指浏览器的浏览历史。back() 后退，跟按下“后退”键是等效的。forward()前进，跟按下“前进”键是等效的。
6、浏览器内置对象的特点：
- 每个对象有它自己的属性、方法和事件。
- 对象的属性是反应该对象某些特定的性质的。
例如：字符串的长度、图像的长宽等等。 - 对象的方法能对该对象做一些事情。
例如：表单的“提交”等等。 - 对象的事件能响应发生在对象上的事情。
例如：提交表单产生表单的“提交事件”。
7、DOM简介
<1>DOM的特点
- DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。
- DOM可以用于任何编程语言。
- DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。
- DOM实际上是以面向对象方式描述的文档模型。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
- DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。
- DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）。
<2>DOM规范级别 - DOM Level1
DOM Level1是W3C于1998年10月提出的第一个正式的W3C DOM规范。它由DOM Core和DOM HTML两个模块构成。前者提供了基于XML的文档结构的结构图，以方便访问和操作文档的任意部分；后者提供了一些HTML专用的对象和方法，从而扩展了DOM Core。
DOM Level1主要目标是合理规划文档的结构。它的最大缺陷就是忽略了事件模型、其中包括NN2和IE3中最简单的事件模型。 - DOM Level2
DOM Level2基于DOM Level1并扩展了DOM Level1，添加了鼠标和用户界面事件、范围、遍历（重复执行DOM文档的方法）、XML命名空间、文本范围、检查文档层次的方法等新概念，并通过对象接口添加了对CSS的支持。同时引入几个新模块，用以处理新的接口类型，包括：
DOM视图——描述追踪文件的各种视图（即CSS样式化之前和CSS样式化之后的文档）的接口；
DOM事件——描述事件的接口。
DOM样式表——描述处理基于CSS样式的接口；
DOM遍历和范围——描述遍历和操作文档树的接口。
<3>DOM Level3
DOM Level3引入了以统一的方式载入和保存文档的方法（包含在新模块DOM Load and save中）以及验证文档（DOM Validation）的方法，从而进一步扩展了W3C DOM规范。
在DOM Level3中，DOM Core被扩展为支持所有的XML1.0特性，包括XML Infoset、XPath和XML Base，从而改善了DOM对XML的支持。
<4>DOM Level0
DOM Level0不是W3C标准。而仅仅是对在Netscape Navigator 3.0和Microsoft Internet Explorer3.0中的等价功能性的一种定义。DOM Level0其实就是定义的一些Document对象的属性和方法。
8、JavaScript基础
<1>函数通常都会有返回值，如果某个函数没有显示的返回值，我们就会默认它的返回值是undefined。
<2>一个函数只能有一个返回值，如果我们需要同时返回多个值，可以考虑将其放进一个数组里，以数组元素的形式返回。
<3>JavaScript中可以用一个var语句定义两个或多个变量：var test1=“hello”，test2=“world”。
<4>通过构造函数的方法，创建函数。例如：var add = new Function(‘a’,‘b’,‘return a+b’);alert(add(1,3));
3 BOM的几个常用的内置对象
window对象的一些有用的属性：decument、history、location、navigator、opener（返回创建此窗口的窗口的引用）、parent（返回父窗口）。
<1>window对象的几个重要函数
<2>获取form的两种方法
<3>form表单元素调用js函数
<4>利用form对象的属性更改form表单的属性并且利用函数进行提交
4 DOM基础知识
1、DOM树结构
注：属性节点不属于子节点。
- 节点
每一个HTML标签都是一个元素节点。
标签中的文本则是文本节点。
标签的属性是属性节点。
2、核心Document对象
<1>document.documentElement属性
document.documentElement属性是访问文档根元素的快捷方式。对于在浏览器中呈现的HTML文档而言，所谓的根元素就是标签。
<2>使用Document对象的方法查找Element对象
getElementById、getElementsByName、getElementsByTagName。
<3>使用Document对象的方法创建节点
createElement(tagName):创建元素节点
createTextNode(data):创建文本节点
createAttribute(name):创建属性节点
<4>核心Element对象
- 操纵Element对象的属性
获取属性：getAttribute(name)方法
设置属性：setAttribute(name,value)方法
删除属性：removeAttribute(name)方法
获取属性节点：getAttributeNode(name)方法
设置属性节点：setAttributeNode(name,value)方法
删除属性节点：removeAttributeNode(name)方法
<5>在Element对象中查找Element对象
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法，而该方法返回的是一个集合。
<6>节点名称、值和类型
- nodeName:其内容是给定节点的名字
如果节点是元素节点，nodeName返回这个元素的名称。
如果是属性节点，nodeName返回这个属性的名称。
如果是文本节点，nodeName返回一个内容为#text的字符串。 - nodeType：返回一个整数，这个数值代表者给定节点的类型
Node.ELEMENT_NODE --1 --元素节点
Node.ATTRIBUTE_NODE --2 --属性节点
Node.TEXT_NODE --3 --文本节点 - nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是null。
<7>父节点、子节点和同辈节点
父节点：parentNode
parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document节点没有父节点。
子节点：
ChildNodes：获取指定节点的所有子节点结合。
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。
同辈节点：
nextSibling：返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
<8>节点属性
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包哈你的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。
<9>检测子节点和属性
-
查看是否存在子节点：hasChildNodes()
-
查看是否存在属性：hasAttributes()
-
即使节点中没有定义属性，其attributes属性仍然有效，而且长度值为0。同样节点中的childNodes属性也是如此。
-
当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少节点和属性的话，仍要使用attributes和childNodes属性。
-
在IE浏览器中，不存在hasAttributes()方法。
<10>操作DOM节点树 -
插入节点
appendChild()方法：插入到最后面
insertBefore()方法
没有insertAfter方法 -
删除节点：removeChild()方法
-
替换节点：replaceChild()方法
<11>复制和移动节点
复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点。
移动节点：由一下三种方法组合完成
- 查找节点
getElementById，getElementsByName，getElementsByTagName - 插入节点
appendChild，insertBefore - 替换节点
replaceChild
3、Demo
<1>
<2>
<3>
4、innserHTML属性
浏览器几乎都支持该属性，但不是DOM标准的组成部分。
innerHTML属性可以用来度，写给定元素里的HTML内容。
innserHTML属性多余div或span标签配合使用。
例如：在一个
今天
元素，如果利用前面的知识，要创建节点，并且创建文本节点、添加子节点等操作。用innerHTML则只要一条语句document.getElementById(“d”).innerHTML = “今天
”。5 XML DOM操作
1、XML DOM访问节点
document属性指向XML文档的根元素。
通过getElementsByTagName()方法可以把指定节点下面的所有特定标记名称的列表返回。
如果使用childNodes属性来获取子节点集合时，一般通过item(index)方法，而不是通过数组下表来访问每一个子节点。
2、XML DOM操作XML文档
- 创建新节点
- 移动和修改节点
- 读写节点属性和读写数据
以上操作，XML DOM与HTML DOM的操作完全一致。 - 保存文档
与HTML DOM不同，XML DOM提供了save()方法将XML文档保存到指定的本地目录。不过，处于安全考虑的原因，一般浏览器禁止这么做。
3、创建块浏览器的XML文件解析器
function parseXML(fileXmlName){
var xmlDoc;
try {//Internet Explorer 创建一个空的xml文档
xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
}
catch (e) {
try {//Firefox, Mozilla, Opera, 创建一个空的xml文档
xmlDoc = document.implementation.createDocument(“”, “”, null);
}
catch (e) {
}
}
//关闭异步加载
xmlDoc.async = false;
//加载xml文件
xmlDoc.load(fileXmlName);
return xmlDoc;
}
4、Demo1
cities.xml
util.js
cities.html
5、Demo2
test1.html
test2.html
注：
<1>用window.open方法也可以实现上面的类似效果，这时候test2可以通过window.opener来拿到test1的window对象。但是此时用户可以开很多个窗口而不做任何操作，所以不使用。
<2>showModelessDialog与showModelDialog类似，但是前者不是模态对话框，也就是说用户不必操作打开的test2页面就可以操作test1的页面，所以也不使用。
6 JavaScript高级部分知识
1、Arguments对象
在函数代码中，使用特殊对象arguments，开发者无需明确指出参数名，就能访问它们。
Demo
使用Arguments模拟函数重载
2、变量的作用域
<1>全局变量与局部变量
<2>声明局部变量(没有使用var)
在函数f()中定义了一个变量local。在该函数被调用之前，这个变量时不存在的。
local变量会在f()函数首次被调用时创建，由于并没有声明var，所以被赋予全局作用域。
<3>函数域与全局域
函数域始终优先于全局域，所以局部变量a会覆盖与它同名的全局变量。
3、函数也是数据
javascript可以将函数作为数据使用。作为函数本体，它像普通的数据一样，不一定要有名字。默认名字的函数被称之为“匿名函数”。
例如：
function(a){
return a;
}
匿名函数的两种用法：
- 可以将匿名函数作为参数传递给其他函数。这样，接收方函数就能利用所传递的函数来完成某些事情。
- 可以定义某个匿名函数来执行某些一次性任务。
4、回调函数
注：<1>在这个例子中，函数a和b都是回调函数。
<2>当将函数a传递给函数b，并由b来执行a时，a就成了一个回调函数，如果a还是一个无名函数，就称之为匿名回调函数。
<3>回调函数的优点：
- 它可以在不做命名的情况下传递函数（这意味着可以节省全局变量）。
- 可以将一个函数调用操作委托给另一个函数（这意味着可以节省一些代码编写工作）。
- 回调函数也有助于提升性能。
5、自调函数
自调函数其实就是在定义函数后自行调用。例如：
第一对括号，放置的是一个匿名函数。
第二对括号，是“立即调用”。
自调函数只需：将匿名函数的定义放进一对括号中，然后外面再跟一对括号即可。
第一个括号中的匿名函数接受一个参数。
第二个括号，在调用时，向匿名函数传递参数内容。
6、内部函数（私有函数）
- 当调用全局函数a()时，本地函数b()也会在其内部被调用，由于b()是本地函数，它在a()以外的地方是比不可见的，所以将b称之为私有函数。
- 私有函数的有点：
有助于确保全局名字空间的纯净性（这意味着命名冲突的机会很小）
私有性——只将一些必要的函数暴露给“外面世界”，并保留属于自己的函数，使它们不为该应用程序的其他部分所用。
7、作用域链
javascript不存在大括号级的作用域，但具有函数作用域。
在函数定义的变量在函数外是不可见的，但如果该变量是在某个代码块中定义的（如在if或for语句中），它的代码块对外就是可见的。
注：函数n()可以访问的变量可以是自身的作用域，也可以是其“父级”的作用域，这就形成了一条作用域链。
注：在定义函数f1和f2时，只能访问全局作用域和其自身的作用域。
在定义函数f2时，变量a是不可见的。
8、闭包
由上图可以看到，变量a-e对于n来说都是可见的，如果想要将n放在f外面，并且还想使d对n可见，就需要采用闭包的方式。
由上图可以看到在f函数中定义了n，所以n函数可以访问f函数的作用域。
将n函数升级到全局函数，但依然保留可以对a函数作用域的访问权。
9、循环中的闭包
按照预期，最终结果应该输出[1,2,3]，但是却是[4,4,4]。
在函数f中，通过循环，创建了三个闭包，他们都指向了共同的局部变量i。
但是，闭包并不会记录它们的值，它们所拥有的只有一个i的连接（即引用），因此只能返回i的当前值。
在这里，不再直接创建一个返回i的函数，而是将i传递给了一个自调函数。
在该自调函数中，i就被赋值给了局部变量x，这样一来，每次迭代中的x就会拥有各自不同的值了。
9、对象
<1>定义对象的三种方式：
第一种构造法：new Object
var a = new Object();
a.x = 1,a.y = 2;
第二种构造法：对象直接量
var b = {x:1,y:2};
第三种构造法：定义类型
function Point(x,y){
this.x = x;
this.y = y;
}
var p = new Point(1,2);
<2>元素对象、属性、方法
访问对象的属性
中括号表示法：hero[‘name’]。
点号表示法：hero.name。
如果访问的属性不存在，会返回undefind。
访问对象的方法
方法名后加一堆括号：hero.say()。
像访问属性访问一个方法：hero’say’。
<3>修改属性与方法
<4>内建对象
内奸对象大致上可以分为三个组：
- 数据封装类对象—包括Object、Array、Boolean、Number和String。这些对象代表者Javascript种不同的数据类型，并且都拥有各自不同的typeof返回值，以及undefined和null状态。
- 工具类对象—包括Math、Date、RegExp等用于提供遍历的对象。
- 错误类对象—包括一般性错误对象以及其他各种更特殊的错误类对象。它们可以在某些异常发生时帮助我们纠正程序工作状态。
Object是javascript中所有对象的父级对象，这意味着所有对象都继承于Object对象。
创建一个空对象：
var Object = {};
var obj = new Object{};
Array对象
Array对象用于在单个的变量中存储多个值。
创建一个空Array对象：
var object = [];
var obj = new Array();
String对象
String对象与基本的字符串之间的区别：
var str = “hello”;
var obj = new String(“world”);
alert(typeof str);//string
alert(typeof obj);//object
10、原型(prototype)
函数本身也是一个包含了方法和属性的对象，prototype就是函数对象的另一个属性。
<1>利用原型添加方法与属性
下面创建一个新的函数对象，并设置一些属性和方法。
利用原型添加方法和属性的第二种方式：
注：如果对象的自身属性与原型属性同名，那么对象自身属性的优先级高于原型属性。
<2>扩展内建对象的方法
11、继承
<1>如果两个类都是同一个实例的类型，那么它们之间存在着某些关系，我们把同一个实例的类型之间的泛化关系称之为“继承”。
<2>继承关系至少包含三层含义
-
子类的实例可以共享父类的方法
-
子类可以覆盖父类的方法或扩展新的方法。、
-
父类和子类都是子类实例的“类型”。
<3>在javascript中，并不支持“继承”。也就是说，javascript没有继承的语法。从这个意义上来说，javascript并不是直接的面向对象语言。
①原型链
原型链是ECMAScript标准制定的默认继承方式。 -
将对象直接创建在B对象的prototype属性中，并没有去扩展这些对象的原有原型。
-
通过new A()另创建了一个新的实体，然后用它去覆盖该对象的原型。
-
javascript是一种完全依靠对象的语言，其中没有类的概念。
-
因此，需要直接用new A()创建一个实体，然后才能通过该实体的属性完成相关的继承工作。
-
完成这样的继承实现之后，对A()所进行的任何修改、重写或删除，都不会对B()产生影响。
②只继承于原型
③对象之间的继承
01 万物皆对象
1、万物皆对象
- function是一个函数
- function是一个对象，可以利用该对象的constructor属性找到该对象的构造函数
- 一个对象（这个对象必须有值，不能是null，undefined）可以动态的添加一个属性
- 一个function同时又是一个构造器函数
- 任何一个对象有可能成为任何一个对象的属性
2、范例一
/**
- function
- 在js中，一切皆对象
- 在js中，对象有一个属性为constructor
- 在js中，凡是函数都是构造器对
- 在js中，一个对象可以动态的添加任何一个属性
*/
//函数的三种表示方式
function a(){
}
/**
- a.constructor是一个对象,为Function
- 因为a是通过new Function的形式产生的，所以a的构造器就是Function
*/
alert(a.constructor);
var aa = function(){
alert(“aa”);
}
alert(aa.constructor);
//给a对象添加了一个属性为b,值为5
a.b = 5;
alert(a.b);
//给a对象添加了一个属性为bb，bb为对象，bb的值为var a = function(){}
a.bb = aa;
a.bb();
var aaa = new Function(“a1”,“a2”,“var c = a1 + a2;alert©”);
aaa(1,2);
3、范例二：
function Person(){
}
function P(){
alert(“p”);
}
function A(){
}
function B(){
}
Person.a = P;
Person.a.b = A;
Person.a.b.c = B;
Person.a.b.c.d = P;
Person.a.b.c.d();
/**
- Person.bb;bb的值为undefined
- bb.a = P;
/
//Person.bb.a = P;
//Person.bb.a();
/* - 在js中，任何一个对象都有可能成为任何一个对象的属性
/
02 原型
/* - 在一个对象中有一个属性：prototype
*/
function Person(){
}
function Student(){
}
Person.prototype;
Person.prototype.name = function(){
alert(“name”);
}
Person.prototype.age = 5;
Person.prototype[“sex”] = “male”;
Person.prototype[‘student’] = Student;
window.onload = function(){
Person.prototype;
}
var p = new Person();
alert(p.age);
//alert(Person.age);
//undefined
function SupPerson(){
}
/**
- 让SupPerson创建出来的对象拥有person原型中的内容
*/
SupPerson.prototype = p;
//SupPerson.prototype = Person.prototype;
var sp = new SupPerson();
alert(sp.age);
03 extend
1、范例一
function createClass(jsonObj){
/**
* 任意的类为F
/
function F(){
}
/*
* 动态的遍历json对象的key和value的值
*/
for(var name in jsonObj){
F.prototype[name] = jsonObj[name];
}
return F;
}
var Person = createClass({
getName:function(){
alert(“name”);
},
getId:function(){
alert(“id”);
}
});
var p = new Person();
p.getName();
p.getId();
2、范例二
/**
- 当该函数中有一个参数的情况下创建类
- 当该函数中有两个参数的情况下，第一个参数是基类，第二个参数就是在基类的基础上添加的内容
*/
function extend(obj,prop){
function F(){
}
if(typeof obj == “object”){//obj是一个json格式的对象
for(var name in obj){
F.prototype[name] = obj[name];
}
}else{//obj是一个函数
F.prototype = obj.prototype;//完成了基类的赋值
for(var name in prop){
F.prototype[name] = prop[name];
}
}
return F;
}
var Person = extend({
name:5,
id:6
});
var SurPerson = extend(Person,{
sex:‘aa’
});
var sp = new SurPerson();
alert(sp.name);
alert(sp.id);
alert(sp.sex);
04 event
KaTeX parse error: Expected '}', got 'EOF' at end of input: … //(“#aa”).click(function(){
// alert(“aa”);
//});
/**
* 先解绑再绑定
/
$(“#aa”).unbind(“click”);
$(“#aa”).bind(“click”,function(){
alert(“aaa”);
$(this).trigger(“点我”,[‘aa’,‘bb’]);
});
}
/*
* 1、声明事件，把该事件绑定在一个dom对象上
* 2、找一个事件的触发方式，触发事件
* 3、传递参数
*/
$(“#aa”).unbind(“点我”);
$(“#aa”).bind(“点我”,function(event,a,b){
alert(“点我”);
alert(a);
alert(b);
});
});
05 callback
1、范例一
var ajaxObj = {
xmlhttprequest:‘’,
getXMLHttpRequest:function(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveObject(“Msxml2.XMLHTTP”);
}catch(e){
}
}
return xmlHttp;
},
post:function(ajaxJSON){
ajaxObj.xmlhttprequest = ajaxObj.getXMLHttpRequest();
ajaxObj.xmlhttprequest.onreadyStatechange = function(){
if(ajaxObj.xmlhttprequest.status == 4){//相应完毕
if(ajaxObj.xmlhttprequest.status==200){//成功响应
ajaxJSON.callback(ajaxObj.xmlhttprequest.responseText);
}
}
}
ajaxObj.xmlhttprequest.open(ajaxJSON.method,ajaxJSON.url,true);
ajaxObj.xmlhttprequest.send(ajaxJSON.data);
}
};
window.onload = function(){
document.getElementById(“ok”).onclick = function(){
ajaxObj.post({
method:“post”,
url:‘…/HelloWorldServlet’,
data:‘a=a’,
callback:function(data){
alert(data);
}
});
}
}
2、范例二
$().ready(function(){
$(“select”).unbind(“me”);
$(“select”).bind(“me”,function(event,meJSON){
alert(meJSON.value);
meJSON.callback();
});
$(“select”).unbind(“change”);
$(“select”).bind(“change”,function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … value:(this).val(),
callback:function(){
alert(“aaaa”);
}
});
});
});
3、范例三
/**
- 在js中使用this
- js中的this具有多态性
*/
function Person(){
alert(this);
}
Person();//window.Person();
//this代表student
function Student(){
}
Student.s = Person;
Student.s();
//this代表json对象
var jsonObj = {
getPerson:Person
};
jsonObj.getPerson();
/**
- 利用call方法和apply方法改变this的指向
*/
function SuperStudent(){
}
Person.call(Student);//Student.person();
Person.apply(SuperStudent);//SuperStudent.Person();
/**
- 如果有回调函数的情况
- $().ready(function(){this.a = 5;});
- 回调函数中的this，调用者来确定
*/
function testCallback(callback){
callback.call(this);
callback.apply(Person);
}
testCallback(function(){
alert(this);//该this为回调函数中的this，为window
});
06 闭包
1、范例一
/**
-
闭包
-
第二个括号是实参
-
第一个参数为一个函数，函数中的参数为形参，在匿名函数中的所有的方法都可以使用
*/
(function(){
function Student(){}
})();
//Student();
//Student is not defined
(function(){
alert(“aaa”);
})();
(function(a){
alert(a);
})(5);
/**
-
下面的写法的好处
-
1、可以让一些函数私有化
-
2、可以让一些函数公开化
-
3、在匿名函数中声明的属性，在外部访问不到
*/
(function(window){
var a = 5;
function A(){//私有的
B();
return {//全部都是公开的方法
C:C,
D:D
}
}
function B(){//私有的}
function C(){//公开的
}
function D(){//公开的
}
window.A = A;//通过该方式可以让一个函数成为一个公开的函数
})(window);
var json = window.A();
json.C();
json.D();
2、jQuery的内核
(function(window,undefined){
//这就是jQuery的原型
var jQuery = function(selector,context){
return new jQuery.fn.init(selector,context);
}
//利用jQuery选择器产生的对象就是jQuery产生的对象，所以利用选择器产生的对象才拥有了jQuery中的prototype中的内容
jQuery.fn = jQuery.prototype = {
ready:function(){},
each:function(){},
size:function(){}
}
//window.jQuery.prototype = window.jQuery.fn = window.$.fn = jQuery.prototype = $.prototype =
.
f
n
w
i
n
d
o
w
.
j
Q
u
e
r
y
=
w
i
n
d
o
w
.
.fn window.jQuery = window.
.fnwindow.jQuery=window. = jQuery;
把加在jQuery对象上的方法或者加jQuery.prototype上的方法称为jQuery的插件开发
jQuery.a = function(){
}
jQuery.prototype.b = function(){
}
//总结：如果该方法与页面上的元素没有关系，该方法就是jQuery中全局的插件方法
//如果该方法与页面上的元素有关系，则该方法就必须加在jQuery的prototype上
})(window);
(function($){
$.a = function(){
alert(“aaa”);
}
KaTeX parse error: Expected 'EOF', got '}' at position 55: …bbb"); } }̲)();
$().ready(function(){
$.a();
$(“body”).b();
});
3、合并参数
jQuery.extend([deep],target,object1,[objectN]) 返回值：Object
deep(可选) Object：如果设置为true，则递归合并。
target Object：待修改对象。
object1 Object：待合并到第一个对象的对象。
objectN(可选) Object：待合并到第一个对象的对象。
合并setting和options，修改并返回settings。
var settings = {validate:false,limit:5,name:‘foo’};
var options = {validate:true,name:‘bar’};
jQuery.extend(settings,options);
结果：settings = {validate:true,limit:5,name:‘bar’}
合并defaults和options，不修改defaults。
var empty = {};
var defaults = {validate:false,limit:5,name:‘foo’};
var options = {validate:true,name:‘bar’};
var settings = jQuery.extend(empty,defaults,options);
结果：settings == {validate,true,limit:5,name:‘bar’}
empty == {validate:true,limit:5,name:‘bar’}
07
.
p
o
s
t
与
.post与
.post与.ajax
1、
.
p
o
s
t
与
.post与
.post与.ajax
- 页面上的js端要传递参数到后台
json格式
简单json格式
{
key:value(基本类型)
}
复杂json格式
{
key:value是一个对象
} - . p o s t 只 能 在 成 功 的 时 候 使 用 ， .post只能在成功的时候使用， .post只能在成功的时候使用，.post只能传递简单格式的数据
2、代码
struts-plugin.xml
AjaxAction.java
public class AjaxAction extends ActionSupport{
private Long[] ss;
public Long[] getSs(){
return ss;
}
public void setSs(Long[] ss){
this.ss = ss;
}
public String ajax(){
return SUCCESS;
}
}
struts.xml
< package name =“ajax” namespace= “/” extends = “json-default”>
< interceptors>
< interceptor-stack name =“ajaxStack” >
< interceptor-ref name =“defaultStack” ></ interceptor-ref>
< interceptor-ref name =“json” ></ interceptor-ref>
</ interceptor>
</ interceptors>
< default-interceptor-ref name =“ajaxStack” ></ default-interceptor-ref>
< action name =“ajaxAction_*” method= “{1}” class =“cn.itheima02.struts2.ajax.action.AjaxAction” >
< result type =“json” ></ result>
</ action>
</ package>
ajax.js
$().ready(function(){
$(“input[type=‘button’]”).unbind(“click”);
$(“input[type=‘button’]”).bind(“click”,function(){
$.post(“ajaxAction_ajax.action”,{
ss:[5,6,7,8]
},function(){
alert(data);
});
});
});
testAjax.jsp
< head>
< script src =“js/jquery-1.4.2.js” ></ script>
< script src =“js/ajax.js” ></ script>
</ head>
< body>
< input type =“button” name= “aaa” value =“click” />
</ body>
执行结果：
ajax.js
$().ready(function(){
$(“input[type=‘button’]”).unbind(“click”);
$(“input[type=‘button’]”).bind(“click”,function(){
KaTeX parse error: Expected 'EOF', got '}' at position 412: … }); }̲); }); //如果通过.ajax方法传入的参数名称在action的属性驱动和原型驱动中都有，那么由于action的model在栈顶，所以action的属性中值为null，原型model中有值。
执行结果：
jsonToStr.js
jQuery.extend({
/** * @see 将javascript数据类型转换为json字符串 * @param 待转换对象,支持object,array,string,function,number,boolean,regexp * @return 返回json字符串 */
toJSON: function(object) {
var type = typeof object;
if (‘object’ == type) {
if(object){
if (Array == object.constructor) type = ‘array’;
else if (RegExp == object.constructor) type = ‘regexp’;
else type = ‘object’;
}
}
switch (type) {
case ‘undefined’:
case ‘unknown’:
return;
break;
case ‘function’:
case ‘boolean’:
case ‘regexp’:
return object.toString();
break;
case ‘number’:
return isFinite(object) ? object.toString() : ‘null’;
break;
case ‘string’:
return ‘’’ + object.replace(/(\|")/g, “\$1”).replace(/\n|\r|\t/g, function() {
var a = arguments[0];
return (a == ‘\n’) ? ‘\n’: (a == ‘\r’) ? ‘\r’: (a == ‘\t’) ? ‘\t’: “”
}) + ‘’‘;
break;
case ‘object’:
if (object === null) return ‘null’;
var results = [];
for (var property in object) {
var value = jQuery.toJSON(object[property]);
if (value !== undefined) results.push(jQuery.toJSON(property) + ‘:’ + value);
}
return ‘{’ + results.join(’,‘) + ‘}’;
break;
case ‘array’:
var results = [];
for (var i = 0; i < object.length; i++) {
var value = jQuery.toJSON(object[i]);
if (value !== undefined) results.push(value);
}
return ‘[’ + results.join(’,') + ‘]’;
break;
}
}
});
ajax.js
$().ready(function(){
$(“input[type=‘button’]”). unbind(“click”);
$(“input[type=‘button’]”).bind(“click”, function(){
var parameter1 = {
id: ‘1’,
uname: ‘itcast119’,
arrayInt: [2, 3, 6, 8],
arrayList: [20, 21, 23],
teacher: {
tname: 'aaa ',
responseblitity: ‘讲课是这哥们的任务’,
strs: [‘Hello’, ‘World’]
},
teacherList: [{
tname: ‘王二麻子’,
responseblitity: 'aaaa ',
strs: ['aa ', ‘bb’]
}, {
tname: ‘王二麻子的哥’,
responseblitity: 'aaaa ',
strs: ['aa ', ‘bb’]
}]
};
var para = $.toJSON(parameter1);
$. ajax({
url: ‘ajaxAction_ajax.action’,
type: “POST”,
data: para,
success: function(){
alert(" aaaa");
},
contentType: “application/ json”,
error: function(){
alert(" bbbb");
}
});
});
});
Teacher.java
public class Teacher {
private String tname;
private String responseblitity;
private String[] strs;
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public String getResponseblitity() {
return responseblitity;
}
public void setResponseblitity(String responseblitity) {
this.responseblitity = responseblitity;
}
public String[] getStrs() {
return strs;
}
public void setStrs(String[] strs) {
this.strs = strs;
}
@Override
public String toString() {
return "Teacher [tname=" + tname + ", responseblitity="
+ responseblitity + ", strs=" + Arrays.toString(strs) + "]";
}
}
User.java
public class User implements Serializable{
private String ss;
public String getSs() {
return ss;
}
public void setSs(String ss) {
this.ss = ss;
}
}
AjaxAction.java
public class AjaxAction extends ActionSupport{
private Integer id;
private String uname;
private Integer[] arrayInt;
private List < Integer > arrayList;
private List < Teacher > teacherList;
private Teacher teacher;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public Integer[] getArrayInt() {
return arrayInt;
}
public void setArrayInt(Integer[] arrayInt) {
this.arrayInt = arrayInt;
}
public List <Integer> getArrayList() {
return arrayList;
}
public void setArrayList(List <Integer> arrayList) {
this.arrayList = arrayList;
}
public Teacher getTeacher() {
return teacher;
}
public void setTeacher(Teacher teacher) {
this.teacher = teacher;
}
public List <Teacher> getTeacherList() {
return teacherList;
}
public void setTeacherList(List <Teacher> teacherList) {
this.teacherList = teacherList;
}
public String ajax(){
//ServletActionContext.getResponse().setStatus(500);
int a = 1/0;
return SUCCESS;
}
public String testPost(){
//int a = 1/0;
return SUCCESS;
}
}
执行结果：
注：
.
a
j
a
x
是
a
j
a
x
请
求
的
企
业
级
处
理
可
以
传
递
简
单
的
j
s
o
n
对
象
可
以
用
.ajax是ajax请求的企业级处理 可以传递简单的json对象 可以用
.ajax是ajax请求的企业级处理可以传递简单的json对象可以用.ajax传递复杂格式的对象
* 把struts2与json插件提供的拦截器导入到项目中来。
* js端必须调用
.
a
j
a
x
提
交
请
求
，
j
s
o
n
格
式
必
须
是
最
标
准
的
字
符
串
的
形
式
，
可
以
利
用
.ajax提交请求，json格式必须是最标准的字符串的形式，可以利用
.ajax提交请求，json格式必须是最标准的字符串的形式，可以利用.toJSON来进行转化。
3、异常处理
- 在ajax的请求过程中，如果后台是servlet，如果后台报错，servlet内部会设置状态码，这个时候，会触发ajax的onreadystatechange函数，js的客户端就会得到该值，js的客户端会知道，后台出错了。
- 但是struts2框架会跳转到错误模板页面，对于状态码并没有进行设置。
public String ajax(){
ServletActionContext.getResponse().setStatus(500);
int a = 1/0;
return SUCCESS;
}
执行结果：
08 Struts2的缺点
1、整个的核心流程写死了，向动态的添加内容那是不可能的。
2、struts2的错误处理
action—>throws—>defaultActionInvocation.invoke—>throws—>StrutsActionProxy.execute—>throws—>Dispatcher.servi eAction
try{
}catch(ConfigurationException e){
sendError(request,rsponse.context,HttpServletResponse.SC_NOT_FOUND,e);
}
sendError(request,response,context.HttpServletResponse.SC_INTERNAL_SERVER_ERROR,e);
这样的错误处理意味着：在action的每一个方法中都要try…catch，在架构中不是一个聪明的做法。
3、ajax与struts2整合的时候，对于错误处理，在struts2的内部没有设置状态码。
09 全局错误处理
1、ajax
- 在js端的事情
- 发出请求
- $.post
- 写法比较简单，利于操作
- 在$.post方法的对调函数中，参数data
- 如果服务器端不出错，则返回的是一个json对象的形式
- 如果服务器端出错，则返回的是错误的模板页面（因为struts2内部没有设置状态码）
- $.ajax
- 写法比较复杂
- 能处理复杂格式的数据
- 必须把处理复杂格式的拦截器引入进来“json”
- 这个方法本身设置contentType:“application/json”
- 必须使用标准的json字符串来传递
- 发出请求
- 在后台的事情
- 必须在action中写属性，属性并且有get方法，才能够回调到客户端。
- 如果在action中的方法中产生错误，在客户端使用的是 . a j a x 请 求 ， 在 a c t i o n 中 的 方 法 中 设 置 状 态 码 ， 才 能 在 .ajax请求，在action中的方法中设置状态码，才能在 .ajax请求，在action中的方法中设置状态码，才能在.ajax的error方法中输出
- 统一的错误处理和拦截器冲突了，只能选择其一，但是只要把开发者模式去掉，就可以了。
- 在js端传递数据的时候，要保证key值和action中的属性值一致。
ErrorProcessor.java
@SuppressWarnings(“serial” )
public class ErrorProcessor extends ActionSupport {
private String error;
public String getError() {
return error;
}
public void setError(String error) {
this.error = error;
}
private Exception exception;
public Exception getException() {
return exception;
}
public void setException(Exception exception) {
this.exception = exception;
}
@Override
public String execute(){
//设置状态码
//此时ajaxAction中的状态码就不用再设置了
//ServletActionContext.getResponse().setStatus(500);
this.error = this.getException().getMessage();
return SUCCESS;
}
}
struts.xml
<?xml version="1.0" encoding= "UTF-8"?> <constant name= "struts.ui.theme" value="simple" />
< package name="ajax" namespace="/" extends="json-default" >
<!--
该拦截器是处理复杂格式的数据
-->
<interceptors>
<interceptor-stack name= "ajaxStack">
<interceptor-ref name= "json"></interceptor-ref>
<interceptor-ref name="defaultStack" ></interceptor-ref>
</interceptor-stack>
</interceptors>
< default-interceptor-ref name="ajaxStack" ></default-interceptor-ref>
<global-results>
<result name= "errHandler" type="chain" >
<param name= "actionName">errorProcessor</param>
</result>
</global-results>
<global-exception-mappings>
<exception-mapping exception= "java.lang.Exception"
result= "errHandler" />
</global-exception-mappings>
<action name= "errorProcessor" class="cn.itheima02.struts2.ajax.error.ErrorProcessor" >
<result type= "json"></result>
</action>
<action name= "ajaxAction_*" method="{1}" class="cn.itheima02.struts2.ajax.action.AjaxAction" >
<result type= "json"></result>
</action>
</ package>
执行结果：
AjaxAction.java
AjaxAction.java
public class AjaxAction extends ActionSupport{
private Integer id;
private String uname;
private Integer[] arrayInt;
private List < Integer > arrayList;
private List < Teacher > teacherList;
private Teacher teacher;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public Integer[] getArrayInt() {
return arrayInt;
}
public void setArrayInt(Integer[] arrayInt) {
this.arrayInt = arrayInt;
}
public List <Integer> getArrayList() {
return arrayList;
}
public void setArrayList(List <Integer> arrayList) {
this.arrayList = arrayList;
}
public Teacher getTeacher() {
return teacher;
}
public void setTeacher(Teacher teacher) {
this.teacher = teacher;
}
public List <Teacher> getTeacherList() {
return teacherList;
}
public void setTeacherList(List <Teacher> teacherList) {
this.teacherList = teacherList;
}
public String ajax(){
//ServletActionContext.getResponse().setStatus(500);
int a = 1/0;
return SUCCESS;
}
public String testPost(){
int a = 1/0;
return SUCCESS;
}
}
ajax-plugin.js
(function($){
$.heimaPost = function(ajaxJSON){
KaTeX parse error: Expected 'EOF', got '}' at position 253: … }); }̲ })();
ajax.js
$().ready(function(){
$(“input[type=‘button’]”). unbind(“click”);
$(“input[type=‘button’]”).bind(“click”, function(){
// $.post(“ajaxAction_testPost.action”,{
//
// },function(data){
// if(data.error){
// alert(data.error);
// }else{
// //成功的时候写的内容
// }
// });
$.heimaPost({
url:‘ajaxAction_tesPost.action’,
data:null,
callback:function(data){
alert(" aaaa");
}
});
});
});
脚本语言总结
核心内容概述
1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。
2.Ajax传统编程。
3.jQuery框架，九种选择器为核心学习内容
4.JQuery UI插件
5.jQuery Ajax编程
6.jQuery第三方插件
7.反向Ajax编程(彗星)
一、JavaScript基础加强
JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。
JavaScript的3个组成部分分别为：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)
1.ECMAScript核心语法
①：代码编写位置
分为内部JS和外部JS【使用src进行引入】
alert(typeof d);
// 通过instanceof判断变量数据类型
alert(d instanceof Object);//falae
alert(a instanceof Object);//falae
var s = new String("abc"); // 对象类型
alert(s instanceof Object);
// alert(“98”==98);// true
// alert("true"true); // false
// alert(1true); // true
var d = 010;// 八进制
var d2 = 0x10; // 十六进制
// match方法 类似 Java中 matches，有区别
// alert(/^\d+KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲")); // math方法返回的是匹配正则表达式内容，而不是布尔值
// alert(/^\d+$/.exec(“1234abc1234”));// 返回匹配的内容
// Date使用
var date = new Date(); //当前日期
alert(date.toLocaleString());// 返回当地国际化日期格式
var dateStr = date.getFullYear()+"-"+date.getMonth()
+“-”+date.getDate()+" “+date.getHours()+”:“+date.getMinutes()
+”:"+date.getSeconds();
alert(dateStr);
④：Array常用属性方法
push() 加入元素到数组
pop() 从数组移除最后一个元素
reverse()反转
join() 连接数组元素 通过特定内容 返回字符串
sort() 排序
slice() 截取数组中指定元素 从start到end
Demo：
3.ECMAScript核心语法——函数
①：函数定义的三种方式
注意：第二种方式使用越来越多，第三种不常用，第一种常用
②：JavaScript全局函数(内置函数)
一组与编码解码相关的函数
encodeURI()&decodeURI()
encodeURIComponent()&decodeURIComponent()
escape()&unescape()
此块具体内容请参照W3C文档查看。
4.ECMAScript核心——JavaScript面向对象编程
Java是面向对象，写Java程序，写类和对象。JavaScript是基于对象，写Js，不用创建类，使用Js内部已经定义好的对象。
①：定义JavaScript对象的两种方式
方式一：使用已经存在的对象，通过关键字进行创建
var s = new String(“aaaa”);
var o = new Object();
var date = new Date();
// alert(date instanceof Object);// true
// JS对象 类似一个map结构
var arr = new Array(3);
arr[0] = 100;// 使用数组下标 为数组元素赋值
arr['aaa'] = 1000; // 定义对象属性
// alert(arr[‘aaa’]);
arr.showInfo = function(){// 定义对象方法
alert(arr.join(“,”));
};
// arr.showInfo(); //100, ,
Js其实就是一个类似map结构，key为属性名和方法名，value为属性值和方法定义
方式二：通过{}创建
var obj = {
name : ‘张三’,
age : 20,
getName : function(){
// 访问对象属性 通过关键字 this
return this.name;
}
};
// 访问对象 属性 [] 和 .
// alert(obj.name);
// alert(obj[“age”]);
alert(obj.getName());
// 添加一个方法到 obj对象
obj.getAge = function(){
return this.age;
}
alert(obj.getAge());
JavaScript中的对象是通过 new function创建的，在Js中function等同于一个类结构
// 定义类 结构
var Product = function(name,price){
this.name = name; // 保存name的值 到对象属性中
this.price = price;
}
// 基于类结构创建对象，使用new 关键字
var p1 = new Product(“冰箱”,1000);
var p2 = new Product(“洗衣机”,1500);
// alert(p1.name);
// alert(p1.price);
function本身代表一个函数，JavaScript对象通过new function来获得的，理解function就是对象构造函数
②：Object和function的关系
JavaScript中所有引用类型都是对象Object实例 ------- Function instanceOf Object //true
JavaScript 中所有对象都是通过 new Function实例(function) 获得 ------ Object instance Function //true
JavaScript所有对象构造函数都是function实例；JavaScript所有对象都是object实例，function也是object实例。
使用JavaScript的传递性进行推论！
A：function是用来定义一个函数，所有函数实例都是Function对象
B：JavaScript中，所有对象都是通过new function得到的
Var Object = function(){…}
Var String = function(){…}
Var Array = function(){…}
Var Date = function(){…}
结论：所有对象构造器都是Function实例
alert(String instanceOf Function) //true
alert(Object instanceOf Function) //true
C：创建一个对象，需要使用new function
Var s = new String()
Var o = new Object()
Var arr = new Array()
Var date = new Date()
结论：JavaScript中，一切对象都是object实例
alert(s instanceOf Object) //true
alert(Function instanceOf Object) //true
var f = new Function(); // 实例化Function对象
var o = new Object(); // 实例化Object对象
alert(f instanceof Function); // true
alert(f instanceof Object); // true
alert(o instanceof Function); // false
alert(o instanceof Object); // true
③：function原型属性
JavaScript所有对象都由function构造函数得来的 ，通过修改 function构造函数 prototype属性，动态修改对象属性和方法。
④：继承
A：使用原型链完成JavaScript单继承
var A = function(){
this.name = ‘xxx’;
}
var B = function(){
this.age = 20;
}
// 方式一 可以通过 prototype原型完成单继承 B的原型指向A
B.prototype = new A(); // 从A实例中，继承所有属性
var b = new B();
alert(b.name);
// 练习：通过prototype为String类添加一个trim方法
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}
B：对象冒充完成多继承
var C = function(){
this.info = ‘c’;
}
var D = function(){
this.msg = ‘d’;
}
var E = function(){
// 同时继承C和D
this.methodC = C;
this.methodC();
delete this.methodC;
this.methodD = D;
this.methodD();
delete this.methodD;
this.desc = 'e';
}
var e = new E();
// alert(e.info);
// alert(e.msg);
// alert(e.desc);
⑤：动态方法调用
可以改变this的指向，可以完成对象多继承
// 定义函数
function printInfo(){
alert(this.name);
}
// 属性name 值 张三
var o = {name: '张三'};
// o.printInfo();// 函数不属于对象o
// JS提供动态方法调用两个方法，允许一个对象调用不是属于它自己的方法(call apply)
// printInfo.call(o);
// printInfo.apply(o);
function add(a,b){
this.sum = a+b;
}
// call传 多个参数
// add.call(o,8,10);
// apply 传递参数数组
add.apply(o,new Array(8,10));
// alert(o.sum);
// 动态方法调用 ，实现多重继承，原理就是对象冒充
var A = function(){
this.info = 'a';
}
var B = function(){
// 动态方法调用继承
A.call(this);
}
var b = new B();
alert(b.info);
二、JavaScript浏览器对象BOM
DOM Window 代表窗体
DOM History 历史记录
DOM Location 浏览器导航
DOM Navigator 浏览器信息 不讲
DOM Screen 屏幕 不讲
重点：window、history、location ，最重要的是window对象
1.window对象
Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架
parent是父窗口（如果窗口是顶级窗口，那么parentselftop）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
①：父子窗体之间的通讯
在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后，在iframe外面窗口中显示内容
显示结果如上图所示，实现思路如下：
子窗体：2.html
主窗体
②：window的open close
④：定时操作setInterval & setTimeout
setInterval：定时任务会重复执行
setTimeout：定时任务只执行一次
在页面动态显示当前时间
学习DOM 编程，从Document对象开始，document代表当前HTML网页文档对象，是window对象一个属性，可以直接使用 ，所有HTML DOM对象都是Document子对象
2.DOM编程开发
window.document 代表整个HTML文档
①：通过document获得Node节点对象
document.forms 获得页面中所有form元素集合
document.body 访问页面中 元素
document.cookie 用JS操作网页cookie信息
全局检索提供了三个重要的方法：
document.getElementById():通过id属性检索，获得Node节点（Element元素）
document.getElementsByName 通过name 属性检索 ，获得NodeList
document.getElementsByTagName 通过标签元素名称 获得NodeList
其中NodeList可以作为数组进行操作
Demo:在每一个h1标签后追加itcast
AAA
BBB
CCC
DDD
②：获得node后 如果node是元素，去操作里面的文本内容 innerHTML (HTML页面内所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用属性 ) XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32) ③：通过节点Node相对位置关系访问元素 childNodes firstChild lastChild nextSibling parentNode previousSibling 用2种方式打印——明天休息明天休息
var h1 = document.getElementById("h1"); alert(h1.innerHTML);//方式一 alert(h1.firstChild.nodeValue);//方式二 3.DOM元素常见操作 DOM 获取节点：节点查询 参上 DOM 改变节点： 元素属性修改setAttribute(name,value) 内部文本元素的修改 innerHTML DOM 删除节点：removeChild 删除子元素 、removeAttribute(name)删除节点指定属性 * 要删除节点o o.parentNode.removeChild(o) DOM 替换节点：replaceChild：父节点.replaceChild(新节点,被替换节点) ; 如果对于一个已经存在节点，执行 appendChild、 replaceChild都会造成该节点一个移动效果，可以采取先克隆再复制来消除此效果。 DOM 创建节点：document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点 DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ; insertBefore 父节点.insertBefore(新子节点, 已经存在子节点) DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点， 克隆节点包含原节点的属性和子元素 此节内容有大量的练习，建议大家做写，增强代码的熟练度。
四、JavaScript事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。
1.为对象添加事件的2种方式
①：在HTML元素中添加对象的事件
5.键盘事件
使用场景：没有提交按钮，我们一般采用回车进行提交
Demo:
默认事件
这是一个链接事件传播
HTML DOM Event对象 提供preventDefault()用于阻止默认事件的发生， 该方法IE 不支持 ，在IE中使用 returnValue 提供stopPropagation()用与阻止事件传播，该方法IE不支持，在IE中 cancelBubble 五、Ajax编程入门 1.web交互的2种模式对比 ①：2种交互模式的流程②：2种交互模式用户体验
同步交互模式：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
异步交互模型：客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
2.Ajax快速入门
①：开发步骤
1).创建XMLHttpRequest对象
2).将状态触发器绑定到一个函数
3).使用open方法建立与服务器的连接
4).向服务器端发送数据
5).在回调函数中对返回数据进行处理
Demo：
②：XMLHttpRequest对象的属性及方法
属性：
1)onreadystateonchange：状态回调函数
2)readystate：对象状态
3)status：服务器返回的http状态码
4)reqsponseText/responseXML：服务器响应的字符串
5)statusText：服务器返回的http状态信息
方法：
1)open:
2)send:
③：客户端向服务器提交数据
1)get方式发送数据
xmlHttp.open(“GET”,“url?key=value”); // 参数已经在url上
xmlHttp.send(null);
2)post方式发送数据
xmlHttp.open(“POST”,“url”); // 不需要写参数
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”); // post发送参数前，需要设置编码格式
xmlHttp.send(“name=xxx&pwd=xxx”); // 发送post数据
④：Ajax编程图解
说明：查看时，请将文档放到为180%较为合适！
结合编程图解，我们将第一个案例的代码进行解剖：
3.三种不同服务器响应数据类型编程
常见的服务器响应数据类型：html片段、JSON格式数据、xml格式数据
①：HTML片段的数据处理
练习1：验证用户名是否有效
通过xmlhttp.responseText获得返回数据
通过Dom查找获得元素
调用元素的innerHTML进行操作
说明：三个文件的具体内容请双击方框内的图标即可查看，这里推荐使用Notepad++进行关联
效果图展示：(数据使用list存储，abc和def存在)
注意：在register.html文件中，与服务器建立连接是，url一定要写对，否则返回数据时出现404错误！【“/Ajax/CheckUsernameServlet?username=”】
②：JSON格式数据处理
练习2：通过链接获得table数据，显示 — 返回HTML片段
通过product.jsp 生成HTML片段，返回客户端，客户端Ajax引擎接收，通过innerHTML 将table元素嵌入到页面内部，其思路与案例一类似，这里不做详细介绍。这里需要提出的是第二种解决方案JSON(HTML片段容易造成返回数据带回过多冗余的HTML标签元素)
JSON是一种JavaScript轻量级数据交互格式，主要应用于Ajax编程。易于人阅读和编写，同时也易于机器解析和生成。
格式一： {key:value,key:value,key:value } 键值对直接用 , 分开，键值之间用 : 键本身必须是字符串常量
{name : ‘张三’}
{‘name’:‘张三’}
是等价的。
值加不加引号，是有区别的，不加引号是变量，加引号是常量字符串
格式二： [值1, 值2 ,值3 ] 数组结构
组合后复杂格式
[{name:‘aaa’}, {name:‘bbb’}, {name:ccc}] 表示三个对象数组
JSON应用场景： AJAX请求参数和响应数据
问题： 服务器端如何生成 json格式数据------->>依赖第三方开源类库
③：JSON-lib的使用
是java类库 ，支持javabean map list array转换json格式字符串， 支持将json字符串转换javabean对象(反过来只支持这一种，使用很少)
在使用JSON-lib时必须导入至少5个jar包
开发时我们使用6个jar包，双击json-lib-all.zip即可获取所需jar包。
1）将数组/list集合解析成JSON串
使用JSONArray可以解析Array类型
JSONArray jsonArray = JSONArray.fromObject(list变量);
2）将Javabean/Map解析成JSON串
使用JSONObject可以解析javabean类型
JSONObject jsonObject = JSONObject.fromObject(javabean);
3）对象属性过滤转换JSON串
通过JsonConfig对象配置对象哪些属性不参与转换。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{“price”});
重构练习2
运行效果：
④：XML格式数据处理
练习3：select完成省级联动
- XStream的使用
问题：服务器端如何将java对象，生成XML格式数据？需要第三方类库支持XStream
XStream is a simple library to serialize objects to XML and back again.
XStream主要完成Java对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar) - XStream的核心方法
xStream.toXML(obj)：将对象序列化XML
xStream.fromXML(inputStream/xml片段)：将xml信息解析成对象
xStream.alias(String name,Class)：将类型解析或者序列化时，取一个别名
代码案例：(序列化)
解析xml时，要注意别名的命名规则要与序列化时保持一致！
3) XStream注解
在Javabean中进行注解
把某属性的名称取别名为city：@XStreamAlias(value=“city”)
注解生效：xStream.autodetectAnnotations(true);
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名
六、jQuery框架
jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性)
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大 （主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）
1.jQuery程序快速入门
window.onload = function() {…}
等价于$(document).ready(function(){…});
①：jQuery基本使用
传统Js写法：
jQuery写法：
②：jQuery核心函数
1)jQuery(callback) // 页面onload 函数
2)jQuery(expression, [context]) // 查找指定对象 ------ 九种选择器
3)jQuery(elements) // 将dom对象转换为jQuery对象
- document 是DOM对象 jQuery(document) 成为了jQuery对象
4)jQuery(html, [ownerDocument]) // 将html转换jQuery对象 - jQuery(“
hello
”) ----- 得到 jQuery对象
Demo:
// alert( ( " . i t c a s t " ) . s i z e ( ) ) ; a l e r t ( (".itcast").size()); alert( (".itcast").size());alert((“.itcast”).length);
// 通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签
alert($("div").index($("#foo")));
});
PAAAA
PBBBB
PCCCC
②：层级选择器
根据祖先、后代、父子关系、兄弟关系 进行选择
ancestor descendant 获取ancestor元素下边的所有元素 $(“form input”)
parent > child 获取parent元素下边的所有直接child 子元素 $(“form > input”)
prev + next 获取紧随pre元素的后一个兄弟元素 $(“label + input”)
prev ~ siblings 获取pre元素后边的所有兄弟元素 $(“form ~ input”)
练习2：
将class属性值为itcast的元素下所有a元素字体变为红色
将class属性值为itcast的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
info p link
p link
link③：基本过滤选择器
:first 选取第一个元素 $(“tr:first”)
:last 选取最后一个元素 $(“tr:last”)
:not(selector) 去除所有与给定选择器匹配的元素 $(“input:not(:checked)”)
:even 选取所有元素中偶数索引的元素，从 0 开始计数 $(“tr:even”) ----- 选取奇数元素
:odd 选取所有元素中奇数索引的元素 ，从0 开始计数 $(“tr:odd”) ------ 选取偶数元素
:eq(index) 选取指定索引的元素 $(“tr:eq(1)”)
:gt(index) 选取索引大于指定index的元素 $(“tr:gt(0)”)
:lt(index) 选取索引小于指定index的元素 $(“tr:lt(2)”)
:header 选取所有的标题元素 如：h1, h2, h3 $(“:header”)
:animated 匹配所有正在执行动画效果的元素
练习3：
设置表格第一行，显示为红色
设置表格除第一行以外 显示为蓝色
设置表格奇数行背景色 黄色
设置表格偶数行背景色 绿色
设置页面中所有标题 显示为灰色
设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
表格信息
这是一张商品表
| 商品编号 | 商品名称 | 售价 | 数量 |
|---|---|---|---|
| 001 | 冰箱 | 3000 | 100 |
| 002 | 洗衣机 | 2000 | 50 |
| 003 | 热水器 | 1500 | 20 |
| 004 | 手机 | 2188 | 200 |
<div>
slideDown(speed, [callback])
概述
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)FunctionFunction在动画完成时执行的函数
</div>
<div>
fadeOut(speed, [callback])
概述
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)Function在动画完成时执行的函数
</div>
④：内容过滤选择器
内容选择器是对子元素和文本内容的操作
:contains(text) 选取包含text文本内容的元素 $(“div:contains(‘John’)”) 文本内容含有john 的所有div
:empty 选取不包含子元素或者文本节点的空元素 $(“td:empty”) td元素必须为空
:has(selector) 选取含有选择器所匹配的元素的元素 $(“div:has§”).addClass(“test”); 含有p子元素的div
:parent 选取含有子元素或文本节点的元素 $(“td:parent”) 所有不为空td元素选中
练习4：
设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 ”这是一个空DIV“
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素的span字体为蓝色
jQuery
是 JavaScript一个 轻量级框架⑤：可见性过滤选择器
根据元素的可见与不可见状态来选取元素
:hidden 选取所有不可见元素 $(“tr:hidden”)
:visible 选取所有可见的元素 $(“tr:visible”)
练习5：
为表单中所有隐藏域 添加 class属性，值为itcast
设置table所有 可见 tr 背景色 黄色
设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
| 冰箱 |
| 洗衣机 |
| 热水器 |
⑥：属性过滤选择器
通过元素的属性来选取相应的元素
[attribute] 选取拥有此属性的元素 $(“div[id]”)
[attribute=value] 选取指定属性值为value的所有元素
[attribute !=value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
练习6：
设置所有含有id属性的div，字体颜色红色
设置所有class属性值 含有itcast元素背景色为黄色
对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
PPPPPP
⑦：子元素过滤选择器
对某元素中的子元素进行选取
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:only-child 选取唯一子元素，它的父元素只有它这一个子元素
练习7：
选择id属性mytable 下3的倍数行，字体颜色为红色
表格 奇数行 背景色 黄色
表格 偶数行 背景色 灰色
只有一个td的 tr元素 字体为 蓝色
| 1 | 冰箱 |
| 2 | 洗衣机 |
| 3 | 热水器 |
| 4 | 电饭锅 |
| 5 | 电磁炉 |
| 6 | 豆浆机 |
| 7 | 微波炉 |
| 8 | 电视 |
| 9 | 空调 |
| 10 | 收音机 |
| 11 | 排油烟机 |
| 12 | 加湿器 |
| 13 电暖气 |
⑧：表单过滤选择器
选取表单元素的过滤选择器
:input 选取所有、、和元素
:text 选取所有的文本框元素
:password 选取所有的密码框元素
:radio 选取所有的单选框元素
:checkbox 选取所有的多选框元素
:submit 选取所有的提交按钮元素
:image 选取所有的图像按钮元素
:reset 选取所有重置按钮元素
:button 选取所有按钮元素
:file 选取所有文件上传域元素
:hidden 选取所有不可见元素
练习8：
对所有text框和password框，添加离焦事件，校验输入内容不能为空
对button 添加 点击事件，提交form表单
密码
性别 男
城市 北京 上海 个人简介 ⑨：表单对象属性过滤选择器 选取表单元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :checked 选取所有被选中的元素，如单选框、复选框 :selected 选取所有被选中项元素，如下拉列表框、列表框 练习9： 点击button 打印radio checkbox select 中选中项的值 性别 ： 男 女
爱好: 体育 读书 音乐 旅游
城市 ： 北京 上海 广州
3.jQuery选择器总结 ①：对象访问核心方法 each(function(){}) 遍历集合 size()/length属性 返回集合长度 index() 查找目标元素是集合中第几个元素 ②：CSS样式操作 css(name,value) css({name:value,name:value}); 同时修改多个CSS样式
基本过滤选择器与 筛选过滤 API功能是相同
$(“tr:first”) 等价于 $(“tr”).first()
③：九种选择器重点
基本选择器和层级选择器 锁定元素
使用属性过滤选择器和内容过滤选择器 具体选中元素
表单操作 :checked :selected 选中 表单选中元素
配合基本过滤选择器，缩小选中的范围
4.jQuery的DOM操作
使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用
①：查询
children([expr]) 获取指定的子元素
find(expr) 获取指定的后代元素
parents([expr]) 获得祖辈元素
parent() 获取父元素
next([expr]) 获取下一个兄弟元素
prev([expr]) 获取前一个兄弟元素
siblings([expr]) 获取所有兄弟元素
在XML 解析中 find 方法使用最多
对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象
②：属性操作
设置属性 attr(name,value)
读取属性 attr(name)
同时设置多个属性 attr({name:value,name:value… });
attr(“checked”,“true”) 等价于 prop(“checked”)
练习1：
点击一个button，动态设置 div的属性 id name class
尝试能否设置一个不存在的属性？
③：CSS操作
通过attr属性设置/获取 style属性
attr(‘style’,‘color:red’); // 添加style属性
设置CSS样式属性
css(name, value) 设置一个CSS样式属性
css(properties) 传递key-value对象，设置多个CSS样式属性
设置class属性
addClass(class) 添加一个class属性
removeClass([class]) 移除一个class属性
toggleClass(class)如果存在（不存在）就删除（添加）一个类
练习2：
点击button，使一个div的背景颜色变为 黄色
通过toggleClass(class) 实现点击 字体变为紅色，再点击样式还原
④：HTML代码&文本&值操作
读取和设置某个元素中HTML内容
html() 读取innerHTML
html(content) 设置innerHTML
读取和设置某个元素中的文本内容
text() 读取文本内容
text(content) 设置文本内容
文本框、下拉列表框、单选框 选中的元素值
val() 读取元素value属性
val(content) 设置元素value属性
练习3：
传智播客
使用val() 获得文本框、下拉框、单选框选中的value
测试能否通过 val() 设置单选框、下拉框的选中效果 用户名
性别 男 女
城市 北京 上海 广州
设置 val控制radio select checkbox 选中 $("#city").val("广州"); $("input[name='gender']").val(['女']);
练习4：
输出所有select元素下的所有option元素中对应的文本内容
例如:中专^^ 输出—>中专^^
⑤：jQuery添加元素
创建元素
拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象
内部插入：
n
o
d
e
.
a
p
p
e
n
d
(
node.append(
node.append(newNode) 内部结尾追加
n
o
d
e
.
p
r
e
p
e
n
d
(
node.prepend(
node.prepend(newNode) 内部开始位置追加
外部插入：
n
o
d
e
.
a
f
t
e
r
(
node.after(
node.after(newNode) 在存在元素后面追加 – 兄弟
n
e
w
N
o
d
e
.
i
n
s
e
r
t
B
e
f
o
r
e
(
newNode.insertBefore(
newNode.insertBefore(node) 在存在元素前面追加
练习5：
在id=edu下增加大专
⑥：jQuery删除元素
选中要删除元素.remove() ---- 完成元素删除
选中要删除元素.remove(expr) ----- 删除特定规则元素
remove删除节点后，事件也会删除
detach删除节点后，事件会保留 从1.4新API
练习6：
分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
AAA
练习7：
表格数据添加与删除练习
| 姓名 | 邮箱 | 手机 | 删除 |
|---|
⑦：jQuery复制和替换
复制节点
$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件
$(“p”).clone(true); 克隆节点，保留原有事件
替换节点
$(“p”).replaceWith(“ITCAST”); 将所有p元素，替换为"ITCAST“
$(“ITCAST”).replaceAll(“p”); 与replaceWith相反
⑧：全选以及左右移动练习
练习8：
全选练习
全选/全不选
足球 篮球 游泳 唱歌
练习9：
左右移动练习
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>郑州</option>
</select>
*** live 为满足条件对象，实时追加绑定 、取消live事件用die方法
Demo:
②：事件一次性绑定和自动触发
一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效
触发事件 trigger(type, [data]) 触发目标对象指定的事件执行
练习1：
为页面内所有p 元素绑定 一次性事件，点击打印p元素中内容
页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
传智播客
③：事件切换
hover(mouseover,mouseout) 模拟鼠标悬停事件
toggle(fn1,fn2,fn3…) ; 鼠标点击一次 触发一个函数
练习1：
编写一个div元素，光标移动上去 字体变为红色，移开后 变为蓝色
建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张
④：事件阻止默认动作和传播
默认动作阻止
$(“a”).click(function(event){
event.preventDefault();
// do something
});
取消事件冒泡
$(“p”).click(function(event){
event.stopPropagation();
// do something
});
信息
七、jQuery的Ajax编程
1.回顾传统Ajax开发步骤
①：创建xmlHttpRequest对象
var xmlHttp = creatHttpRequest();
②：绑定回调函数
xmlHttp.onreadystatechange = function(){……}
③：建立连接
xmlHttp.open(“GET”,”url”);
④：发送数据
xmlHttp.send(null) //GET请求
如果是POST请求需要设置编码格式：
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”);
xmlHttp.send(“key=value?key=value”)
⑤：书写回调函数
if(readyState == 4){
if(status ==200){
……
//操作xmlHttp.responseText主要针对返回HTML片段和json
//操作xmlHttp.responseXML主要针对返回XML片段。
}
}
2.jQuery的Ajax开发
jQuery提供了最底层的Ajax调用方法：$.ajax
KaTeX parse error: Expected '}', got '&' at position 52: …ata: "name=John&̲location=Boston….ajax（）进一步的封装方法
l
o
a
d
、
load、
load、get、
p
o
s
t
。
这
三
个
方
法
不
支
持
跨
域
，
post。这三个方法不支持跨域，
post。这三个方法不支持跨域，getJSON、$getScript支持跨域。
①：load方法
load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。
语法
(
"
j
q
u
e
r
y
对
象
"
)
.
l
o
a
d
(
"
u
r
l
"
,
"
d
a
t
a
"
)
;
u
r
l
：
A
j
a
x
访
问
服
务
器
地
址
d
a
t
a
：
请
求
参
数
返
回
内
容
H
T
M
L
片
段
，
自
动
放
入
("jquery对象").load("url","data") ; url：Ajax访问服务器地址 data：请求参数 返回内容HTML片段 ，自动放入
("jquery对象").load("url","data");url：Ajax访问服务器地址data：请求参数返回内容HTML片段，自动放入(“jquery对象”)innerHTML 中(如果返回的数据需要处理，我们可以使用get或者post)
load()方法的传递参数根据参数data来自动自定。如过没有参数的传递，采用GET方式传递，否则采用POST方式
练习一：校验用户名是否存在
此练习在第五章的第三小节有实现代码，这里使用jQuery的方式进行简要的列出核心代码：
$(function(){
// 为用户名添加离焦事件
$(“input[name=‘username’]”).blur(function(){
// 获得当前输入 username
var username = $(this).val();
// 提交Ajax校验
$(“#info”).load(“/Ajax/checkUsername” , {‘username’: username});
});
});
密码
②：get方法和post方法 语法 ： $.get/$.post("url","parameter",function(data){...}); url Ajax访问服务器地址 parameter 代表请求参数 function 回调函数 data 代表从服务器返回数据内容 这里data代表各种数据内容 ： HTML片段、JSON、XML
如果传递参数给服务器使用 $.post , 不需要传参数 可以使用 $.get
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
