项目一javascript程序设计1_第1页
项目一javascript程序设计1_第2页
项目一javascript程序设计1_第3页
项目一javascript程序设计1_第4页
项目一javascript程序设计1_第5页
已阅读5页，还剩30页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

2、 jquery对象与dom节点转换关系182.2 选择器18基本选择器18层叠选择器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将新元素添加至对象上33内部插入333.5.2 外部插入34包裹34替换34删除35复制35第四章jquery的表单编程36第一章javascript程序设计h

3、tml代码所表示的文档是一种静态文档，几乎没有交互功能，很难使页面成为动态页面。增加脚本语言，可使数据发送到服务器之前先进行处理和校验，动态地创建新的Web内容，更重要的是，引入脚本语言使我们有了事件驱动的软件开发环境。 javascript就是一种脚本语言。1.1了解javascript脚本语言要想学好javascript技术，必先了解javascript的概念。 javascript简介javaScript的原名叫LiveScript，是NetScape公司在引入Sun公司有关Java的程序设计概念后，重新设计而更名的。JavaScript是一种可以嵌入HTML文档的，基于对象并

4、具有某些面向对象特征的脚本语言。 说明：浏览器端脚本语言除了JavaScript，还有VBScript和Jscript，后两个是Microsoft公司设计的，欲了解相关内容，可到Microsoft公司网站查询。本教材只介绍JavaScript。 javascript的特点javaScript是一种基于对象(Object-Based)和事件驱动(Event Driven)，由浏览器解释执行的，具有安全性能的客户端脚本语言。使用它的目的是与HTML、Java Applet（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通

5、过嵌入在HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：  是一种脚本语言 ：采用小程序段的方式实现编程，以嵌入的方式，与HTML标识结合在一起，方便用户的使用操作。  基于对象的语言：这里的对象，是指客户机、浏览器、网页文档。也就是说，JavaScript以类似C、Java的语法，以客户机、浏览器、网页文档、文档内部各种以标记表示的HTML元素为对象，以控制这些对象为目标，进而控制整个客户端的一种客户端脚本编程语言。  简单 ：首先它是一种基于Java基本语句和控制流之上的简单而

6、紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。  安全 ：正常情况下，它不允许访问服务器本地的硬盘，因此不能将数据存入到服务器上；不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 动态 ：它可以直接对用户的输入做出响应，无须经过Web服务程序。它对用户的响应，是采用以事件驱动的方式进行的。事件(Event)可分为两类，一是用户对浏览器进行的某种操作，比如按下鼠标、移动窗口、选择菜单等，可以视为用户事件；二是系统事件，如时间的时刻变化等。当事件发生后，会向浏

7、览器发送相应的消息（用户消息或系统消息），根据消息，浏览器可能会做出相应的响应，这种响应称为事件驱动，也叫消息驱动。  跨平台 ：JavaScript代码由浏览器解释执行，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行，从而实现了“编写一次，走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。 JavaScript 和 Java 很类似，但并不一样。Java 是一种比JavaScr

8、ipt 更复杂许多的程序语言，而 JavaScript 则是相当容易了解的语言。许多 Java 的特性在 Java Script 中并不支持。 JavaScript的工作原理 javaScript编程可以完成诸如构造动画，动态菜单等使页面更加生动、活泼的任务，还可以对客户机文件系统、注册表等进行操作，如对文件夹、文件的建立，复制，删除，修改注册表，锁定注册表，锁定浏览器等等，有许多随着网页打开而运行的病毒就是含在网页中的javaScript程序在作怪。由此可见，javaScript是控制客户机的精灵。 在B/S程序中，为了均衡负载，减轻服务器的计算负担，凡是不需要

9、服务器程序做的工作，可尽量交给客户端程序（如javaScript程序）去做。我们用HTML标记构造出用户界面，用户通过界面输入数据，向浏览器请求数据等操作。在用户输入数据，或者是输入完毕，将数据向服务器提交的时候，对数据的检验等任务完全可交给JavaScript程序来完成。html+javascript的浏览器与服务器的交互原理 简单的javascript程序开发步骤(见1-1案例源码)打开记事本，输入如下的代码<html><head><script language="javascript">function c3() alert(&q

10、uot;第一次学习javascript，我一定会加油！");</script></head><body><input type="button" id="bt" onclick="c3()" value="点击"/></body></html>在记事本中输完以后，打开保存对话框，选择保存路径，文件名命名为”li1.html”，点击保存。打开该html文件，就可以看到运行的效果了。分析：<script language="

11、;javascript"></script>是javascript框架代码，定义函数function c3()alert("第一次学习javascript，我一定会加油！");，在html中，onclick为单击事件，调用c3()函数。扩展知识：javascript程序使用js文件(见1-2案例源码)把上面的javascript程序改为使用js文件，效果一样。js文件:function c3() alert("第一次学习javascript，我一定会加油！");html文件:<html><head>&l

12、t;script src="2-1.js"></script></head><body><input type="button" id="bt" onclick="c3()" value="点击"/></body></html>1.2 javascript语法基础本节介绍javascript基本语法，包括数据类型、变量、注释和运算符等，了解这些基本语法是使用javascript编程的基础。 数据类型类型具体描述unde

13、fined当声明的变量未初始化时，该变量的默认值是 undefinednull空值，如果引用一个没有定义的变量，则返回空值boolean布尔类型，包含true和false；也可以用1和0表示。string字符串类型，由单引号或双引号括起来的字符number数值类型，可以是32位、64位整数或浮点数javascript原始的数据类型 变量变量是内存中命名的存储位置，其主要作用是存取数据，提供存放信息的容器。javascript变量名的命名规则：Ø 第一个字符必须是字母、下划线（_）或美元符号（$）。Ø 其他字符可以是下划线（_）、美元符号（$）、任何字母或数字字符。Ø

14、; 不能使用javascript中的关键字作为变量名。定义变量的方法有两种：Ø 在变量第一次赋值时定义。如name=”name”;alert(name);Ø 使用var关键字定义变量。如var name=”name”,age=23;/定义两个变量用逗号隔开。变量分为局部变量和全局变量：Ø 局部变量是在函数内部定义，作用域为局部变量定义的地方开始到该函数结束而结束。Ø 全局变量是在函数外部定义，作用域为全局变量定义的地方开始到javascript结束而结束。如果在程序中出现相同名的局部变量和全局变量，在函数中局部变量起作用。项目练习（见案例源码1-3）&l

15、t;html><head><script language="javascript"> var x=0;/定义一个全局变量function c3() var x=1;/定义一个局部变量 alert(x);/出现相同的全局变量和局部变量，局部变量起作用。</script></head><body><input type="button" id="bt" onclick="c3()" value="点击"/></bo

16、dy></html>运行效果为:扩展知识：使用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()表示在网页上输出括号中的数据。 注释注释部分不参与程序运行，只起到对代码的解释作用。/是单行注释，从”/”开始到行尾均

17、表示注释。/*/是多行注释，从”/*”开始到”*/”结束。见如下的代码：var temp;document.write(typeof temp);/输出”undefined”。temp=”hello”;document.write(typeof temp);/*给temp赋值为字符串”hello”，就知道temp为字符串变量了，输出typeof temp的类型为String*/。 运算符运算符可以指定变量和值的运算符操作，是构成表达式的重要元素。优先级 运算符 描述结合性由高到低排序()括号从左到右+ -递增或递减从右到左!逻辑非从右到左*   

18、;/   %乘法、除法、取模从左到右+   -加法、减法从左到右+拼接从左到右<     <=小于、小于等于从左到右>     >=大于、大于等于从左到右= =     !=等于、不等于从左到右= = =     != =等同（类型相同）、不等同从左到右&按位与从左到右|按位或 按位异或 

19、;按位非 <<按位左移 >>按位右移 >>>按位右移，左边以0填充 &&逻辑与从左到右| |逻辑或从左到右?:三元条件表达式从右到左=  +=  -=  *=  %=  <<=  >>=赋值从右到左一元运算符位运算符具体描述delete删除对以前定义的对象属性或方法的引用。例如：var o = new Object; / 创建Object对象odelete

20、 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

21、(iNum+);/输出 "10"document.write(+iNum);/输出 "12"-减量运算符。它与增量运算符的意义相反，可以出现在操作数的前面（此时叫做前减量运算符），也可以出现在操作数的后面（此时叫做后减量运算符）。-运算符对操作数减1.，如果是前减量运算符，则返回减1后的结果；如果是后减量运算符，则返回操作数的原值，再对操作数执行减1操作。例如：var iNum = 10;document.write(iNum-);/输出 "10"document.write(-iNum);/输出 "8"+一元加法

22、运算符，可以理解为正号。它把字符串转换成数字。例如：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

23、;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

24、%= 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，则返回

25、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< 小于运算符> 大于运算符<=小于等于运算符>=大于等于运算符位运算符运算符函数示例运算规则&位与x & y如果两个相应位都为1则该位返回1|位或x

26、 | y如果两个相应位有一个为1则返回1位异或x y如果两个相应位只有一个为1则返回1位非x将运算符按位取反，将1变0，0变1<<左移x << y将二进制数x向左移y位，右边补0>>右移x >> y将二进制数x向右移y位，移出位丢弃，左边以符号为填充>>>右移补零x >>> b将二进制数x向右移y位，移出位丢弃，左边以0填充逻辑运算符逻辑运算符具 体 描 述&&逻辑与运算符。例如a && b，当a和b都为True时等于True；否则等于False|逻辑或运算符。例如a | b，当

27、a和b至少有一个为True时等于True；否则等于False!逻辑非运算符。例如!a，当a等于True时，表达式等于False；否则等于True条件运算符格式：条件表达式？表达式：表达式    示例：x ? y : z   如果x为真，表达式的值为y，否则表达式的值变为z    big = (x > y) ? x : y   如果x大于y，则将x赋给变量big，否则将y赋给变量big数据类型转换String()  转换为字符串类型Number()  转换为数字类型Boolean()  转换为布尔类型

28、 例如： var result = Number(num1)+Number(num2) /将num1和num2转为为数字类型后相加后的值赋给result parseInt：将字符串转换为整数。从字符串的开头开始解析，在第一个非整数的位置停止解析，并返回前面读到所有的整数。如果字符串不是以整数开头的，将返回NaN。如：parseInt（“150 hi”）返回的值是：150，parseInt("hi")返回的值是：NaN。 parseFloat：将字符串转换为浮点数。 从字符串的开头开始解析，在第一个非整数的位置停止解析，并返回前面读到所有的整数。

29、如果字符串不是以整数开头的，将返回NaN。如：parseFloat("15.5 hi") 返回的值是：15.5，parseFloat("hi 15.5")返回的值是：NaN。 eval：将字符串作为javascript表达式进行计算，并返回执行结果，如果没有结果则返回undefined。例如：var str="5+4" var num1=eval(str); /eval()函数将"5+4"作为javascript指令计算字符串表达式。变量num1的值 常用语句javascript的常用语句包括分支语句和循

30、环语句。分支语句if语句语法：if (条件)   条件成立时执行代码案例：<script type="text/javascript">var d=new Date();var time=d.getHours();if (time<10) document.write("<b>早上好！</b>");</script>if.else语句语法：if (条件)条件成立时执行此代码else条件不成立时执行此代码案例：<script type="

31、text/javascript">var d = new Date();var time = d.getHours();if (time < 10) document.write("早上好!")；elsedocument.write("中午好或者下午好!")；</script>If.else if.else 语句语法：if (条件1)条件1成立时执行代码else if (条件2)/隐含前面条件的反条件条件2成立时执行代码else条件1和条件2均不成立时执行代码案例：<script type=&q

32、uot;text/javascript">var d = new Date();var time = d.getHours();if (time<10)document.write("<b>早上好！</b>");else if (time>10 && time<16)document.write("<b>中午好</b>");elsedocument.write("<b>下午好!</b>");</script&

33、gt;Switch 语句语法：switch(n)      case 1:     执行代码块 1     break   case 2:     执行代码块 2     break   default:     如果n即不是1也不是2，则执行此代码 

34、0; 执行原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。案例：<script type="text/javascript">var d=new Date();theDay=d.getDay();switch (theDay) case 5: document.write("Finally Friday"); break; case 6: document.write(

35、"Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!");</script>循环语句javascript提供如下几种循环语句：while语句语法：while(条件) 循环主体案例：输出1到5<script type="text/javascript"> var i =

36、0 ;while (i <= 5) document.write("数字是 " + i) ;document.write("<br>") ;i+ ; </script>dowhile语句语法：do 循环主体while(条件)案例：输出1到5<script type="text/javascript"> i = 0 ;do document.write( i + "<br>") ;i+ ; while (i <= 5) </script>for语

37、句语法：for(表达式1;表达式2;表达式3) 循环主体;分析：第一次循环执行顺序：表达式1、表达式2；以后每次执行循环顺序：表达式3、表达式2。如果表达式2为真，执行循环主体，否则退出循环。做循环语句的时候，掌握一定的方法，分为如下的三步：第一步：分析出循环变量。第二步：分析出循环变量的范围。第三步：分析出循环主体及与循环变量的关系。案例：输出1到5<script type="text/javascript"> for (i = 0; i <= 5; i+) document.write("数字是 " + i) document.wr

38、ite("<br>") </script>forin语句语法：for(变量 in 集合) 循环主体案例：<script type="text/javascript"> var x ;/这样定义数组也可以var mycars=“宝马”,” 奔驰”,” 宾利”;var mycars = new Array() ;mycars0 = "宝马" ;mycars1 = "奔驰" ;mycars2 = "宾利" ;for (x in mycars) document.wr

39、ite(mycarsx + "<br>") ; </script>扩展：在循环语句中使用break和continue语句。continue语句为结束本次循环继续下一次循环。break语句为结束这个循环语句。案例：<script type="text/javascript"> for (i = 0; i <= 10; i+) if(i%2!=0) continue; if(i=8) break;document.write("数字是 " + i) document.write("<

40、;br>") </script>运行结果为：数字是 0数字是 2数字是 4数字是 6 函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。定义函数的语法格式：function 函数名() 函数主体分析：定义函数的关键字为function，函数名要符合命名规则，函数名后要跟一对括号。带参数的函数语法格式为：function 函数名(参数1,参数2，) 函数主体分析：函数的参数之间用逗号(，)隔开。有返回值的函数语法格式：function 函数名() var x=5; return x;分析：使用return返回函数的值。案例：输出两个数字的乘积(见案例源码

41、1-4)<html><head><script type="text/javascript"> function cj(x,y)/定义了cj函数 return x*y; var kk=cj(5,6);/调用了cj函数,变量kk为全局变量。 document.write(kk);</script></head></html>1.3 javascript对象对象是带有属性和方法的特殊数据类型（属性称为变量，方法称为函数）。访问对象的属性语法为：对象属性。访问对象的方法语法为：对象方法()。对象的知识在后面的

42、学习中慢慢接触，在这里就不作详细说明了。第二章jquery基础2.1 jquery的基本概念jquery是一个javascript框架，其主要思想是，通过选择器查找到对应的节点，然后对这个节点进行封装(封装成一个jquery对象)。通过调用jquery对象的属性或者方法来实现对节点的操作。这样做的好处是：第一，将不同的浏览器之间的差异屏蔽起来了。第二，代码更加简洁，维护方便。 jquery步骤使用选择器查找节点，并把节点转换成对象。调用jquery对象的属性和方法。 jquery对象与dom节点转换关系dom节点转换成jquery对象调用$()函数，比如$(obj);jquery对象转换成do

43、m节点方式一:  jquery对象.get(0)方式二: jquery对象.get()02.2 选择器jquery模仿css选择器语法，创建的一套用于查找节点的规则。基本选择器选择表达式说明举例#id根据给定的ID匹配一个元素用#$("#testDiv2")  获取ID为testDiv2的元素.class根据给定的类匹配元素(也就是取class的值)用.$(".myDiv")    获取class为myDiv的一组元素element根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,di

44、v等)$("div")    获取所有的div元素selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开$("#testDiv2,p") $("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素*选择所有的元素$("*")案例代码<input type="text" id="ID" value="

45、;根据ID选择" /><a>根据元素名称选择</a><input type="text" class="classname" value="根据元素css类名选择" />$("#ID").val();$("a").text();$(".classname").val();层叠选择器选择表达式说明举例前元素 后元素在前元素的子孙里筛选出后元素$(“div span”)从div的子孙里筛选出所有span元素前元素>后元素在

46、前元素的儿子里筛选出后元素$(“div>span”)从div的儿子里筛选出所有span元素前元素+后元素选取前元素的直接下一个后元素兄弟$(“.one+div”)选取class为one的直接下一个<div>兄弟元素前元素后元素从前元素的后面兄弟里筛选出后元素$(“#twodiv”)选取Id为two的元素后面的所有<div>兄弟元素。案例代码<div id="divTest">        <input type="text" value

47、="投资" />        <input id="next" type="text" />        <input type="text"  value="担当" />        <input type="text&quo

48、t; title="学习" value="学习" />        <a>1</a>        <a>2</a></div>/得到div中的a标签内容 结果为12$("#divTest a").text();/输出div直接子节点 结果为投资$("#divTest>input").val();/输出i

49、d为next的后一个同级别元素 结果为担当$("#next+input").val();/同上，并且是有title的元素 结果为学习$("#nexttitle").val();2.2.3 过滤选择器基本过滤选择器(见案例代码2-3.htm)选择表达式说明举例:first匹配找到的第一个元素$("div:first"):last匹配找到的最后一个元素$("div:last"):eq(index)匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始$("div:eq(1)"):gt(ind

50、ex)匹配所有大于给定索引值的元素$("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)去除所有与给定选择

51、器匹配的元素selector为表达式,可以是属性里面的一个值$("input:not(:checked)") 查找所有未选中的input 元素注 :checked为自定义筛选选择器,后面会讲到:header匹配如 h1, h2, h3之类的标题元素$(":header").css("background", "#EEE"); 添加样式:animated匹配所有正在执行动画效果的元素暂无例子案例代码<div id="divTest">    <ul&

52、gt;        <li>投资</li>        <li>理财</li>        <li>成熟</li>        <li>担当</li>     

53、60;  <input type="radio" value="学习" checked="checked" />        <input type="radio" value="不学习" />    </ul></div>/第一个li内容 结果为投资$("li:first").text();/最后一个li内容 结果为

54、担当$("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();内容过滤选择器选择表达式

55、说明举例:contains(text)匹配包含给定文本的元素,只要里面出现即可$("p:contains('段落')") 找带有段落字样的p元素:empty匹配所有不包含子元素或者文本的空元素$("div:empty"):has(selector)匹配含有选择器所匹配的元素的元素$("div:has('p')"):parent匹配含有子元素或者文本的元素$("div:parent")案例代码<div id="Test">  

56、0; <ul>        <li>hyip投资</li>        <li>hyip</li>        <li></li>        <li>理财</li>   &

57、#160;    <li><a>投资</a></li>    </ul></div>   /包含hyip的li的内容 结果为hyip投资 hyip$("li:contains('hyip')").text();/内容为空的li的后一个li内容 结果为理财$("li:empty+li").text();/包含a标签的li的内容 结果为投资$("li:has(a)"

58、;).text();可见性过滤选择器选择器说明举例:hidden匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到$("div:hidden") :visible匹配所有的可见元素$("div:visible")/元素来匹配$(".divH:visible")/根据class来匹配 案例代码<ul>    <li>可见</li>    <li style="di

59、splay:none;">不可见</li></ul>/不可见的li的内容 结果为不可见$("li:hidden").text();/可见的li的内容 结果为可见$("li:visible").text();属性过滤选择器名称说明举例attribute匹配包含给定属性的元素查找所有含有 id 属性的 div 元素: $("divid")attribute=value匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:$("in

60、putname='newsletter'").attr("checked", true);attribute!=value匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素: $("inputname!='newsletter'").attr("checked", true);attribute=value匹配给定的属性是以某些值开始的元素$("inputname='news'")attr

61、ibute$=value匹配给定的属性是以某些值结尾的元素查找所有 name 以 'letter' 结尾的 input 元素: $("inputname$='letter'")attribute*=value匹配给定的属性是以包含某些值的元素查找所有 name 包含 'man' 的 input 元素: $("inputname*='man'")attribute1attributeN复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name

62、属性是以 man 结尾的: $("inputidname$='man'")案例代码<input type="text" name="hyipinvest" value="hyip投资" /><input type="text" name="investhyip" value="投资hyip" /><input type="text" name="google"

63、value="HYIP" />/name为hyipinvest的值 结果为hyip投资alert($("inputname='hyipinvest'").val();/name以hyip开始的值 结果为hyip投资alert($("inputname='hyip'").val();/name以hyip结束的值 结果为投资hyipalert($("inputname$='hyip'").val();/name包含oo的值 结果为HYIPalert($("

64、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-chi

65、ld(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")

66、:only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。在 ul 中查找是唯一子元素的 li: $("ul li:only-child")案例代码表单对象属性过滤选择器名称说明解释:input匹配所有 input, textarea, select 和 button 元素查找所有的input元素: $(":input"):text匹配所有的文本框查找所有文本框: $(":text"):password匹配所有密码框查找所有密码框: $(":password"):radio匹配所有单选按钮查

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论