JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。常用来给HTML网页添加动态功能、检测浏览器、验证表单、创建cookies。完整的JavaScript包含3个部分：
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)

BOM是浏览器相关的一组特性，描述了与浏览器进行交互的方法和接口，没有统一的标准。例如打开新窗口、打开新选项卡(标签页)、关闭页面，把网页设为主页，收藏夹。BOM的根本对象是Window，Window下的属性有document、location、navigagor、screen、history、frames。

DOM由W3C制定了统一的标准，与浏览器无关，它关注的是网页本身的内容。DOM最根本对象是Document，Document对象代表HTML文档，每个载入浏览器的 HTML文档都会成为Document对象。

JavaScript是面向对象的语言，但JavaScript不使用类，而是基于prototype。

一、JavaScript语法结构
1.JavaScript是一种区分大小写的语言。
2.JavaScript会忽略程序中记号之间的空格、制表符和换行符，除非它们是字符串或正则表达式直接量的一部分。所谓记号，就是一个关键字、变量名、数字、函数名或者其它实体。
3.可选的分号。如果语句分别放置在不同的行，就可以省去分号。
4.注释。//单行注释。/*多行注释*/
5.标识符。在JavaScript中，标识符用来命名变量和函数，或者用作JavaScript代码中某些循环的标签。命名规则：字母、下划线或美元符号开头，后面可接字母、下划线、美元符号或数字。
6.不要用保留字作为标识符。

二、数据类型和值
JavaScript基本数据类型：数字、字符串、布尔、null(空)、undefined(未定义)。
JavaScript复合类型：对象。对象表示的是值的集合。JavaScript中的对象有两种，一种对象表示的是已命名的值的无序集合，另一种表示的是有编号的值的有序集合。后者被称为数组。
JavaScript还定义了另一种特殊的对象--函数。函数是具有可执行代码的对象，可以通过调用函数执行某些操作。
除此之外，JavaScript语言的核心还定义了其它一些专用的对象。这些对象表示的不是新的数据类型，而是新的对象类。Date类表示日期的对象，RegExp类表示正则表达式的对象，Error类表示运行时错误的对象。

1.数字
a.所有的数字都是由浮点型表示。
b.识别十进制、十六进制(以0X开头)。
c.NaN表示非数字值。

2.字符串
a.包含在单引号或双引号中。
b.字符串中转义
\b 退格
\f 换页
\n 换行
\r 回车
\t 制表符
\' 单引号
\" 双引号
\\ 反斜线

3.布尔
JavaScript中的布尔值没有Java中的那么纯粹，可直接与其它数据类型操作。
var v = true;
alert(v+"a");
alert(v==1);//true转换成1，false转换成0。

4.null
JavaScript的关键字null是一个特殊的值，它表示“无值”。

5.undefined
当使用一个已经申明但还没有赋值的变量，或者使用了一个并不存在的对象属性时，返回undefined。虽然undefined和null不同，但是==运算符却将两者看做相等。

6.对象
对象是已命名的数据的集合，一旦创建了对象，就可以根据自己的意愿设计并使用属性。
var o = new Object();
o.x = 2;
o.x=o["x"]。
对象直接量
var point = {x:2,y=3};

7.数组
数组和对象一样是数据的集合。所不同的是，对象中的每个数值都有一个名字，而数组的每个数值有一个下标。数组可以存放任何一种JavaScript数据类型，包括对其它数组、对象或函数的引用。
var a = new Array();
a[0] = 1;
var a = new Array(1,9);
//如果只给Array()构造函数传一个参数，那么该参数指定的是数组的长度。
var a = new Array(10);
数组直接量
var a = [1,2];
var a = [[1,2],2];

8.函数
JavaScript中的函数是一个真正的数据类型，这就意味着函数可以被存储在变量、数组和对象中，而且函数还可以作为参数传给其它函数。
function message(){
return 1+1;
}

9.基本数据类型的包装对象
var v = "abc";
alert(v.length);
v是基本数据类型，为什么可以调用方法？
JavaScript分别为数字、字符串和布尔提供了Number、String和Boolean包装类。当我们试图调用字符串的方法和属性时，JavaScript内部会为该字符串创建一个String包装对象，并替换原来的字符串，但是这个包装对象是瞬时存在的。

三、变量
变量是存储数据的一个标识符。JavaScript和Java之间一个重要的差别，JavaScript是弱类型的，JavaScript的变量可以存放任何类型的值。
1.变量使用var关键字声明。
2.使用var重复声明变量是合法的。
3.如果没有用var语句给一个变量指定初始值，则该变量的值为undefined。var v;
4.如果给未用var声明的变量赋值，则该变量为全局变量。v = 2;

四、表达式和运算符
表达式是JavaScript的一个短语，最简单的表达式是直接量和变量名。
JavaScript中大部分运算符用标点符号表示，但是有些运算符由关键字表示，如delete、typeof。
算术运算符、相等运算符、关系运算符、逻辑运算符、赋值运算符。

in运算符
var v = {a:1,b:2};
alert("a" in v);

instanceof运算符
var v = [1,2];
alert(v instanceof Array);

typeof运算符
var v = "abc";
alert(typeof(v)=="string");

delete运算符
删除对象属性、数组元素或变量。用var语句声明的变量不能被删除。
var v = {a:1,b:2};
delete v.a;
alert("a" in v);

void运算符
舍弃原来的值，返回undefined。
<a href="javascript:void(0)" οnclick="openWin(this)">abc</a>

五、语句
if、else/if、switch、while、do/while、for、for/in、break、continue、return、throw、try/catch/finally

六、函数
在JavaScript中，函数既是数据类型，也是对象。
1.创建函数的3种方式
a.function add{return true};
b.var add = new Function("a", "b", "return a+b;");alert(add(1,2));
c.var add = function(a, b){return a+b;};alert(add(1,2));

2.函数的实际参数
因为JavaScript是弱类型语言，所以函数的参数没有类型，如果参数的类型很重要，可用typeof检查。当调用函数时，形参的数目可以是任意的。数组argements[]将保存实际参数值。

3.函数没有重载，只有覆盖。

4.call、apply
ECMAScript v3给所有函数定义了两个方法call和apply。
call([thisObj[,arg1[,arg2[,[,argN]]]]])
call可以用来代替另一个对象调用一个方法。call可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
call和apply两者在作用上是相同的，但两者在参数上有区别。
fun.apply(func1,[var1,var2,var3]);

var fun = new function(){
this.a="fun";
}
var myfun = function(x){
var a="myfun";
alert(this.a);
alert(x);
}
myfun.call(fun,"var");
//输出fun、var。

5.JavaScript全局函数
decodeURI() - 解码某个编码的URI。
decodeURIComponent() - 解码一个编码的URI组件。
encodeURI() - 把字符串编码为URI。
encodeURIComponent() - 把字符串编码为URI组件。
escape() - 对字符串进行编码。
eval() - 计算JavaScript字符串，并把它作为脚本代码来执行。
getClass() - 返回一个JavaObject的JavaClass。
isFinite() - 检查某个值是否为有穷大的数。
isNaN() - 检查某个值是否是数字。
Number() - 把对象的值转换为数字。
parseFloat() - 解析一个字符串并返回一个浮点数。
parseInt() - 解析一个字符串并返回一个整数。
String() - 把对象的值转换为字符串。
unescape() - 对由escape()编码的字符串进行解码。

七、对象
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中对象是属性和方法的无序集合，属性是与对象相关的值，方法是能够在对象上执行的动作。

1.可用for/in遍历对象的属性。
for(var v in obj){
alert(v);
}

2.可用delete删除对象的属性。
delete v.a;

3.构造函数。
function rectangle(w,h){
this.width = w;
this.height = h;
}
var v = new rectangle(2,3);
alert(v.height);

4.方法。
所谓方法，其实就是通过对象调用JavaScript函数。在方法主体内部，关键字this的值会变成调用该方法的对象。如调用v.f(2)方法时，方法的主体可以使用this关键字来引用对象v。
var v = new Object();
v.f = fun;
v.f(2);
alert(v.t);
function fun(a){this.t=a};

5.原型与继承。
每个对象都有原型对象，每个对象都继承原型对象的所有属性。继承是在查询一个属性值时自动发生的，属性并非从原型对象复制到新的对象。在读对象v的属性p时，JavaScript首先检查v是否具有一个名为p的属性。如果v没有这个属性，则检查v的原型对象是否具有这个属性。当写一个属性值时，JavaScript不使用原型对象。JavaScript中的所有函数都有prototype属性，它引用一个对象。
function fun(x){
this.x=x;
}
var v = new fun(3);
//v.p = 6;
fun.prototype.p=5;
alert(v.p);

6.JavaScript内置对象
Number:new Number(value);
JavaScript中的所有数字都存储为根为10的64位(8比特)，浮点数。整数(不使用小数点或指数计数法)最多为15位。小数的最大位数是17，但是浮点运算并不总是100%准确。

String:new String(s);
charAt(index)必需 - 返回在指定位置的字符。
concat(stringX,stringX,...,stringX)必需 - 连接字符串。
indexOf(searchvalue,fromindex)必需,可选 - 返回指定字符串在字符串中首次出现的位置(如果要检索的字符串值没有出现，则该方法返回-1)。
lastIndexOf(searchvalue,fromindex)必需,可选 - 从后向前搜索字符串。
replace(regexp/substr,replacement)必需,必需 - 替换与正则表达式匹配的子串。
split(separator,howmany)必需,可选 - 把字符串分割为字符串数组。
slice(start,end)必需,必需 - 提取字符串的某个部分，并以新的字符串返回被提取的部分。
substr(start,length)必需,可选 - 从起始索引号提取字符串中指定数目的字符。
substring(start,stop)必需,可选 - 提取字符串中介于两个指定下标之间的字符。
toLowerCase() - 把字符串转换为小写。
toUpperCase() - 把字符串转换为大写。

Math
ceil(x) - 对数进行上舍入。
floor(x) - 对数进行下舍入。
round(x) - 把数四舍五入为最接近的整数。
random() - 返回0~1之间的随机数。
max(x,y) - 返回x和y中的最高值。
min(x,y) - 返回x和y中的最低值。

八、正则表达式
正则表达式(regular expression)是一个描述字符模式的对象，RegExp类表示正则表达式，RegExp和String都定义了使用正则表达式进行模式匹配和文本检索与替换的函数。

直接量语法
var r = /pattern/attributes;

RegExp对象语法
var r = new RegExp(pattern, attributes);

参数attributes是一个可选的字符串，包含属性"g"、"i"和"m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。如果pattern是正则表达式，而不是字符串，则必须省略该参数。

RegExp对象方法
compile：编译正则表达式。
exec：检索字符串中指定的值。返回找到的值，并确定其位置。
test：检索字符串中指定的值。返回true或false。

String对象的正则表达式方法
search：检索与正则表达式相匹配的值。
match：找到一个或多个正则表达式的匹配。
replace：替换与正则表达式匹配的子串。
split：把字符串分割为字符串数组。

var r = /ab/;
var str = "abcd";
alert(r.test(str));//true
var str = "a";
alert(r.test(str));//false

方括号用于查找某个范围内的字符：
var r = /[abc]/;
var str = "ra";
alert(r.test(str));//true

var r = /(red|blue|green)/;
var str = "reddd";
alert(r.test(str));//true

[0-9]查找任何从0至9的数字。
[a-z]查找任何从小写a到小写z的字符。

元字符是拥有特殊含义的字符：
.：查找单个字符，除了换行和行结束符。
\w：查找单词字符。
\W：查找非单词字符。
\d：查找数字。
\D：查找非数字字符。
\s：查找空白字符。
\S：查找非空白字符。
\b：匹配单词边界。
\B：匹配非单词边界。
\0：查找NUL字符。
\n：查找换行符。
\f：查找换页符。
\r：查找回车符。
\t：查找制表符。
\v：查找垂直制表符。
\xxx：查找以八进制数xxx规定的字符。
\xdd：查找以十六进制数dd规定的字符。
\uxxxx：查找以十六进制数xxxx规定的Unicode字符。

量词
n+：匹配任何包含至少一个n的字符串。
n*：匹配任何包含零个或多个n的字符串。
n?：匹配任何包含零个或一个n的字符串。
n{X}：匹配包含X个n的序列的字符串。
n{X,Y}：匹配包含X到Y个n的序列的字符串。
n{X,}：匹配包含至少X个n的序列的字符串。
n$：匹配任何结尾为n的字符串。
^n：匹配任何开头为n的字符串。
?=n：匹配任何其后紧接指定字符串n的字符串。
?!n：匹配任何其后没有紧接指定字符串n的字符串。

手机号
var r = new RegExp(/^(13[0-9]|15[0-9]|18[0-9]|14[0-9])\d{8}$/);
var str = "15000000000";
alert(r.test(str));

中文：[\u4e00-\u9fa5]
Email：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

九、BOM
浏览器对象模型，使JavaScript可以与浏览器交互。浏览器的主要任务是在一个窗口中显示HTML文档，Window对象代表显示该文档的窗口(或框架)。一个窗口一个Window对象，Window是程序设计中的全局对象。

由于Window对象是全局对象，因此所有的全局变量都是该对象的属性，全局函数是该对象的方法。如下代码功能相同。
var v = 2；
window.v = 2;

Window对象是JavaScript中的一个关键对象，其它所有对象都和这个对象关联在一起。如Window中的document属性关联Document对象，location属性关联Location对象，frames[]数组关联原始窗口的Window对象。
parent.frames[0].document.forms[0].elements[0].options[0].text;

Window
1.self、window、parent、top各种Window对象。
2.document对应Document对象。
3.location对应Location对象。
4.history对应History对象。
5.navigator对应Navigator对象。
6.screen对应Screen对象。
7.frames[]对应Window对象数组。

Document
1.forms[]对应Form对象数组。
2.links[]对应Link对象数组。
3.images[]对应Image对象数组。
4.anchors[]对应Anchor对象数组。
5.applets[]对应applet数组。
6.embeds[]对应嵌入对象数组。

Form
elements[]对应表单元素object

表单元素object
Button、Checkbox、FileUpload、Hidden、Password、Radio、Reset、Select、Submit、Text、Textarea

Select
options[]对应Option对象数组

事件驱动的程序设计模式
Web浏览器使用事件来通知程序有用户输入，事件的类型有很多种，如按键事件、鼠标事件。当一个事件发生时，Web浏览器会调用事件处理程序来响应该事件。事件是不可预知的、异步的时刻被调用。

HTML中嵌入JavaScript
1.<script></script>之间。
2.<script>标签的src属性指定的外部文件中。
<script src="js/public.js"></script>
3.事件处理程序中，HTML属性值指定。
οnblur="if(this.value='');this.value='abcd'";"
4.作为URL的主体，这个URL使用特殊的javascript:协议。
<a href="javascript:window.open('http://www.hao123.com'); void 0">a</a>
任何使用正规URL的地方都可以使用javascript:URL。

属性language和type
<script langage="JavaScript" type="text/javascript">
JavaScript是最常用的客户端脚本，但不是唯一的，langage属性用于告诉浏览器中的脚本是什么语言。HTML4规范标准化了<script>标签，不推荐使用language属性，主张使用type属性，将脚本语言指定为MIME类型。

窗口和框架
每个浏览器窗口以及窗口中的框架都是由Window对象表示的，Window对象定义了很多属性和方法。

Window重要的属性：
closed
一个布尔值，只有当窗口被关闭时，它才为true。
defaultStatus、status
在浏览器状态栏中显示的文本。
document
对Document对象的引用，该对象代表在窗口中显示的HTML文档。
frames[]
Window对象的数组，代表窗口中的各个框架(如果存在)。
history
对History对象的引用，该对象代表用户浏览器窗口的历史。
location
对Location对象的引用，该对象代表在窗口中显示的文档的URL。
name
窗口的名称。可用做<a>、<form>、<map>的target属性值。
opener
对打开当前窗口的Window对象的引用。如果当前窗口被用户打开，则它的值为null。
parent
如果当前的窗口是框架，它就是对窗口包含这个框架的引用。
self
自引用属性，是对当前Window对象的引用，与window属性同义。
top
如果当前窗口是框架，它就是对包含这个框架的顶级窗口的Window对象的引用。对于嵌套在其它框架中的框架，top不等同于parent。
window
自引用属性，是对当前Window对象的引用，与self属性同义。

Window重要的方法：
alert();confirm();prompt();
向用户显示简单的对话框，confirm()和prompt()用于获取用户的响应。
close()
关闭窗口。
focus();blur();
请求或放弃窗口的键盘焦点。
moveBy();moveTo();
移动窗口。
open();
打开新的顶级窗口，用指定的特性显示指定的URL。
print();
打印窗口或框架中的内容。
resizeBy();resizeTo();
调整窗口大小。
scrollBy();scrollTo();
滚动窗口中显示的文档。
setInterval();clearInterval();
设置或取消重复调用的函数，该函数在两次调用之间有指定的延迟。
setTimeout();clearTimeout();
设置或者取消在指定的若干毫秒后要调用一次的函数。

open()
用于打开一个新的浏览器窗口，这个方法有四个可选参数。第一个参数指定URL，如为空，则打开一个空窗口。第二个参数为新窗口的名字，这个名字可用作<a>标签的target属性值。第三个参数指定窗口特性，这些特性声明了窗口的大小和GUI装饰。第四个参数为布尔值，只在第二个参数命名是一个已经存在的窗口时才有用。open返回Window对象，Document中也有open方法，为避免冲突，window.open不建议简写。

function message(){
if(confirm('确定要跳转到hao123吗？')){
location='http://www.hao123.com';
}
else{
alert("不进行跳转");
}
}

var str = prompt("请输入密码","");
alert(str);
}

Location
获取、设置当前页面的URL。有如下属性、方法。
href：返回当前页面的URL。
protocol：返回所使用的web协议(http://或https://)。
port：返回web主机的端口(80或443)。
hostname：返回web主机的域名。
pathname：返回当前页面的路径和文件名。
search：设置或获取URL中跟在问号后面的部分。
hash：设置或获取URL中在井号“#”后面的分段。
assign()：加载新的文档。
reload()：重新装入当前页面。
replace()：装入指定URL来替换当前文档，不会把上一个URL存入历史列表中，back按钮不能返回原来的URL。
在大多数情况下，document.location和location.href是相同的。但是，当存在服务器重定向时，document.location包含的是已经装载的URL，而location.href包含的则是原始的URL。

History
包含浏览器的历史。History对象最初是用来保存浏览历史中的URL数组，后来对于安全性和隐私性的考虑，脚本不能真正访问History对象的数组元素。只有length属性和三个方法可以访问。
back()：与在浏览器点击后退按钮相同。
forward()：与在浏览器中点击向前按钮相同。
go()：从历史列表中装入URL。history.go(-2)。
length：获取历史列表中的元素数目。

Navigator
包含浏览器的信息(如版本和它可以显示的数据格式列表)。

Screen
包含用户显示器的大小和可用颜色数量的信息。
availWidth：可用的屏幕宽度。
availHeight：可用的屏幕高度。

多窗口和多框架
框架通常是由<frameset>和<frame>标签创建的。在HTML4中<iframe>可创建内联框架。一个窗口中的任何框架都可以使用Window对象的属性frames、parent、top来引用其它框架。

每个窗口都有frames属性，这个属性引用了Window对象的数组，其中每个元素代表的是这个窗口中包含的框架。如果文档包含框架(frame或iframe标签)，浏览器会为HTML文档创建一个Window对象，并为每个框架创建一个额外的Window对象。

十、DOM
文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。DOM定义了访问和操作HTML文档的标准，通过DOM可访问HTML文档的所有元素(改变HTML元素、属性、CSS、事件)。

Document对象属性
cookie：设置或返回与当前文档有关的所有cookie。
domain：返回当前文档的域名。
lastModified：返回文档被最后修改的日期和时间。
referrer：返回载入当前文档的文档的URL。
title：返回当前文档的标题。
URL：返回当前文档的URL。

Document对象方法
getElementById()：根据HTML元素id属性获取对象。
getElementsByName()：根据HTML元素name属性获取数组。
getElementsByTagName()：根据HTML元素标签获取数组。
open()：打开一个流，收集document.write()方法的输出。
close()：关闭用document.open()方法打开的输出流，并显示选定的数据。
write()：向文档写HTML表达式或JavaScript代码。
writeln()：在write()方法的基础上加换行符。
var doc=document.open();
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
doc.write(txt);
doc.close();

DOM对象
Document：代表整个HTML文档，可被用来访问页面中的所有元素。
Anchor：<a>元素，表示超链接，即锚。
Area：<area>元素，图像映射的一个区域。
Base：<base>元素。
Body：<body>元素。
Button：<button>元素。
Event：某个事件的状态。
Form：<form>元素。
Frame：<frame>元素。
Frameset：<frameset>元素。
Iframe：<iframe>元素。
Image：<img>元素。
Input button：HTML表单中的一个按钮。
Input checkbox：HTML表单中的复选框。
Input file：HTML表单中的文件上传。
Input hidden：HTML表单中的隐藏域。
Input image：HTML表单中的图像提交按钮。
Input password：HTML表单中的密码域。
Input radio：HTML表单中的单选按钮。
Input reset：HTML表单中的重置按钮。
Input submit：HTML表单中的确认按钮。
Input text：HTML表单中的文本输入域。
Link：<link>元素，定义两个链接文档之间的关系，位于head部分。
Meta：<meta>元素，提供HTML的元信息，如搜索引擎的关键词以及刷新频率。
Object：<object>元素，网页中包含对象，如图像、音频、视频、Java applet、ActiveX、PDF、Flash。
Option：<option>元素，下拉列表中的一个选项。
Select：HTML表单中的下拉列表。
Style：单独的样式声明。
Table：<table>元素。
TableData：<td>元素。
TableRow：<tr>元素。
Textarea：<textarea>元素。

禁用
document.getElementById("button1").disabled=true;
隐藏
document.getElementById("button1").style.display="none";
显示
document.getElementById("button1").style.display="block";

cookie
cookie是客户永久性存储或暂时存储的少量状态数据。cookie将随网页被服务器发送给客户，客户在本地将它们存储起来。此后当客户请求同一个网页或与之相关的网页时，它可以把相关的cookie传回服务器，服务器能够利用这些cookie的值来改变发送给客户的内容。

cookie是Web浏览器存储的少量命名数据，它与某个特定的网页或网站关联在一起。cookie用来给Web浏览器提供内存，以便脚本和服务器端程序可以在一个页面中使用另一个页面的输入数据，或者在用户离开页面并返回时恢复用户的优先级及其它状态变量。cookie最初是为CGI程序设计的，而且在最低级别上作为HTTP协议的扩展。因为cookie数据可以自动地在Web浏览器和Web服务器之间传递，所以位于服务器端的CGI脚本可以读写存储在客户端的cookie值。

在JavaScript中，cookie用来保存状态，并建立浏览器某种类型的身份。JavaScript中的cookie不使用任何加密技术，因而也没有安全性。

十一、AJAX
Asynchronous JavaScript And XML(异步的JavaScript和XML)。AJAX可以使网页实现异步更新。在不重新加载整个网页的情况下，对网页的某部分进行更新。通过AJAX，JavaScript无需等待服务器的响应。

XMLHttpRequest用于在后台与服务器交换数据，如需将请求发送到服务器，可以使用XMLHttpRequest对象的open()和send()方法。
open(method,url,async)：规定请求的类型、URL以及是否异步处理请求。
--method：请求的类型；GET或POST。
--url：文件在服务器上的位置。
--async：true(异步)或false(同步)。
send(string)：将请求发送到服务器。
--string：仅用于POST请求。

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

get与post的区别
1.get的参数会在URL中显示，post不会在URL中显示参数。
2.get传送的数据量不能大于2KB，post传送的数据量较大。
3.get需要注意缓存问题。

get
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age) + "&random=" + Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);

post
var data = "username=" + encodeURIComponent(username) + "&age=" + encodeURIComponent(age);
xmlHttp.open("post", "Server.aspx", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(data);

十二、JSON
JavaScript对象表示法(JavaScript Object Notation)。用于存储和交换文本信息，类似于XML，但比XML更小、更快、更容易解析。

JSON转换为JavaScript对象
var txt = '{"employees":[{"firstName":"Bill","lastName":"Gates"},{"firstName":"George","lastName":"Bush"}]}';
var obj = eval ("(" + txt + ")");
alert(obj.employees[0].firstName);
alert(obj.employees[0].lastName);

var json='{"name":"abcd","age":24}';
var v = eval("(" + json + ")");
alert(v.name);

JSON值类型
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true或false)
数组(在方括号中)
对象(在花括号中)
null
317

jQuery
jQuery是一个JavaScript库，简化了JavaScript编程。"$"符号在jQuery中代表对jQuery对象的引用, "jQuery"是核心对象。主要功能：HTML元素的获取和操作、HTML事件函数、CSS操作、JavaScript特效和动画、AJAX、DOM遍历和修改。

1.轻巧，页面加载速度较快。
2.简化AJAX。
3.强大的函数。
4.兼容主流浏览器。
5.扩展性强，有丰富的插件。

引入jQuery：<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

jQuery名称冲突
var jq=jQuery.noConflict();可用jq来代替$符号。

文档就绪函数
$(document).ready(function(){
--code;
});

jQuery语法
$(this).hide()：隐藏当前的HTML元素。
$("#test").hide()：隐藏id="test"的元素。
$("p").hide()：隐藏所有<p>元素。
$(".test").hide()：隐藏所有class="test"的元素。

jQuery事件
$(document).ready(function) -将函数绑定到文档的就绪事件(当文档完成加载时)。
$(selector).click(function) -触发或将函数绑定到被选元素的点击事件。
$(selector).dblclick(function) -触发或将函数绑定到被选元素的双击事件。
$(selector).focus(function) -触发或将函数绑定到被选元素的获得焦点事件。
$(selector).mouseover(function) -触发或将函数绑定到被选元素的鼠标悬停事件。

选择器
选择器可以对一个或多个元素进行操作。分为3类：基本选择器、层次选择器、过滤选择器。

jQuery对象不能使用DOM对象中的方法和属性。
jQuery转DOM
var cr=$("#cr");
var v=cr[0];或var v=cr.get(0);
DOM转jQuery
var cr=document.getElementById("cr");
var v=$(cr);

jQuery DOM操作
text() -设置或返回所选元素的文本内容。
html() -设置或返回所选元素的内容(包括HTML标记)。
val() -设置或返回表单字段的值。
attr() -设置或返回属性值。
$("#id").attr("href");
$("#id").attr("href","http://www.hao123.com");
append() -在被选元素的结尾插入内容。
prepend() -在被选元素的开头插入内容。
after() -在被选元素之后插入内容。
before() -在被选元素之前插入内容。
remove() -删除被选元素(及其子元素)。
empty() -删除被选元素的子元素。
addClass() -向被选元素添加一个或多个类。
removeClass() -从被选元素删除一个或多个类。
toggleClass() -对被选元素进行添加/删除类的切换操作。
css() -设置或返回样式属性。
$("#div1").addClass("important blue");
$("p").css("background-color");
$("p").css("background-color","red");
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery AJAX
原始的AJAX比较繁琐，不同的浏览器对它的实现各不相同，jQuery对AJAX进行了封装。两种在客户端和服务器端进行请求-响应的常用方法：GET和POST。GET 从指定的资源请求数据，POST向指定的资源提交要处理的数据，也可从服务器获取数据。
GET请求可被缓存。
GET请求保留在浏览器历史记录中。
GET请求可被收藏为书签。
GET请求不应在处理敏感数据时使用。
GET请求有长度限制，URL的最大长度是2048个字符。
GET请求只应当用于取回数据。

//必须的URL，可选的callback。
$.get(URL,callback);
//必须的URL，可选的data、callback。
$.post(URL,data,callback);

$("button").click(function(){
$.get("query.action",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

$("button").click(function(){
$.post("query.action",
{name:"lc",sex:"man"},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

1.基本选择器
*：$("*")所有元素。
id选择器：$("#lastname")id="lastname"的元素。
class选择器：$(".intro")所有class="intro"的元素。
元素选择器：$("p")所有<p>元素。
.class.class：$("p.intro")所有class="intro"的<p>元素。
s1,s2,s3：$("div,#divId")所有div元素和id为divId的元素。

2.层次选择器
$("div span")：选取<div>里的所有的<span>元素。
$("parent>child")：选取parent元素下的child(子元素)。
$("prev+next")：prev和next是两个同级别的元素，选取紧跟在prev元素后的next元素。
$("#divId~[title]")：选择id为divId的对象后面所有带有title属性的元素。

3.过滤选择器
:first -$("tr:first")匹配找到的第一个元素，查找表格的第一行。
:last -$("tr:last")匹配找到的最后一个元素，查找表格的最后一行。
:even -$("tr:even")所有偶数<tr>元素。
:odd -$("tr:odd")所有奇数<tr>元素。
:eq(index) -$("tr:eq(1)")查找第index+1个元素，index从0开始。
:gt(index) -$("tr:gt(1)")大于index的元素。
:lt(index) -$("tr:lt(1)")小于index的元素。
:header -$(":header")所有标题元素<h1>-<h6>。
:contains(text) -$(":contains('W3School')")包含指定字符串的所有元素。
:empty -$(":empty")无子元素的所有元素。
:hidden -$("p:hidden")所有隐藏的<p>元素。
:visible -$("table:visible")所有可见的表格。
[attribute] -$("[href]")所有带有href属性的元素。
[attribute=value] -$("[href='#']")所有href属性的值等于"#"的元素。
[attribute!=value] -$("[href!='#']")所有href属性的值不等于"#"的元素。
[attribute$=value] -$("[href$='.jpg']")所有href属性的值包含以".jpg"结尾的元素。
:input -$(":input")所有<input>元素。
:text -$(":text")所有type="text"的<input>元素。
:enabled -$(":enabled")所有激活的input元素。
:disabled -$(":disabled")所有禁用的input元素。
:selected -$(":selected")所有被选取的input元素。
:checked -$(":checked")所有被选中的input元素。

 

转载于:https://www.cnblogs.com/lc19149/p/9341087.html