项目一javascript程序设计1

目录第一章 javascript 程序设计 21.1 了解 javascript 脚本语言 21.1.1 javascript 简介 21.1.2 javascript 的特点 21.1.3 JavaScript 的工作原理 .31.1.4 简单的 javascript 程序开发步骤 (见 1-1 案例源码) 31.2 javascript 语法基础 .51.2.1 数据类型 51.2.2 变量 51.2.3 注释 61.2.4 运算符 71.2.5 数据类型转换 101.2.6 常用语句 111.2.7 函数 161.3 javascript 对象 .17第二章 jquery 基础 .172.1 jquery 的基本概念 182.1.1 jquery 步骤 .182.1.2 jquery 对象与 dom 节点转换关系 182.2 选择器 .182.2.1 基本选择器 .182.2.2 层叠选择器 .192.2.3 过滤选择器 19第三章 jquery 操作 dom 对象 263.1 遍历元素 .273.1.1 获得元素数组的项 273.1.2 使用 each()方法遍历选择器所有匹配的元素 .273.1.3 find()、filter()函数 .293.1.4 has()函数 .303.2 获取和设置元素内容 .303.3 获取和设置 html 元素的属性 .313.4 创建新的元素 333.5 将新元素添加至对象上 333.5.1 内部插入 .333.5.2 外部插入 343.5.3 包裹 .343.5.4 替换 .343.5.5 删除 .353.5.6 复制 .35第四章 jquery 的表单编程 .36第一章 javascript 程序设计html 代码所表示的文档是一种静态文档，几乎没有交互功能，很难使页面成为动态页面。增加脚本语言，可使数据发送到服务器之前先进行处理和校验，动态地创建新的 Web 内容，更重要的是，引入脚本语言使我们有了事件驱动的软件开发环境。 javascript 就是一种脚本语言。1.1 了解 javascript 脚本语言要想学好 javascript 技术，必先了解 javascript 的概念。1.1.1 javascript 简介javaScript 的原名叫 LiveScript，是 NetScape 公司在引入 Sun 公司有关Java 的程序设计概念后，重新设计而更名的。 JavaScript 是一种可以嵌入HTML 文档的，基于对象并具有某些面向对象特征的脚本语言。 说明：浏览器端脚本语言除了 JavaScript，还有 VBScript 和 Jscript，后两个是 Microsoft 公司设计的，欲了解相关内容，可到 Microsoft 公司网站查询。本教材只介绍 JavaScript。1.1.2 javascript 的特点javaScript 是一种基于对象(Object-Based)和事件驱动(Event Driven)，由浏览器解释执行的，具有安全性能的客户端脚本语言。使用它的目的是与HTML、Java Applet（Java 小程序）一起实现在一个 Web 页面中链接多个对象，与 Web 客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入在 HTML 语言中实现的。它的出现弥补了 HTML 语言的缺陷，它是 Java 与HTML 折衷的选择，具有以下几个基本特点： 是一种脚本语言 ：采用小程序段的方式实现编程，以嵌入的方式，与HTML 标识结合在一起，方便用户的使用操作。 基于对象的语言：这里的对象，是指客户机、浏览器、网页文档。也就是说，JavaScript 以类似 C、Java 的语法，以客户机、浏览器、网页文档、文档内部各种以标记表示的 HTML 元素为对象，以控制这些对象为目标，进而控制整个客户端的一种客户端脚本编程语言。 简单 ：首先它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计, 从而对于学习 Java 是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 安全 ：正常情况下，它不允许访问服务器本地的硬盘，因此不能将数据存入到服务器上；不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 动态 ：它可以直接对用户的输入做出响应，无须经过 Web 服务程序。它对用户的响应，是采用以事件驱动的方式进行的。事件(Event)可分为两类，一是用户对浏览器进行的某种操作，比如按下鼠标、移动窗口、选择菜单等，可以视为用户事件；二是系统事件，如时间的时刻变化等。当事件发生后，会向浏览器发送相应的消息（用户消息或系统消息） ，根据消息，浏览器可能会做出相应的响应，这种响应称为事件驱动，也叫消息驱动。 跨平台 ：JavaScript 代码由浏览器解释执行，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可正确执行，从而实现了“编写一次，走遍天下”的梦想。实际上 JavaScript 最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须 WEB 服务器通道，通过自己的电脑即可完成所有的事情。 JavaScript 和 Java 很类似，但并不一样。Java 是一种比 JavaScript 更复杂许多的程序语言，而 JavaScript 则是相当容易了解的语言。许多 Java 的特性在 Java Script 中并不支持。1.1.3 JavaScript 的工作原理 javaScript 编程可以完成诸如构造动画，动态菜单等使页面更加生动、活泼的任务，还可以对客户机文件系统、注册表等进行操作，如对文件夹、文件的建立，复制，删除，修改注册表，锁定注册表，锁定浏览器等等，有许多随着网页打开而运行的病毒就是含在网页中的 javaScript 程序在作怪。由此可见，javaScript 是控制客户机的精灵。 在 B/S 程序中，为了均衡负载，减轻服务器的计算负担，凡是不需要服务器程序做的工作，可尽量交给客户端程序（如 javaScript 程序）去做。我们用HTML 标记构造出用户界面，用户通过界面输入数据，向浏览器请求数据等操作。在用户输入数据，或者是输入完毕，将数据向服务器提交的时候，对数据的检验等任务完全可交给 JavaScript 程序来完成。html+javascript 的浏览器与服务器的交互原理1.1.4 简单的 javascript 程序开发步骤(见 1-1 案例源码)打开记事本，输入如下的代码function c3()alert(“第一次学习 javascript，我一定会加油！ “);在记事本中输完以后，打开保存对话框，选择保存路径，文件名命名为”li1.html”，点击保存。打开该 html 文件，就可以看到运行的效果了。分析：是 javascript 框架代码，定义函数 function c3()alert(“第一次学习 javascript，我一定会加油！“);，在html 中， onclick 为单击事件，调用 c3()函数。扩展知识：javascript 程序使用 js 文件(见 1-2 案例源码 )把上面的 javascript 程序改为使用 js 文件，效果一样。js 文件:function c3()alert(“第一次学习 javascript，我一定会加油！“);html 文件:1.2 javascript 语法基础本节介绍 javascript 基本语法，包括数据类型、变量、注释和运算符等，了解这些基本语法是使用 javascript 编程的基础。1.2.1 数据类型类型 具体描述undefined 当声明的变量未初始化时，该变量的默认值是 undefinednull 空值，如果引用一个没有定义的变量，则返回空值boolean 布尔类型，包含 true 和 false；也可以用 1 和 0 表示。string 字符串类型，由单引号或双引号括起来的字符number 数值类型，可以是 32 位、 64 位整数或浮点数javascript 原始的数据类型1.2.2 变量变量是内存中命名的存储位置，其主要作用是存取数据，提供存放信息的容器。javascript 变量名的命名规则： 第一个字符必须是字母、下划线（_）或美元符号（$ ） 。 其他字符可以是下划线（_） 、美元符号（$ ） 、任何字母或数字字符。 不能使用 javascript 中的关键字作为变量名。定义变量的方法有两种： 在变量第一次赋值时定义。如 name=”name”;alert(name); 使用 var 关键字定义变量。如 var name=”name”,age=23;/定义两个变量用逗号隔开。变量分为局部变量和全局变量： 局部变量是在函数内部定义，作用域为局部变量定义的地方开始到该函数结束而结束。 全局变量是在函数外部定义，作用域为全局变量定义的地方开始到javascript 结束而结束。如果在程序中出现相同名的局部变量和全局变量，在函数中局部变量起作用。项目练习（见案例源码 1-3）var x=0;/定义一个全局变量function c3()var x=1;/定义一个局部变量alert(x);/出现相同的全局变量和局部变量，局部变量起作用。运行效果为:扩展知识：使用 typeof 运算符可以获得变量的数据类型。var temp;document.write(typeof temp);/输出”undefined” 。temp=”hello”;document.write(typeof temp);/输出”String”。temp=100;document.write(typeof temp);/输出”Number”。分析：document 表示网页对象，document.write()表示在网页上输出括号中的数据。1.2.3 注释注释部分不参与程序运行，只起到对代码的解释作用。/是单行注释，从”/”开始到行尾均表示注释。/*/是多行注释，从 ”/*”开始到”*/”结束。见如下的代码：var temp;document.write(typeof temp);/输出”undefined”。temp=”hello”;document.write(typeof temp);/*给 temp 赋值为字符串”hello”，就知道temp 为字符串变量了，输出 typeof temp 的类型为 String*/。1.2.4 运算符运算符可以指定变量和值的运算符操作，是构成表达式的重要元素。优先级 运算符 描述 结合性() 括号 从左到右+ - 递增或递减 从右到左! 逻辑非 从右到左* / % 乘法、除法、取模 从左到右+ - 加法、减法 从左到右+ 拼接 从左到右= 大于、大于等于 从左到右= = != 等于、不等于 从左到右= = = != = 等同（类型相同） 、不等同 从左到右/ 创建 Object 对象 odelete o; / 删除对象 ovoid 出现在任何类型的操作数之前，作用是舍弃运算数的值，返回undefined 作为表达式的值。var x=1,y=2;document.write(void(x+y); /输出：undefined+ 增量运算符。了解 C 语言或 Java 的读者应该认识此运算符。它与 C 语言或 Java 中的意义相同，可以出现在操作数的前面（此时叫做前增量运算符） ，也可以出现在操作数的后面（此时叫做后增量运算符） 。+运算符对操作数加 1.，如果是前增量运算符，则返回加 1后的结果；如果是后增量运算符，则返回操作数的原值，再对操作数执行加 1 操作。例如：var iNum = 10;document.write(iNum+); /输出 “10“document.write(+iNum); /输出 “12“- 减量运算符。它与增量运算符的意义相反，可以出现在操作数的前面（此时叫做前减量运算符） ，也可以出现在操作数的后面（此时叫做后减量运算符） 。-运算符对操作数减 1.，如果是前减量运算符，则返回减 1 后的结果；如果是后减量运算符，则返回操作数的原值，再对操作数执行减 1 操作。例如：var iNum = 10;document.write(iNum-); /输出 “10“document.write(-iNum); /输出 “8“+ 一元加法运算符，可以理解为正号。它把字符串转换成数字。例如：var sNum = “100“;document.write(typeof sNum); /输出 “string“var iNum = +sNum;document.write(typeof iNum); /输出 “number“- 一元减法运算符，可以理解为负号。它把字符串转换成数字，同时对该值取负。例如：var sNum = “100“;document.write(typeof sNum); /输出 “string“var iNum = -sNum;document.write(iNum); /输出 “-100“document.write(typeof iNum); /输出 “number“算术运算符+ - * /赋值运算符复合赋值运算符 具 体 描 述*= 乘法/赋值，例如：var iNum = 10;iNum *= 2;document.write(iNum); /输出 “20“/= 除法/赋值，例如：var iNum = 10;iNum /= 2;document.write(iNum); /输出 “5“%= 取模/赋值，例如：var iNum = 10;iNum %= 7;document.write(iNum); /输出 “3“+= 加法/赋值，例如：var iNum = 10;iNum += 2;document.write(iNum); /输出 “12“-= 减法/赋值，例如：var iNum = 10;iNum -= 2;document.write(iNum); /输出 “8“= 有符号右移/赋值= 无符号右移/赋值关系运算符关系运算符 具 体 描 述= 等于运算符（两个=） 。例如 a=b，如果 a 等于 b，则返回True；否则返回 False= 恒等运算符（3 个=） 。例如 a=b，如果 a 的值等于 b，而且它们的数据类型也相同，则返回 True；否则返回 False。例如：var a=8;var b=“8“;a=b; /truea=b; /false!= 不等运算符。例如 a!=b，如果 a 不等于 b，则返回 True；否则返回 False!= 不恒等，左右两边必须完全不相等（值、类型都相等）才为true大于运算符= 大于等于运算符位运算符运算符 函数 示例 运算规则var num1=eval(str); /eval()函数将“5+4“作为javascript 指令计算字符串表达式。变量 num1 的值1.2.6 常用语句javascript 的常用语句包括分支语句和循环语句。分支语句if 语句语法：if (条件) 条件成立时执行代码案例：var d=new Date();var time=d.getHours();if (time早上好！“);ifelse 语句语法：if (条件)条件成立时执行此代码else条件不成立时执行此代码案例：var d = new Date();var time = d.getHours();if (time If.else if.else 语句语法：if (条件 1)条件 1 成立时执行代码else if (条件 2)/隐含前面条件的反条件条件 2 成立时执行代码else条件 1 和条件 2 均不成立时执行代码案例：var d = new Date();var time = d.getHours();if (time早上好！“);else if (time10 elsedocument.write(“下午好!“);Switch 语句语法：switch(n)case 1:执行代码块 1breakcase 2:执行代码块 2breakdefault:如果 n 即不是 1 也不是 2，则执行此代码执行原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。案例：var d=new Date();theDay=d.getDay();switch (theDay)case 5:document.write(“Finally Friday“);break;case 6:document.write(“Super Saturday“);break;case 0:document.write(“Sleepy Sunday“);break;default:document.write(“Im looking forward to this weekend!“);循环语句javascript 提供如下几种循环语句：while 语句语法：while(条件)循环主体案例：输出 1 到 5var i = 0 ;while (i “) ;i+ ; dowhile 语句语法：do循环主体while(条件)案例：输出 1 到 5i = 0 ;do document.write( i + “) ;i+ ; while (i for 语句语法：for(表达式 1;表达式 2;表达式 3)循环主体;分析：第一次循环执行顺序：表达式 1、表达式 2；以后每次执行循环顺序：表达式 3、表达式 2。如果表达式 2 为真，执行循环主体，否则退出循环。做循环语句的时候，掌握一定的方法，分为如下的三步：第一步：分析出循环变量。第二步：分析出循环变量的范围。第三步：分析出循环主体及与循环变量的关系。案例：输出 1 到 5for (i = 0; i “) forin 语句语法：for(变量 in 集合)循环主体案例：var x ;/这样定义数组也可以 var mycars=“宝马”,” 奔驰”,” 宾利”;var mycars = new Array() ;mycars0 = “宝马“ ;mycars1 = “奔驰“ ;mycars2 = “宾利“ ;for (x in mycars) document.write(mycarsx + “) ; 扩展：在循环语句中使用 break 和 continue 语句。continue 语句为结束本次循环继续下一次循环。break 语句为结束这个循环语句。案例：for (i = 0; i “) 运行结果为：数字是 0数字是 2数字是 4数字是 61.2.7 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。定义函数的语法格式：function 函数名()函数主体分析：定义函数的关键字为 function，函数名要符合命名规则，函数名后要跟一对括号。带参数的函数语法格式为：function 函数名(参数 1,参数 2，)函数主体分析：函数的参数之间用逗号(，)隔开。有返回值的函数语法格式：function 函数名()var x=5;return x;分析：使用 return 返回函数的值。案例：输出两个数字的乘积(见案例源码 1-4)function cj(x,y)/定义了 cj 函数return x*y;var kk=cj(5,6);/调用了 cj 函数,变量 kk 为全局变量。document.write(kk);1.3 javascript 对象对象是带有属性和方法的特殊数据类型（属性称为变量，方法称为函数） 。访问对象的属性语法为：对象属性。访问对象的方法语法为：对象方法()。对象的知识在后面的学习中慢慢接触，在这里就不作详细说明了。第二章 jquery 基础2.1 jquery 的基本概念jquery 是一个 javascript 框架，其主要思想是，通过选择器查找到对应的节点，然后对这个节点进行封装(封装成一个 jquery 对象)。通过调用 jquery 对象的属性或者方法来实现对节点的操作。这样做的好处是：第一，将不同的浏览器之间的差异屏蔽起来了。第二，代码更加简洁，维护方便。2.1.1 jquery 步骤使用选择器查找节点，并把节点转换成对象。调用 jquery 对象的属性和方法。2.1.2 jquery 对象与 dom 节点转换关系dom 节点转换成 jquery 对象调用$()函数，比如$(obj);jquery 对象转换成 dom 节点方式一: jquery 对象.get(0)方式二: jquery 对象.get()02.2 选择器jquery 模仿 css 选择器语法，创建的一套用于查找节点的规则。2.2.1 基本选择器选择表达式 说明 举例#id 根据给定的 ID 匹配一个元素用# $(“#testDiv2“) 获取 ID 为 testDiv2 的元素.class根据给定的类匹配元素(也就是取class 的值)用.$(“.myDiv“) 获取 class 为 myDiv 的一组元素element根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)$(“div“) 获取所有的 div 元素selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开$(“#testDiv2,p“) $(“p,span,div.myDiv“) 获取所有的 p,span 和 class 为myDiv 的元素* 选择所有的元素 $(“*“)案例代码根据元素名称选择 $(“#ID“).val();$ (“a“).text();$ (“.classname“).val();2.2.2 层叠选择器案例代码12/得到 div 中的 a 标签内容 结果为 12$ (“#divTest a“).text();/输出 div 直接子节点 结果为投资$ (“#divTestinput“).val();/输出 id 为 next 的后一个同级别元素 结果为担当$ (“#next+input“).val();/同上，并且是有 title 的元素 结果为学习$ (“#nexttitle“).val();选择表达式 说明 举例前元素 后元素在前元素的子孙里筛选出后元素$(“div span”)从 div 的子孙里筛选出所有 span 元素前元素 后元素在前元素的儿子里筛选出后元素$(“divspan”)从 div 的儿子里筛选出所有 span 元素前元素+ 后元素选取前元素的直接下一个后元素兄弟$(“.one+div”)选取 class 为 one 的直接下一个兄弟元素前元素 后元素从前元素的后面兄弟里筛选出后元素$(“#twodiv”)选取 Id 为 two 的元素后面的所有兄弟元素。2.2.3 过滤选择器基本过滤选择器(见案例代码 2-3.htm)选择表达式 说明 举例:first 匹配找到的第一个元素 $(“div:first“):last 匹配找到的最后一个元素 $(“div:last“):eq(index) 匹配一个给定索引值的元素,当然要存在才可以找得到,索引从 0 开始$(“div:eq(1)“):gt(index) 匹配所有大于给定索引值的元素$(“div:gt(0)“) 查找第 1 个以后的元素:lt(index) 匹配所有小于给定索引值的元素$(“div:lt(2)“) 查找第一行和第二行的元素:even 匹配所有索引值为偶数的元素，从 0 开始计数$(“div:even“) 查找第 1,3,5 个 div:odd 匹配所有索引值为奇数的元素，从 0 开始计数$(“div:odd“) 查找第 2,4 个 div:not(selector) 去除所有与给定选择器匹配的元素selector 为表达式,可以是属性里面的一个值$(“input:not(:checked)“) 查找所有未选中的 input 元素注 :checked为自定义筛选选择器,后面会讲到:header 匹配如 h1, h2, h3 之类的标题元素$(“:header“).css(“background“, “#EEE“); 添加样式:animated 匹配所有正在执行动画效果的元素 暂无例子案例代码投资 理财 成熟 担当 /第一个 li 内容 结果为投资$ (“li:first“).text();/最后一个 li 内容 结果为担当$ (“li:last“).text();/input 未被选中的值 结果为不学习$ (“li input:not(:checked)“).val();/索引为偶数的 li 结果为投资 成熟$ (“li:even“).text();/索引为奇数的 li 结果为理财 担当$ (“li:odd“).text();/索引大于 2 的 li 的内容 结果为担当$ (“li:gt(2)“).text();/索引小于 1 的 li 的内容 结果为投资$ (“li:lt(1)“).text();内容过滤选择器选择表达式 说明 举例:contains(text) 匹配包含给定文本的元素,只要里面出现即可$(“p:contains(段落)“) 找带有段落字样的 p 元素:empty 匹配所有不包含子元素或者文本的空元素 $(“div:empty“):has(selector) 匹配含有选择器所匹配的元素的元素 $(“div:has(p)“):parent 匹配含有子元素或者文本的元素 $(“div:parent“)案例代码hyip 投资hyip理财 投资/包含 hyip 的 li 的内容 结果为 hyip 投资 hyip$ (“li:contains(hyip)“).text();/内容为空的 li 的后一个 li 内容 结果为理财$ (“li:empty+li“).text();/包含 a 标签的 li 的内容 结果为投资$ (“li:has(a)“).text();可见性过滤选择器选择器 说明 举例:hidden匹配所有的不可见元素，input 元素的 type 属性为 “hidden“ 的话也会被匹配到$(“div:hidden“) :visible 匹配所有的可见元素$(“div:visible“)/元素来匹配$(“.divH:visible“)/根据 class 来匹配 案例代码可见不可见/不可见的 li 的内容 结果为不可见$ (“li:hidden“).text();/可见的 li 的内容 结果为可见$ (“li:visible“).text();属性过滤选择器名称 说明 举例attribute 匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素: $(“divid“)attribute=value 匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:$(“inputname=newsletter“).attr(“checked“, true);attribute!=value 匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素: $(“inputname!=newsletter“).attr(“checked“, true);attribute=value 匹配给定的属性是以某些值开始的元素$(“inputname=news“)attribute$=value 匹配给定的属性是以某些值结尾的元素查找所有 name 以 letter 结尾的 input 元素: $(“inputname$=letter“)attribute*=value 匹配给定的属性是以包含某些值的元素查找所有 name 包含 man 的 input 元素: $(“inputname*=man“)attribute1attributeN 复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: $(“inputidname$=man“)案例代码/name 为 hyipinvest 的值 结果为 hyip 投资alert($(“inputname=hyipinvest“).val();/name 以 hyip 开始的值 结果为 hyip 投资alert($ (“inputname=hyip“).val();/name 以 hyip 结束的值 结果为投资 hyipalert($ (“inputname$=hyip“).val();/name 包含 oo 的值 结果为 HYIPalert($ (“inputname*=oo“).val();子元素过滤选择器名称 说明 举例:nth-child(index/even/odd/equation) 匹配其父元素下的第N 个子或奇偶元素:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从 1 开始的，而:eq()是从 0 算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)在每个 ul 查找第 2 个 li: $(“ul li:nth-child(2)“):first-child 匹配第一个子元素:first 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找第一个 li: $(“ul li:first-child“):last-child 匹配最后一个子元素:last只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找最后一个 li: $(“ul li:last-child“):only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。在 ul 中查找是唯一子元素的 li: $(“ul li:only-child“)案例代码表单对象属性过滤选择器名称 说明 解释:input 匹配所有 input, textarea, select 和 button 元素查找所有的 input 元素: $(“:input“):text 匹配所有的文本框 查找所有文本框: $(“:text“):password 匹配所有密码框 查找所有密码框: $(“:password“):radio 匹配所有单选按钮 查找所有单选按钮:checkbox 匹配所有复选框 查找所有复选框: $(“:checkbox“):submit 匹配所有提交按钮 查找所有提交按钮: $(“:submit“):image 匹配所有图像域 匹配所有图像域: $(“:image“):reset 匹配所有重置按钮 查找所有重置按钮: $(“:reset“):button 匹配所有按钮 查找所有按钮: $(“:button“):file 匹配所有文件域 查找所有文件域: $(“:file“):enabled 匹配所有可用元素 查找所有可用的 input 元素: $(“input:enabled“):disabled 匹配所有不可用元素 查找所有不可用的 input 元素: $(“input:disabled“):checked 匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option)查找所有选中的复选框元素: $(“input:checked“):selected 匹配所有选中的 option 元素 查找所有选中的选项元素: $(“select option:selected“)第三章 jquery 操作 dom 对象dom 全称是 document object model(文档对象模型)，每个 html 元素都可以转换为一个 dom 对象，而每个 dom 对象都有一组属性，通过这些属性可以设置 html 的外观和特性。addClass() 向匹配的元素添加指定的类名。after() 在匹配的元素之后插入内容。append() 向匹配的元素内部追加内容。appendTo() 向匹配的元素内部追加内容。attr() 设置或返回匹配元素的属性和值。before() 在每个匹配的元素之前插入内容。clone() 创建匹配元素集合的副本。detach() 从 DOM 中移除匹配元素集合。empty() 删除匹配的元素集合中所有的子节点。hasClass() 检查匹配的元素是否拥有指定的类。html() 设置或返回匹配的元素集合中的 HTML 内容。insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。prepend() 向每个匹配的元素内部前置内容。prependTo() 向每个匹配的元素内部前置内容。remove() 移除所有匹配的元素。removeAttr() 从所有匹配的元素中移除指定的属性。removeClass() 从所有匹配的元素中删除全部或者指定的类。replaceAll() 用匹配的元素替换所有匹配到的元素。replaceWith() 用新内容替换匹配的元素。text() 设置或返回匹配元素的内容。toggleClass() 从匹配的元素中添加或删除一个类。unwrap() 移除并替换指定元素的父元素。val() 设置或返回匹配元素的值。wrap() 把匹配的元素用指定的内容或元素包裹起来。wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。3.1 遍历元素通过选择器，我们可能得到元素数组，需要遍历每个元素，并进行相应的操作。3.1.1 获得元素数组的项选择器.get(索引) 说明：索引从 0 开始的整数， 0 表示第一个元素， 1 表示第二个元素，后类推。案例源码（3-1.htm）