第五章：Web服务器

Posted 2023-04-21

参考技术A 5.1各种形状和尺寸的Web服务器
Web服务器会对HTTP请求进行处理并提供响应。术语“Web服务器”可以用来表示Web服务器的软件，也可以用来表示提供Web页面的特定设备或计算机。
Web服务器有着不同的风格、形状和尺寸。有普通的10行Perl脚本的Web服务器、50MB的安全商用引擎以及极小的卡上服务器。但不管功能有何差异，所有的 Web服务器都能够接收请求资源的 HTTP请求，将内容回送给客户端（参见图1-5)。
5.1.1Web服务器的实现
Web服务器实现了HTTP和相关的TCP连接处理。负责管理Web服务器提供的资源,以及对Web服务器的配置、控制及扩展方面的管理。
Web服务器逻辑实现了HTTP 协议、管理着Web资源，并负责提供Web服务器的管理功能。Web服务器逻辑和操作系统共同负责管理TCP连接。底层操作系统负责管理底层计算机系统的硬件细节，并提供了TCP/IP网络支持、负责装载Web资源的文件系统以及控制当前计算活动的进程管理功能。

5.3实际的Web服务器会做些什么
例5-1显示的 Perl服务器是一个Web服务器的小例子。最先进的商用Web服务器要比它复杂得多，但它们确实执行了几项同样的任务，如图5-3所示。
(1)建立连接一—接受一个客户端连接，或者如果不希望与这个客户端建立连接，就
将其关闭。
(2)接收请求——从网络中读取一条HTTP请求报文。(3)处理请求——对请求报文进行解释，并采取行动。(4)访问资源-———访问报文中指定的资源。
(5)构建响应——创建带有正确首部的 HTTP响应报文。(6)发送响应——将响应回送给客户端。
(7)记录事务处理过程—-将与已完成事务有关的内容记录在一个日志文件中。

5.4第一步——接受客户端连接
如果客户端已经打开了一条到服务器的持久连接，可以使用那条连接来发送它的请求。否则，客户端需要打开一条新的到服务器的连接（回顾第4章，复习一下HTTP的连接管理技术)。

5.4.1处理新连接
客户端请求一条到Web服务器的TCP连接时，Web服务器会建立连接，判断连接的另一端是哪个客户端，从TCP连接中将IP地址解析出来。'一旦新连接建立起来
并被接受，服务器就会将新连接添加到其现存Web服务器连接列表中，做好监视连接上数据传输的准备。
Web服务器可以随意拒绝或立即关闭任意一条连接。有些Web服务器会因为客户端IP地址或主机名是未认证的，或者因为它是已知的恶意客户端而关闭连接。Web服务器也可以使用其他识别技术。

5.4.2客户端主机名识别
可以用“反向 DNS”对大部分Web服务器进行配置，以便将客户端IP地址转换成客户端主机名。Web服务器可以将客户端主机名用于详细的访问控制和日志记录。但要注意的是，主机名查找可能会花费很长时间，这样会降低Web事务处理的速度。很多大容量Web服务器要么会禁止主机名解析，要么只允许对特定内容进行解析。
可以用配置指令HostnameLookups启用Apache的主机查找功能。比如，例5-2中的Apache配置指令就只打开了html和CGI资源的主机名解析功能。
例5-2配置Apache,为 HTML和CGI资源查找主机名
HostnameLookups off
<Files ~" - 《html |htmlcgi)$">
HostnameLookups on
</Files>

5.5第二步—接收请求报文
连接上有数据到达时，Web服务器会从网络连接中读取数据，并将请求报文中的内容解析出来（参见图5-5)。
解析请求报文时，Web服务器会:
·解析请求行，查找请求方法、指定的资源标识符（URI)以及版本号，3各项之
间由一个空格分隔，并以一个回车换行(CRLF)序列作为行的结束,“
·读取以CRLF结尾的报文首部;
检测到以CRLF结尾的、标识首部结束的空行（如果有的话)﹔
·如果有的话（长度由content-Length首部指定)，读取请求主体。

解析请求报文时，Web服务器会不定期地从网络上接收输入数据。网络连接可能随时都会出现延迟。Web服务器需要从网络中读取数据，将部分报文数据临时存储在内存中,直到收到足以进行解析的数据并理解其意义为止。
5.5.1 报文的内部表示法
有些Web服务器还会用便于进行报文操作的内部数据结构来存储请求报文。比如，数据结构中可能包含有指向请求报文中各个片段的指针及其长度，这样就可以将这些首部存放在一个快速查询表中，以便快速访问特定首部的具体值了（参见图5-6)。

5.5.2连接的输入/输出处理结构
高性能的 Web服务器能够同时支持数千条连接。这些连接使得服务器可以与世界各地的客户端进行通信，每个客户端都向服务器打开了一条或多条连接。某些连接可能在快速地向Web服务器发送请求，而其他一些连接则可能在慢慢发送，或者不经常发送请求,还有一些可能是空闲的，安静地等待着将来可能出现的动作。
因为请求可能会在任意时刻到达，所以Web服务器会不停地观察有无新的Web请求。不同的Web服务器结构会以不同的方式为请求服务，如图5-7所示。
·单线程Web服务器(参见图5-7a)
单线程的Web服务器一次只处理一个请求，直到其完成为止。一个事务处理结束之后，才去处理下一条连接。这种结构易于实现，但在处理过程中，所有其他连接都会被忽略。这样会造成严重的性能问题，只适用于低负荷的服务器，以及type-o-serve这样的诊断工具。
·多进程及多线程Web服务器(参见图5-7b)
多进程和多线程Web服务器用多个进程,或更高效的线程同时对请求进行处理。3可以根据需要创建，或者预先创建一些线程/进程。°有些服务器会为每条连接分配一个线程/进程，但当服务器同时要处理成百、上千，甚至数以万计的连接时，需要的进程或线程数量可能会消耗太多的内存或系统资源。因此，很多多线程Web服务器都会对线程/进程的最大数量进行限制。
·复用I/O的服务器(参见图5-7c)
为了支持大量的连接，很多Web服务器都采用了复用结构。在复用结构中，要同时监视所有连接上的活动。当连接的状态发生变化时（比如，有数据可用，或出现错误时)，就对那条连接进行少量的处理，处理结束之后，将连接返回到开放连接列表中，等待下一次状态变化。只有在有事情可做时才会对连接进行处理,在空闲连接上等待的时候并不会绑定线程和进程。
·复用的多线程Web服务器（参见图5-7d)
有些系统会将多线程和复用功能结合在一起，以利用计算机平台上的多个CPU.多个线程（通常是一个物理处理器）中的每一个都在观察打开的连接(或打开的连接中的一个子集)，并对每条连接执行少量的任务。

5.6第三步———处理请求
一旦Web服务器收到了请求，就可以根据方法、资源、首部和可选的主体部分来对请求进行处理了。
有些方法（比如POST)要求请求报文中必须带有实体主体部分的数据。其他一些方法（比如OPTIONS）允许有请求的主体部分，也允许没有。少数方法（比如GET)禁止在请求报文中包含实体的主体数据。
这里我们并不对请求的具体处理方式进行讨论，因为本书其余大多数章节都在讨论这个问题。

5.7第四步——-对资源的映射及访问
Web 服务器是资源服务器。它们负责发送预先创建好的内容，比如HTML页面或JPEG 图片，以及运行在服务器上的资源生成程序所产生的动态内容。

5.7.1 docroot
Web服务器支持各种不同类型的资源映射，但最简单的资源映射形式就是用请求URI作为名字来访问Web服务器文件系统中的文件。通常，Web服务器的文件系统中会有一个特殊的文件夹专门用于存放Web内容。这个文件夹被称为文档的根目录(document root，或docroot)。Web服务器从请求报文中获取URI，并将其附加在文档根目录的后面。
在图5-8中，有一条对/specials/saw-blade.gif 的请求到达。这个例子中Web服务器的文档根目录为/us/local/httpd/files。Web服务器会返回文件/usr/local/httpd/files/specials/saw-blade.gif。

在配置文件httpd.conf中添加一个 DocumentRoot行就可以为Apache Web服务器设置文档的根目录了:
DocumentRoot /usr/ local/httpd/files
服务器要注意，不能让相对URL退到docroot之外，将文件系统的其余部分暴露出来。比如，大多数成熟的Web服务器都不允许这样的URI看到Joe的五金商店文档根目录上一级的文件:
http://www.joes-hardware.com/ ..

5.8.3重定向
Web服务器有时会返回重定向响应而不是成功的报文。Web服务器可以将浏览器重定向到其他地方来执行请求。重定向响应由返回码3XX说明。Location响应首部包含了内容的新地址或优选地址的URI。重定向可用于下列情况。
·永久删除的资源
资源可能已经被移动到了新的位置，或者被重新命名，有了一个新的URL。Web服务器可以告诉客户端资源已经被重命名了，这样客户端就可以在从新地址获取资源之前，更新书签之类的信息了。状态码301 Moved Permanently就用于此类重定向。·临时删除的资源
如果资源被临时移走或重命名了，服务器可能希望将客户端重定向到新的位置上去。但由于重命名是临时的，所以服务器希望客户端将来还可以回头去使用老的URL，不要对书签进行更新。状态码303 See Other以及状态码307 TemporaryRedirect就用于此类重定向。

如鹏网 静态Web开发 第五章：JQuery

课前说明

参考书：《锋利的jQuery》

jQuery官网：http://jquery.com

jQuery在线API：http://api.jquery.com http://api.jquery.com/api/ (xml文件。)

jQuery UI：http://jqueryui.com/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

常见的JavaScript框架库

什么是JavaScript框架库？

　　 普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库。

　　 常见的JavaScript框架库 Prototype【‘pr?ut?.taip 】、YUI、Dojo【’dod?o ，豆粥】、ExtJS、jQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，内部都是用JavaScript实现的。

　　jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆JavaScript函数。jQuery是最火的JavaScript库，jQuery的扩展插件也是非常多。

　　　　1.常用JavaScript库：

　　　　　　1>Prototype: 网址：http://www.prototypejs.org

　　　　　　2>Dojo: 网址：http://dojotoolkit.org

　　　　　　3>YUI（The Yahoo! User Interface Libray） 网址：http://developer.yahoo.com/yui

　　　　　　4>Ext JS 网址：http://www.extjs.com

　　　　　　5>MooTool 网址：http://mootools.net 6>jQuery 网址：http://jquery.com

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery简介

什么是jQuery？

　　jQuery就是一个JavaScript函数库，没什么特别的。

jQuery能做什么？jQuery是做什么的？

　　 jQuery本身就是一堆JavaScript函数，JavaScript是做什么的，jQuery也一样。毕竟jQuery只是用JavaScript编写的函数库而已，有些功能jQuery没有封装，则还需要通过自己写JavaScript来实现。

jQuery的特点？

　　　　Write Less,Do More 很好的解决了不同浏览器的兼容问题（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）css还是有问题的

　　　　 对于不同控件具有统一的操作方式。 体积小（几十KB）、使用简单方便（Write Less Do More）

　　　　 链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代 、插件丰富、开源、免费。插件多缺什么找什么。让编写JavaScript程序更简单、更强大！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Query中的顶级对象$

　　jQuery中最常用的对象即$对象，要想使用jQuery的方法必须通过$对象。

　　只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。

　　$是jQuery简写，在代码中可以使用jQuery代替$，但一般为了方便大家都直接使用$。

　　 写注释，后续jQuery代码会越写越多，所以必要的注释一定要写。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

编写简单的jQuery代码

　　通过window.onload实现弹框 通过jQuery的方式实现。

　　$(document).ready(fn); $(fn); 等价于$(document).ready(fn);

　　 window.onload与$(document).ready(fn);的区别

　　　　window.onload需要等待页面完全加载完毕才会触发，即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。

　　　　$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。

　　　　 $(document).ready();可以多次注册事件处理程序，并且最终都会执行，

　　　　而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。

　　　　 使用jQuery实现window.onload的效果：$(window).load(fn);

　　　　jQuery中注册事件是load(fn)而不是onload(fn);与Dom不一样。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery中提供的两个函数

　　　　$.map(array,callback(element,index));

　　　　 对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变。

　　　　 案例1：将一个数组中的元素翻倍，并返回一个新数组。

　　　　 案例：将一个数组中索引大于3的元素的值翻倍，其余值不变，并返回一个新数组。

　　　　 $.each(array,fn)//遍历数组,return false来退出循环。 主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题。 在each函数中可以直接使用this,表示当前元素的值。

　　　　 $.trim(字符串);//去掉两端空格，调试看实现方式。

　　　　 字符串.replace(/^\s+/,’’);

　　　　trimLeft = /^[\s\xA0]+/; trimRight = /[\s\xA0]+$/; IE一些版本不支持\s空格，\xA0也表示空格

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 jQuery对象、Dom对象

　　　　Dom对象如果想调用jQuery的方法必须先转换为jQuery对象。

　　　   Dom对象：文档树中的对象都是dom对象。

　　　　jQuery对象：把Dom对象包装后就得到了jQuery对象。

　　　　如何获取Dom对象？ 如何将Dom对象转换为jQuery对象？

　　　　　　Dom→jQuery $(spObj).get(0).innerHTML $(spObj)[0].innerHTML

　　　　　　如何直接通过jQuery方式获取页面上的元素？（获取后直接就是一个jQuery对象）

　　　　　　 $(‘#id’)、$(‘span’)、$(‘.cls’)、…… 通过jQuery对象即可调用：.text()、val()、html()、css(‘color’,’red’)、……。

　　　　　　jQuery中大多都是方法少有属性，因为属性很难链式编程。

　　　　　　获取值、设置值都是使用的同一个方法，有参数表示设置值，无参数表示取值。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

哪些不需要转Jquery对象

Array（数组）对象有没有对应的jQuery对象？

　　数组本身就不是Dom对象。不存在与jQuery对象之间的转换。

　　使用jQuery语句可以直接使用数组，就像$.each()或$.map();

　　 补充：通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值是一个类似于数组的值，但不是数组，没有数组特有的方法。        　　parseInt()\Array这些是不需要转换的。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery选择器

选择器：用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了css的选择器就会jQuery的选择器了)

jQuery选择器是学习jQuery的基础。

Dom中如何获取页面中的元素对象？

 document.getElementById(‘id’);document.getElementsByTagName(‘input’);

 document.getElementsByName(‘gender’);

jQuery中获取页面中的元素对象

 Id选择器：$(‘#id’);

 标签选择器：$(‘input’)【$(‘*’);选择页面上的所有元素。】

 (*)属性过滤选择器：$(‘*[name=gender]’)或$(‘[name=gender]’)

案例1：设置某个div中显示的内容，通过Id选择器

案例2：为某个按钮注册单击事件，单击的时候设置页面上所有的p标签中显示文字为“我们都是好孩子”。//隐式迭代

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 链式编程

.html(‘v’).text(‘v’);链式编程，隐式迭代。

链式编程注意：$(‘div’).html(‘设置值’).val(‘设置值’);这样可以，但是$(‘div’).html().text()这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

$(‘div.cls’).text(‘我去.’);标签加类选择器

$(‘.cls’).text(‘好帅’);样式选择器

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery选择器

多条件选择器：$(“p,div,span.cls”)，同时选择p标签、div标签和拥有cls样式的span标签元素。

层次选择器：

 （1）后代:$(‘div li‘).css(‘backgroundColor‘, ‘red‘);获取div下的所有li元素（后代，子、子的子……）

 （2）子元素:$(‘div>li‘).css(‘backgroundColor‘, ‘red‘);获取div下的直接li子元素 【必须是直接子元素】

 （3）相邻元素1:$(‘div+span‘).css(‘backgroundColor‘, ‘red‘);//这个元素后紧跟着的第一个元素

 （4）相邻元素2:$(‘div~span‘).css(‘backgroundColor‘, ‘red‘);//这个元素后跟着的所有元素

 $(‘*’);选取所有的元素。

注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

获得兄弟元素的几个方法

next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素（上一个）

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素

案例：页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

案例2：评分案例。

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery的迭代(包装集)

如何判断对象是否存在，jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if ($(“#btn1”).length <= 0) {}判断该元素是否存在

（动态创建元素的时候用。）

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

链式编程|

鼠标进入每个p标签的时候通过样式方式添加高亮显示。

网页开关灯效果。

addClass 添加样式 removeClass 移除样式

toggleClass 切换样式的显示。hasClass 判断是否应用了某样式

链式编程的时候一定要注意在什么时候“破坏”了链，当前对象的传递，如果传递被破坏，则继续链式编程会有意想不到的结果！nextAll(),prevAll(),sibilings()

如何解决：调用end()方法。（返回链 被破坏前的对象。）

$(‘p:lt(2)’)前两个,索引为2之前的

$(‘p:gt(2)’)；表示的是后两个

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

基本过滤选择器

:first 选取第一个元素。$("div:first")选取第一个<div>

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是奇数的<input>

:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素（*）

 

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

案例

第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。

用Dom实现；用jQuery实现。对比差异！

注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基础上再选择0,1,2。

 

案例：点击按钮，表格隔行变色。奇红，偶黄。表格点击行背景色变蓝色，其他行背景色变白。

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素.

 $( “ul”, $(this)).css(“background”, “red”);

案例：修改点击行的所有td的背景色，将当前点击行的td设置为奇数td背景色红色，偶数td背景色蓝色。

 

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

属性、表单过滤器

属性过滤选择器：

$(‘#dv input[name]‘);属性过滤器

$(‘#dv input[name]‘);得到所有有name属性的元素

$(‘#dv input[name=txt1]‘);得到name为txt1的元素

$(‘#dv input[name!=txt1]‘);得到name不为txt1的元素

 还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）

表单对象属性选择器（过滤器）：

 $("#form1 :enabled")选取id为form1的表单内所有启用的元素

 $("#form1 :disabled")选取id为form1的表单内所有禁用的元素

 $(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

 $("select :selected")选取所有选中的选项元素（下拉列表） 

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

元素的each

jQuery元素也可以调用each方法，只是对$.each的简化调用。return false;终止循环.

案例:页面中有多个兴趣爱好,通过复选框设置,选中某个复选框,下面即可显示选中的个数及内容

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

表单选择器

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

$(“:text”)选取所有单行文本框，等价于

$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

其他过滤器

可见性过滤器： :hidden 选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….) 1.表单元素type=“hidden”(表示的是隐藏域) 2.设置css的display:none 3.高度和宽度明确设置为0的元素。 4.父元素时隐藏的，所以子元素也是隐藏的 visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden:visible选取所有可见元素 内容过滤器： :contains(text),过滤出包含给定文本的元素。(innerText中包含。) :empty,过滤出所有不包含子元素或者文本的空元素。 :has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。 :parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

子元素过滤器

:first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。 $(‘ul li:first’);只返回一个li元素。 $(‘ul li:first-child’);//为每个父元素（ul）都返回一个li。 :last-child :only-child,匹配当前父元素中只有一个子元素的元素。 :nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。 :nth-child(index),index从1开始。 :nth-child(even) :nth-child(odd) :nth-child(3n),选取3的倍数的元素 :nth-child(3n+1),满足3的倍数+1的元素。 .children()方法,只考虑子元素，不考虑后代元素。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML： 2、使用text()方法读取或者设置元素的innerText： 3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。 4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

动态创建Dom节点

使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中： $()创建的就是一个jQuery对象，可以完全进行操作 创建radio，使用$(‘<input name=“”/>’);，而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。 append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子) prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子) after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟) before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟) 案例：jQuery动态创建表格。(动态加载网站列表，从json中取数据) 练习：无刷新评论。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

其他追加方法(将自己追加到某元素)

子元素.appendTo(父元素);//主动巴结!到最后一个 子元素.prependTo(父元素);//主动巴结到第一个。 (*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A); (*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X); 效果都一样

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

删除节点

empty(); 清空某元素下的所有子节点 内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。 remove(selector) 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下： 权限选择案例:一个下拉框中的选项放置另一个下拉框选项中 写代码的好习惯，{、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。 如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。注意不同jQuery版本的区别。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

练习

加法计算器。两个文本框中输入数字，点击按钮将相加的结果放到第三个文本框中。 十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr("")setInterval() 案例1：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是focus，焦点离开控件的事件是blur。 案例：选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表。//清除所有事件。.unbind();

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

节点操作

替换节点： $("br").replaceWith("<hr/>"); 用<hr/>替换br $(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。 用<br/>元素替换所有的hr 红色为选择器；蓝色为要替换的内容（动态创建的元素）。 包裹节点 wrap()方法用来将所有元素逐个用指定标签包裹： wrapAll() wrapInner()//在内部围绕

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

样式操作

获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass") 点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为class样式。(使用类样式来做) 练习：聚焦控件的高亮显示。颜色定义为class样式。 $(“body *”)，选择器*表示所有类型的控件。获得焦点的元素背景色为黄色。 练习：搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”，那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）。颜色定义为class样式。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

RadioButton操作

取得RadioButton的选中值，被选中的radio只有一个值，所以直接用val() 显示单选按钮中哪些内容被选中了,注意多个单选按钮不在同一组中 设置RadioButton的选中值：.attr(‘checked’,true); $("input[name=gender]").val(["女"]); 或者 $(":radio[name=gender]").val(["女"]); 注意val中参数的[]不能省略,val()的参数必须是一个数组。

对RadioButton的选择技巧对于CheckBox和Select列表框也适用 除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设定checked属性来单独设置控件的选中状态 $(‘#selOne’).val([‘1’,’2’,’3’]);//同时设置多个下拉菜单选中 $("#btn1").attr("checked",true) 练习：CheckBox的全选、全不选、反选

 

如果使用attr("checked",true)与attr("checked",false)或者removeAttr("true"); 会出现第一次全选可以出 现全选效果，但是第二次点击后就无法实现全选效果。现在改为prop

 $("#checkboxId").prop("checked",true);

 $("#checkboxId").prop("checked",false);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

微博案例

1、点话题按钮，如果文本框为空显示 #输入话题标题# 如果文本框中已经显示的是： #输入话题标题#。“输入话题标题”高亮显示。 2、设置发布按钮的样式 background-position 设置背景图片显示的位置。坐标为0,-195px hover样式解决。注意px问题。 3、用户输入文字时，计算剩余的字数。当字数超过140时，显示#E56C0A色字，并提示用户已经超出多少字。change()事件中注册，每隔10毫秒调用一次change()方法。 4、点击朋友按钮显示朋友列表。 5、点击表情按钮显示表情列表（注意浏览器缓存问题。） 多张图片合并一张，减少了网络访问次数。 IE9和IE6下层的浮动问题。 计算字数

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件

jQuery中的事件绑定： $(“#btn”).bind(“click”,function(){})， 每次都这么调用太麻烦，所以jQuery可以用$("#btn").click(function(){})来进行简化 合成事件hover[‘h?v?]，hover(entern,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。相当于mouseover与mouseout事件的结合。类似于超链接的伪类a:link,a:hover在IE6下只有超链接支持，文本框等并不支持，所以这时就可以考虑使用合成事件hover(fn1,fn2) $(‘#bt‘).toggle(function () {alert(1);}, function () {alert(2);}, function () {alert(3); }, function () {alert(4);});

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件冒泡

事件冒泡：jQuery中也像JavaScript一样是事件冒泡window.event.cancelBubble = true,ie取消 如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e. stopPropagation(); 标准js方式：e.stopPropagation(); IE下：e.cancelBubble = true； $("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

阻止事件

阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和window.event.returnValue=false效果一样。 $(“a”).click(function(e) { alert(“所有超链接暂时全部禁止点击”); e.preventDefault(); });//jQuery中封装的。 （*） jQuery在注册事件的时候如何传递参数？event.data获取参数。 .click({‘k’:1,’v’:2},fn);然后通过evt.data.k或evt.data.v .bind(‘click’,data,fn);//同上

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件其他

jQuery的事件对象：event对象。 属性：pageX、pageY、target获得触发事件的元素(冒泡的起始，和this不一样，相当于window.event.srcElement)、which如果是鼠标事件获得按键（1左键，2中键，3右键），如果是键盘事件keydown则获取的是keyCode。 altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值 移除事件绑定：unbind()方法即可移除元素上所有绑定的事件，如果unbind("click")则只移除click事件的绑定。bind:+=；unbind:-= 一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。 e.type获取当前事件的类型click、mousemove、… $(this).offset()//获取当前元素相对于页面的坐标。 $(this).offset().left、$(this).offset().top event.originalEvent;//获取原生的event对象。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

鼠标

获得发生事件时鼠标的位置 让图片飞……案例 在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。 练习：Tooltips效果。用层来做，背景色是黄色。当鼠标移动到页面上的某个元素时，在旁边显示当前元素的Id.

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

动画

show()、hide()方法会显示、隐藏元素。用toggle(speed)方法在显示、隐藏之间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide(); }); 如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。 练习：右下角弹出QQ消息的效果。slideDown(1000);从下网上显示

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

效果

滑动效果 slideDown()、slideUp()、slideToggle()隐藏就显示,显示就隐藏 淡入淡出（透明） fadeIn()、fadeOut()、fadeToggle()同上、fadeTo()到达透明度多少2000，0.1 自定义动画 animate({样式},speed) 部分样式不支持：backgroundColor、color、borderStyle、…… 使用animate设置对象位置的时候要确保position的值为absolute或relative. 停止动画正在执行动画的元素.stop()(*),带参数的stop(true,false); 动画队列： $(‘img‘).animate({ "top": "400px", "left": "10px;" }, 2000); $(‘#btn‘).click(function () {$(‘img‘).animate({ "width": "80px", "height": "80px", "top": "-=400px", "left": "500px" }, 2000).animate({ "top": "+=450px", "left": "+=450px" }, 3000);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

注意

Jquery 和 dom中尽量用单引号，html代码用双引号。

很多Dom做的功能用ASP.net服务端代码也能完成，但是那样会页面频繁刷新，性能、可用性非常差。能用Dom操作就不要用ASP.net服务端代码。先学HTML、JS、Dom，不要一上来就学asp.net，因为那样容易被ASP.Net好用所迷惑。 id和jQuery对象的区别。动态创建出来的对象在append之前是不能通过$("#id")来引用的。 js中单引号与双引号 $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中，不在table中。 stopPropagation();//阻止事件冒泡

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery插件： jQuery cookie

什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery特有的概念，只不过jQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。 Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不能使用了，不过一般不用考虑禁用Cookie的情况。Cookie的几个特征：Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突；一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie；Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery Cookie使用

使用方法，Cookie保存的是键值对 1、添加对jQuery.cookie.js 2、设置值，$.cookie(‘名字‘, ‘值‘)。cookie中保存的值都是文本。 3、读取值，var v=$.cookie(‘名字‘) alert($.cookie("用户名")); $.cookie("用户名","tom");在同域名的另外一个页面中也能读取到。 案例：点击登录以后保存用户名，再登录的时候读取上次保存的用户名，帮用户填上 设置值的时候还可以指定第三个参数，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true })，expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除，options参数用哪个设置哪个。 secure：传输cookies时候，是否需要一个安全协议。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jqzoom插件图片放大

官网：http://www.mind-projects.it/ 步骤1：<script type=‘text/javascript‘ src=‘js/jquery-1.2.6.js‘></script> <script type=‘text/javascript‘ src=‘js/jquery.jqzoom-1.0.1.js‘></script> 步骤2：<link rel="stylesheet" type="text/css" href="css/jqzoom.css" /> 步骤3：<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a> 步骤4：$(document).ready(function(){ $(‘.MYCLASS).jqzoom(); });

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

常用jQuery插件

jQuery官方的UI控件 jQueryUI http://jQueryui.com/ 下发包 演示常用方法，分析代码。 表现和内容分离，语义化。 jQuery.validate 表单验证插件 Form,用于为表单提供直接的Ajax能力 所有插件列表http://plugins.jQuery.com/ 步骤1：解压jQueryUI后将CSS目录（里面包含images）与Js目录拷贝的网站下。 步骤2：导入jquery-ui-1.8.16.custom.css和jquery-ui-1.8.16.custom.min.js 步骤3：$(function () { $(‘#txt1‘).datepicker(); });

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

网页分析工具

DebugBar→IE的 IE8内置了开发人员工具（工具→开发人员工具），IE6/7需要安装Internet Explorer Developer Toolbar（下载地址见备注）。 IECollection也带了安装包。可以禁用cookie、禁用JavaScript、清理Cookie、禁止缓存、调试JS等。 Firebug→FireFox下的 多版本IE工具：IECollection，比IETester更强大。 Profile功能（概述）,IE下叫”探查器”。

如鹏网：http://www.rupeng.com