Html+JS+HTMLdom+Json+JQuery 常用基础知识点汇总

本文链接：https://blog.csdn.net/oAnthonyZhang/article/details/9296917

1、form中的input有哪些类型？各是做什么处理使用的？
text radio checkbox file button image submit reset hidden

2、table标签中border,cellpadding td标签中colspan,rowspan分别起什么作用？
border边界
cellpadding边距
colspan跨列数
rowspan跨行数

3、form中的input可以设置readonly和disable，请问这两项属性有什么区别？
readonly不可编辑,但可以选择和复制
disable不能编辑复制选择

4、JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么？
alert
confirm
prompt

5.在JavaScript中四种基本的数据类型：
数值（整数和实数）
字符串型（用“”号或‘’括起来的字符或数值）
布尔型（使True或False表示）
空值

6.如何获取函数参数的个数：
Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;

7.JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。
而基于对象的基本特征，就是采用事件驱动(event-driven)。
它是在用形界面的环境下，使得一切输入变化简单化。
通常鼠标或热键的动作我们称之为事件（Event），
而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。
而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。

8.JS中主要的事件：
单击事件onClick
onChange改变事件
选中事件onSelect
获得焦点事件onFocus
失去焦点onBlur
载入文件onLoad
卸载文件onUnload

9.JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。

一个对象要真正地被使用，可采用以下几种方式：
1.引用JavaScript内部对象；
2.由浏览器环境中提供
3.创建新对象。
这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。

格式如下： For（对象属性名 in 已知对象名）
说明： 1.该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。
2.该语句的优点就是无需知道对象中属性的个数即可进行操作。例：下列函数是显示数组中的内容： Function showData(object) for (var X=0; X<30;X++) document.write(object[i])；该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。而使For...in语句，则根本不需要知道对象属性的个数，见下： Function showData(object) for(var prop in object) document.write(object[prop])；使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。

使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。 with object{ ...} 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。
使用New运算符可以创建一个新的对象。其创建对象使用如下格式： Newobject=NEW Object(Parameters table); 其中Newobject创建的新对象：object是已经存在的对象； parameters table参数表；new是JavaScript中的命令语句。如创建一个日期新对象 newData=New Data() birthday=New Data (December 12.1998) 之后就可使NewData、birthday作为一个新的日期对象了。

使用点（.）运算符: university.Name=“广西”
通过对象的下标实现引用: university[0]=“广西”
通过字符串的形式实现 : university["Name"]=“广西”

在JavaScript中对象方法的引用是非常简单的。
ObjectName.methods() 实际上methods()=FunctionName方法实质上是一个函数。如
引用university对象中的showmy（）方法，则可使用： document.write (university.showmy()) 或：document.write(university)
如引用math内部对象中cos()的方法则： with(math) document.write(cos(35)); document.write(cos(80));
若不使用with则引用时相对要复杂些： document.write(Math.cos(35)) document.write(math.sin(80))

10.JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

string对象：内部静态性。访问properties和methods时，可使用（.）运算符实现。基本使用格式：objectName.prop/methods
string对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例： mytest="This is a JavaScript" mystringlength=mytest.length 　　最后mystringlength返回mytest字串的长度为20。
string对象的方法共有１９个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。其主要方法如下：　　o 锚点anchor()：该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:string.anchor(anchorName)。　　o 有关字符显示的控制方法 big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。　　o 字体颜色方法；fontcolor(color) 　　o 字符串大小写转换 toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式: string=stringValue.toUpperCase和string=stringValue.toLowerCase。　　o 字符搜索：indexOf[charactor,fromIndex] 从指定formIndtx位置开始搜索charactor第一次出现的位置。返回字串的一部分字串：substring(start,end) 从start开始到end的字符全部返回。

算术函数的math对象
功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等。
静动性：静态对象
主要属性 :math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。
主要方法: 绝对值：abs() 　正弦余弦值：sin(),cos() 　反正弦反余弦 :asin(), acos() 　正切反正切：tan(),atan() 　四舍五入：round() 　平方根：sqrt() 　基于几方次的值：Pow(base,exponent)

功能：提供一个有关日期和时间的对象。
静动性：动态性，即必须使用New运算符创建一个实例。例: MyDate=New Date() Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。　日期起始值:１７７０年１月１日００:００:００。

getYear(): 返回年数　getMonth():返回当月号数　getDate(): 返回当日号数　getDay():返回星期几　getHours():返回小时数　getMintes(:返回分钟数　getSeconds():返回秒数　getTime() : 返回毫秒数
setYear():设置年　setDate():设置当月号数　setMonth():设置当月份数　setHours():设置小时数　setMintes():设置分钟数　setSeconds():设置秒数　setTime ():设置毫秒数

JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。 1．返回字符串表达式中的值：　方法名：eval（字串表达式），例： test=eval(“8+9+5/2”); 2. 返回字符串ASCI码：　方法名：unEscape (string) 3．返回字符的编码：　方法名：escape(character) 4．返回实数： parseFloat(floustring); 5．返回不同进制的数： parseInt(numbestring ,rad.X) 其中radix是数的进制，numbs字符串数

JavaScript对象的定义，其基本格式如下： Function Object（属性表） This.prop1=prop1 This.prop2=prop2 ... This.meth=FunctionName1; This.meth=FunctionName2; ... 在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义： Function university(name,city,creatDate URL) This.name=name This.city=city This.creatDate=New Date(creatDate) This.URL=URL 其基本含义如下： Name－指定一个“单位”名称。　 City－“单位”所在城市。　 CreatDate－记载university对象的更新日期。　 URL－该对象指向一个网址。

一旦对象定义完成后，就可以为该对象创建一个实例了： NewObject=New object(); 其中Newobjet是新的对象，Object已经定义好的对象。例： U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM") U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")

在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图
例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。 function university(name,city,createDate,URL) This.Name=Name; This.city=city; This.createDate=New Date(creatDate)； This.URL=URL； This.showuniversity=showuniversity; 其中This.showuniversity就是定义了一个方法－－－showuniversity()。而showuniversity()方法是实现university对象本身的显示。 function showuniversity() For (var prop in this) alert(prop+="+this[prop]+""); 其中alert是JavaScript中的内部函数，显示其字符串。

使用New创建数组 JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。

Function arrayName(size){ This.length=Size; for(var X=; X<=size;X++) this[X]=0; Reture this; } 其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。
一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例： Myarray=New arrayName(n); 并赋于初值： Myarray[1]=“字串１”； Myarray[2]=“字串２”； Myarray[3]=“字串３”； ... Myarray[n]=“字串n”；一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用

Function creatMArray(row,col){ var indx=0; this.length=(row*10)+col for(var x=1;x<=row;x++) for(var y=1;y<=col;y++) indx=(x*10)+y; this[indx]=””; } myMArray=new creatMArray(); 之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、 …来引用。

11.在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。
links[]: 使用<A href=”URL”>来定义一个越文本链接项。
Forms[]: 在程序中使用多窗体时,建立该数组。
Elements[]:在一个窗口中使用从个元素时,建立该数组。
Frames[]:建立框架时,使用该数组
anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。

12.JavaScript对象系统
浏览器对象(Navigator)
窗口对象(Window)
文档对象(Document)
位置对象(Location)
历史对象(History)
在这些对象系统中,文档对象非常重要,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。
document对象的主要作用就是把这些基本的元素（如links,anchor.Form.Method .Prop 等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。

document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：（１）链接颜色：alinkcolor 这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。（２）链接颜色：linkcolor 当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。（３）浏览过后的颜色：VlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。（４）背景颜色：bgcolor 该元素包含文档背景的颜色。（５）前景颜色：Fgcolor 该元素包含HTML文档中文本的前景颜色

１）窗体属性：　　窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。（２）锚属性：anchors 　　该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。（３）链接属性：links 　　链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。

请看下面例子： <HTML> <Head> <script languaga="JavaScript"> Var test=window.prompt("请输入数据:"); document.write(test+"JavaScript输入输出的例子"); </script> </Head> </HTML> 其中window.prompt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框，让你输出数据。document.writle是一个文档对象的方法，它的基本功能，是实现Web页面的输出显示

该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点：　该对象对应于HTML文档中的<Body>和<FrameSet>两种标识；　onload和onunload都是窗口对象属性；　在JavaScript脚本中可直接引用窗口对象。如： window.alert("窗口对象输入方法") 可直接使用以下格式： alert("窗口对象输入方法")

窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。

窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。　　创建一个新窗口open() 使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。　　具有OK按钮的对话框 alert()方法能创建一个具有OK按钮的对话框。　　具有OK和Cancel按钮的对话框 confirm()方法为编程人员提供一个具有两个按钮的对话框。　　具有输入信息的对话框 prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下prompt（“提示信息”，默认值）。

窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个：（１）frames 确文档中帧的数目 frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点：　　frames属性是通过HTML标识<Frames>的顺序来引用的，它包含了一个窗口中的全部帧数。　　帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。（２）Parent 指明当前窗口或帧的父窗口。（３）defaultstatus:默认状态，它的值显示在窗口的状态栏中。（４）status:包含文档窗口中帧中的当前信息。（５）top:包括的是用以实现所有的下级窗口的窗口。（６）window.指的是当前窗口（７）self:引用当前窗口。

13.输出流及文档对象
在JavaScript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。
创建新文档open()方法
write()、writeln()输出显示
关闭文档流close()
清除文档内容clear()

输入:Window.prompt("提示信", 预定输入信息);
输出 :document.write()方法和 document.writeln()方法说明：　write()和writeln()方法都是用于向浏览器窗口输出文本字串；　二者的唯一区别就是writeln()方法自动在文本之后加入回车符。window.alert()输出,在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <Script Language="JavaScript">  </Script> </BODY> </HTML> 从上面程序可以看出：　可通过write()和prompt()方法实现交互。　在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中<H1>和<Br>就是HTML标识符。

窗体（Form）:它是构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。 <form Name=Form1> <INPUT type=text...> <Input type=text...> <Inpup byne=text...> </form> <form Name=Form2> <INPUT type=text...> <Input type=text...> </form>

窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式： document.mytest.submit()

窗体对象中的属性主要包括以下：elements name action target encoding method. 　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例： elements[0].Mytable.elements[1]

在JavaScript中访问窗体对象可由两种方法实现：（１）通过访问窗体　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。（２）通过数组来访问窗体　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问： document.forms[0] document.forms[1] document.forms[2]...

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下: formName.elements[].methadName (窗体名.元素名或数组.方法) formName.elemaent[].propertyName(窗体名.元素名或数组.属性)

框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。

<HTML> <HEAD> </HEAD> <Frameset Rows="20%,80%"> <frame src="test9_1.html"> <Frameset Cols="50%,50%"> <frame src="test9_2.html"> <frame src="test9_3.html"> </Frameset> </Frameset> </HTML>

以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。　　通过[Framset ]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几行。　　可以用很多组的 <frameset...> tags 将视窗分割得更复杂。　　可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。　　　　可以用 <src> 告诉浏览器您要载入哪一个 HTML文件。

在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在　　父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问: parent.frames[Index1].docuement.forms[index2] 　　通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访： parent.framesName.decument.formNames.elementName.(m/p)

---
<a href=“javascript:alert(new Date());”>javascript</a>
<input type=button οnclick=“alert(new Date())”value=t />
<script language=“JavaScript” src=“文件名.js">
</script>

14.JavaScript中的标识符
标识符是指JavaScript中定义的符号，例如，变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线（_）和美元符号（$）组成，但标识符不能以数字开头，不能是JavaScript中的保留关键字。
合法的标识符举例：indentifler、username、user_name、_userName、$username
非法的标识符举例：int、98.3、Hello World
JavaScript严格区分大小写
computer和Computer是两个完全不同的符号
JavaScript程序代码的格式
每条功能执行语句的最后必须用分号（;）结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。
JavaScript程序的注释
/*…….*/中可以嵌套“//”注释，但不能嵌套“/*….*/”

15.整型常量
十六进制以0x或0X开头，例如0x8a。
八进制必须以0开头，例如：0123。
十进制的第一位不能是0（数字0除外），例如：123。
实型常量
12.32、 192.98、 5E7、4e5等。
布尔值
true和false.
null常量
undefined常量
字符串型常量
“this is JavaScript ppt”、’abc’、“a”、“”。
字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示，例如：\r、\n、 \t、 \b、 \’、 \”、 \\ .

16.创建动态函数的基本语法格式：
var varName = new Function(argument1, …. , lastArgument);
说明：
所有的参数都必须是字符串型的，最后参数必须是这个动态函数的功能代码。
例子：
<script language=“javascript”>
var square = new Function(“x”, “y”,
“var sum; sum = x*x+y*y; return sum;”);
alert(square(3, 2));
</script>

17.String对象
charAt方法：返回指定位置的字符
注意：一个字符串的第一个字符的索引位置为0，依次类推。
charCodeAt方法：返回指定位置字符的Unicode编码
lastIndexOf方法：从右向左执行
match、search方法：使用正则表达式搜索
replace方法：使用正则表达式替换
split方法：按照指定分隔符拆分字符串
slice方法：返回两个指定位置的子字符串
说明：str1.slice(0)和str1.slice(0, -1)都是返回整个字符串。
substr、substring方法：返回指定位置和长度的子字符串
注意：substring方法返回的内容不包含结束位置的字符。
-
18.定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子：
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
TIY
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例子 1：
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e
TIY
例子 2：
您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。
如需关于如何修改搜索模式的完整信息，请访问我们的 RegExp 对象参考手册。
在使用 "g" 参数时，exec() 的工作原理如下：
找到第一个 "e"，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
由于这个字符串中 6 个 "e" 字母，代码的输出将是：
eeeeeenull
TIY
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
例子：
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse
TIY
完整的 RegExp 对象参考手册
如需可与 RegExp 对象一同使用所有属性和方法的完整信息，请访问我们的 RegExp 对象参考手册。
这个参考手册包含了对 RegExp 对象中每个属性和方法的详细描述，以及使用的例子。

---
19.HTML DOM 访问节点
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。
document.getElementById("ID");
document.getElementsByTagName("标签名称");
document.getElementById('ID').getElementsByTagName("标签名称");
下面这个例子会返回所有 <p> 元素的一个节点列表，且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代：
document.getElementById('maindiv').getElementsByTagName("p");
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
// do something with each paragraph
var y=x[2];
}

parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。
此外，<tr> 是每个 <td>元素的父节点（parentNode）。
对 firstChild 最普遍的用法是访问某个元素的文本：
var x=[a paragraph];
var text=x.firstChild.nodeValue;
parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。
根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。

<html>

<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>

<body οnclick="ChangeColor()">
Click on this document!
</body>

</html>

---
20.JSON
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone

JSON 语法是 JavaScript 语法的子集。
JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
JSON 名称/值对
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"firstName" : "John"
这很容易理解，等价于这条 JavaScript 语句：
firstName = "John"
JSON 值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
JSON 对象
JSON 对象在花括号中书写：
对象可以包含多个名称/值对：
{ "firstName":"John" , "lastName":"Doe" }
这一点也容易理解，与这条 JavaScript 语句等价：
firstName = "John"
lastName = "Doe"
JSON 数组
JSON 数组在方括号中书写：
数组可包含多个对象：
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：
例子
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
可以像这样访问 JavaScript 对象数组中的第一项：
employees[0].lastName;
返回的内容是：
Gates
可以像这样修改数据：
employees[0].lastName = "Jobs";

在下面的章节，您将学到如何把 JSON 文本转换为 JavaScript 对象。
JSON 文件
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"
把 JSON 文本转换为 JavaScript 对象
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。
JSON 实例 - 来自字符串的对象
创建包含 JSON 语法的 JavaScript 字符串：
var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");
在网页中使用 JavaScript 对象：
例子
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

JSON 解析器
提示：eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

---
21.Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）
其他 Window 方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

---
22，js操作Html通过Html DOM来完成，
样式：
document.getElementById(id).style.property=new style
document.getElementById("p2").style.color="blue";
<button type="button" οnclick="document.getElementById('id1').style.color='red'">
<input type="button" value="隐藏文本" οnclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" οnclick="document.getElementById('p1').style.visibility='visible'" />
属性：
document.getElementById(id).innerHTML=new HTML
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
事件：
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击该文本</h1>
</body>
</html>
<button οnclick="displayDate()">点击这里</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body οnlοad="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" οnchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" οnfοcus="myFunction(this)">
<h1 οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">
操作Html元素，节点：
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

节点操作：

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解释：
这段代码创建新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para);
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

例子解释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识，请访问我们完整的 HTML DOM 教程。

---
23.jquery:

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素

$(document).ready(function(){

--- jQuery functions go here ----

});
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");

更多的选择器实例
语法描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

$("button").click(function() {..some code... } )
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 效果 - 隐藏和显示
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery 效果 - 淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
$(selector).fadeIn(speed,callback);
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：

jQuery 效果 - 滑动
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);

jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

实例 2
下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
实例
$("#stop").click(function(){
$("#panel").stop();
});

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法是不是很严格；您可以按照希望的格式来写，包含折行和缩进。
例子 2
这样写也可以运行：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

24.jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
实例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
实例
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
$("button").click(function(){
alert($("#w3s").attr("href"));
});

下一章会讲解如何设置（改变）内容和属性值。
jQuery HTML 参考手册
如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册：
jQuery 文档操作
jQuery 属性操作
jQuery CSS 操作

样式：
jQuery - 获取并设置 CSS 类
jQuery 删除
jQuery css()
通过 jQuery，可以很容易地对 CSS 元素进行操作。
切换类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子：
.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});

您也可以在 addClass() 方法中规定多个类：
实例
$("button").click(function(){
$("#div1").addClass("important blue");
});

jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：
实例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

jQuery css() 方法
我们将在下一章讲解 jQuery css() 方法。

jQuery - css() 方法
jQuery CSS 类
jQuery 尺寸
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");

设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");

设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery HTML 参考手册
如需有关 jQuery CSS 方法的完整内容，请访问我们的 jQuery CSS 操作参考手册
窗口尺寸：
jQuery - 尺寸
jQuery css()
jQuery AJAX 简介
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：
实例
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
实例
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
实例
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
实例
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});

jQuery - 更多的 width() 和 height()
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
实例
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});

下面的例子设置指定的 <div> 元素的宽度和高度：
实例
$("button").click(function(){
$("#div1").width(500).height(500);
});

jQuery CSS 参考手册
如需关于 jQuery Dimensions 的完整参考，请访问我们的 jQuery 尺寸参考手册。

属性：
alert($("#w3s").attr("href"));
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});

设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});

attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});


操作节点：
jQuery - 添加元素
jQuery 设置
jQuery 删除
通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");

jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");

通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
实例
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}

jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");

$("img").before("Some text before");

通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}

jQuery - 删除元素
jQuery 添加
jQuery CSS 类
通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例
$("#div1").remove();

jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例
$("#div1").empty();

过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
$("p").remove(".italic");


事件：
jQuery 事件
jQuery 选择器
jQuery 隐藏/显示
jQuery 是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
实例
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
$("p").hide();
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
如需完整的参考手册，请访问我们的 jQuery 事件参考手册。
---
jquery ajax
jQuery - AJAX load() 方法
jQuery AJAX 简介
jQuery Get/Post
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
示例
$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
实例
$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：
实例
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

jQuery AJAX 参考手册
如需完整的 AJAX 方法参考，请访问我们的 jQuery AJAX 参考手册。

jQuery - AJAX get() 和 post() 方法
jQuery 加载
jQuery noConflict()
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：这个 ASP 文件 ("demo_test.asp") 类似这样：
<%
response.write("This is some text from an external ASP file.")
%>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示：这个 ASP 文件 ("demo_test_post.asp") 类似这样：
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
jQuery AJAX 参考手册
如需完整的 AJAX 方法参考，请访问我们的 jQuery AJAX 参考手册。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>
</html>

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>

</body>
</html>

其它：
jQuery 和其他 JavaScript 框架
正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。
jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
实例
当然，您仍然可以通过全名替代简写的方式来使用 jQuery：
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});

实例
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});

实例
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行！");
});
});