第1章
基础实例

001　以淡入淡出的效果显示或隐藏元素

本例主要采用fadeIn（）和fadeOut（）方法实现了以淡入淡出的显示效果显示或隐藏元素。在浏览器中显示该页面时，单击“淡出隐藏百度窗口”按钮，则该窗口将逐渐从页面中消失；单击“淡入显示百度窗口”按钮，则该窗口将逐渐从页面中显现出来，如图001-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，fadeIn（）方法用于以淡入效果显示已隐藏的元素，该方法的语法声明如下：

＄（selector）.fadeIn（speed,callback）;

其中，参数speed是一个可选参数，它可以取slow、fast或毫秒值。参数callback也是一个可选参数，表示动作完成后所执行的方法名称。

fadeOut（）方法用于以淡出效果隐藏当前的可见元素，该方法的语法声明如下：

＄（selector）.fadeOut（speed,callback）;

其中，参数speed是一个可选参数，规定效果的时长，它可以取slow、fast或毫秒值。参数callback也是一个可选参数，表示动作完成后所执行的方法名称。

本例的源文件名是HtmlPageC025.html。

002　以卷帘效果展开或收缩被选择的元素

本例主要采用slideUp（）和slideDown（）方法实现了以卷帘方式展开或收缩元素。在浏览器中显示该页面时，单击第一个“收缩内容”按钮，如图002-1所示，则将下面的标题文字以卷帘方式从下到上慢慢收缩，如图002-2所示，此时第一个“收缩内容”按钮变为“展开内容”按钮；单击“展开内容”按钮，则将从上至下慢慢展开标题文字。第二个“收缩内容”按钮和第三个“展开内容”按钮只能实现按钮标题所示的单一功能，第一个按钮则集成了这两个按钮的功能。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，如果元素已显示，slideUp（）方法则以卷帘式的滑动效果隐藏被选元素。slideUp（）方法的语法声明如下：

＄（selector）.slideUp（speed,callback）

其中，参数speed是一个可选参数，该参数规定元素从可见到隐藏的速度，默认值为normal，可能的值包括毫秒值（比如1500）、slow、normal、fast等，在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度，这样会创造滑动效果。参数callback也是一个可选参数，表示slideUp（）方法在执行完之后，将要执行的方法。除非设置了speed参数，否则不能设置该参数。

slideDown（）方法用于使用卷帘式的滑动效果显示已经隐藏的被选元素。slideDown（）方法的语法声明如下：

＄（selector）.slideDown（speed,callback）

其中，参数speed是一个可选参数，该参数规定元素从隐藏到可见的速度，默认值为normal，可能的值包括毫秒值（比如1500）、slow、normal、fast等，在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。参数callback也是一个可选参数，表示slideDown（）方法执行完成之后要执行的方法；除非设置了speed参数，否则不能设置该参数；如果元素已经是完全可见，则该效果不产生任何变化，除非规定了callback函数。

slideToggle（）方法通过使用高度变化的滑动效果来切换元素的可见状态，如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素，关于slideToggle（）方法的更多说明请参考本书的其他部分。

本例的源文件名是HtmlPageC096.html。

003　根据可见状态确定是否显示或隐藏元素

本例主要采用toggle（）方法实现根据元素的可见状态确定是否显示或隐藏元素。在浏览器中显示该页面时，单击第一个“隐藏图片”按钮，如图003-1所示，则将隐藏下面的图片，如图003-2所示，此时第一个“隐藏图片”按钮变为“显示图片”按钮；单击“显示图片”按钮，则将重新显示刚才隐藏的图片。第二个“隐藏图片”按钮和第三个“显示图片”按钮则只能实现按钮标题所示的单一功能，第一个按钮则集成了这两个按钮的功能。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，如果被选的元素已被显示，调用hide（）方法则隐藏该元素，hide（）方法的语法声明如下：

＄（selector）.hide（speed,callback）

其中，参数speed是一个可选参数，该参数规定元素从可见到隐藏的速度，默认值为0，可能的值包括毫秒值（如1500）、slow、normal、fast等，在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。参数callback也是一个可选参数，它表示hide（）方法在执行完成之后将要执行的方法；除非设置了speed参数，否则不能设置该参数。注意：如果元素已经是完全隐藏，则不产生任何变化，除非规定了callback函数。

如果被选元素已被隐藏，调用show（）方法则显示这些元素，show（）方法的语法声明如下：

＄（selector）.show（speed,callback）

其中，参数speed是一个可选参数，规定元素从隐藏到完全可见的速度，默认值为0，可能的值包括毫秒值（如1500）、slow、normal、fast等，在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。参数callback也是一个可选参数，表示show（）方法在执行完成之后将要执行的方法；除非设置了speed参数，否则不能设置该参数。注意：如果元素已经是完全可见，则不产生任何变化，除非规定了callback函数。

toggle（）方法用于切换元素的可见状态，如果被选元素是可见的，则隐藏这些元素；如果被选元素是隐藏的，则显示这些元素。toggle（）方法的语法声明如下：

＄（selector）.toggle（speed,callback,switch）

其中，参数speed是一个可选参数，该参数规定元素从可见到隐藏的速度（或者相反），默认值为0，可能的值包括：毫秒值（比如1500）、slow、normal、fast等，在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度；如果设置此参数，则无法使用switch参数。参数callback是一个可选参数，表示toggle（）方法在执行完成之后将要执行的方法；除非设置了speed参数，否则不能设置该参数。参数switch是一个可选参数，类型为布尔值，该参数规定toggle（）方法是否隐藏或显示所有被选元素；True表示显示所有元素，False表示隐藏所有元素，如果设置此参数，则无法使用speed和callback参数。

本例的源文件名是HtmlPageC095.html。

004　根据状态确定是否滑入或滑出被选元素

本例主要采用slideToggle（）方法实现以一行代码同时实现以展开（滑入）或收缩（滑出）的方式显示或隐藏被选元素。在浏览器中显示该页面时，单击“收缩百度窗口”按钮，则这个元素窗口将逐渐收缩直到消失，“收缩百度窗口”按钮标题被修改为“展开百度窗口”按钮；单击“展开百度窗口”按钮，则这个元素窗口将逐渐展开，直到全部呈现，“展开百度窗口”按钮标题则被重置为“收缩百度窗口”按钮，如图004-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，slideToggle（）方法通过使用高度变化的滑动效果来切换元素的可见状态，如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。slideToggle（）方法的语法声明如下：

＄（selector）.slideToggle（speed,callback）

其中，参数speed是一个可选参数，该参数规定元素从隐藏到可见的速度（或者相反），默认值为normal，可能值包括slow、normal、fast和毫秒值，在设置速度的情况下，元素在切换过程中，会逐渐地改变其高度创造滑动效果。参数callback也是一个可选参数，它是在slideToggle（）方法函数执行完之后要执行的回调函数；除非设置了speed参数，否则不能设置该回调函数。

本例的源文件名是HtmlPageC028.html。

005　自动确定是否淡入淡出地显示或隐藏元素

本例主要采用fadeToggle（）方法实现根据可见状态自动确定是否以淡入淡出的效果来显示或隐藏元素。在浏览器中显示该页面时，单击“淡出隐藏三个矩形”按钮，则这三个矩形将逐渐从页面中消失，“淡出隐藏三个矩形”按钮被修改为“淡入显示三个矩形”按钮；单击“淡入显示三个矩形”按钮，则这三个矩形将逐渐显示在页面中，“淡入显示三个矩形”按钮被重置为“淡出隐藏三个矩形”按钮，如图005-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，fadeToggle（）方法用于在fadeIn（）与fadeOut（）这两个方法之间进行切换。如果元素已经淡出，则执行fadeToggle（）方法将向元素添加淡入效果；如果元素已经淡入，则执行fadeToggle（）方法将会向元素添加淡出效果。fadeToggle（）方法的语法声明如下：

＄（selector）.fadeToggle（speed,callback）;

其中，参数speed是一个可选参数，用于规定效果的时长，它可以取slow、fast或毫秒值。参数callback也是一个可选参数，用于设置在动作完成后所执行的方法名称。

本例的源文件名是HtmlPageC026.html。

006　在指定的时间内完成元素的显示或隐藏

本例主要通过在show（）、hide（）和toggle（）方法中设置时间值从而实现在指定的时间内完成元素的显示或隐藏。在浏览器中显示该页面时，单击“延时显示”按钮，则div块将在5秒内逐渐显示出来；单击“延时隐藏”按钮，则div块将在10秒内逐渐完成隐藏；单击“自动切换”按钮，则div块将在8秒内自动完成显示或隐藏的过程，如图006-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，show（）、hide（）和toggle（）方法中的参数表示毫秒数，1秒等于1000毫秒，该参数也支持slow、normal、fast等单词。此实例的源文件名是HtmlPageC188.html。

007　查找并显示在页面中被隐藏的元素

本例主要调用可见性过滤器＄（"：hidden"）实现选取所有不可见的元素。在浏览器中显示该页面时，单击“隐藏DIV块”按钮，则在该DIV块中的图片将隐藏；单击“显示DIV块”按钮，则将查找在该DIV块中被隐藏的图片并显示出来，如图007-1所示。

主要代码如下所示：

上面有底纹的代码是jQuery实现此功能的核心代码。在该部分代码中，可见性过滤器＄（"：hidden"）用于选取所有不可见的元素，包括<input type="hidden"/>、<div style="display：none"></div>和<div style="visibility：hidden"></div>等元素。＄（"div：visible"）用于选取所有可见的<div>元素。

此实例的源文件名是HtmlPageC176.html。

008　以动画效果改变块内多个元素的不同属性

本例主要实现了使用animate（）方法实现以动画渐进改变的效果同步改变块内多个元素的不同属性。在浏览器中显示该页面时，单击“放大并移动下面的文字块”按钮，则这些文字将逐渐放大并向右移动，如图008-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，＄（"＃myblock"）.animate（｛width："150%"，fontSize："10em"｝，1000）用于以动画方式同步改变块内多个元素的不同属性。animate（）方法的语法声明如下：

＄（selector）.animate（styles,options）

其中，参数styles规定产生动画效果的CSS样式及值，可能的CSS样式值包括backgroundPosition、borderWidth、borderBottomWidth、borderLeftWidth、lineHeight、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、minWidth、font、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、textIndent。参数options规定动画的额外选项，可能的值包括speed（设置动画的速度）、easing（规定要使用的easing函数）、callback（规定动画完成之后要执行的函数）、step（规定动画的每一步在完成之后要执行的函数）、queue（布尔值，指示是否在效果队列中放置动画。如果为false，则动画将立即开始）、specialEasing（来自styles参数的一个或多个CSS属性的映射以及它们的对应easing函数）。

本例的源文件名是HtmlPageC060.html。

009　使用分组选择器操作不同元素的相同属性

本例主要实现了使用分组选择器操作不同元素的相同属性。在浏览器中显示该页面时，单击“设置输入框和选择框的背景颜色”按钮，将使用分组选择器同时选择输入框和选择框，并设置其背景颜色为灰色，如图009-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，分组选择器＄（".myClass，input"）能够选择匹配类名为“myClass”的元素和所有的“input”元素，两个选择器之间要用逗号分隔。

本例的源文件名是HtmlPageC360.html。

010　判断指定的元素是否嵌套在父元素里面

本例主要通过调用parents（）方法判断指定的元素是否嵌套在父元素里面。在浏览器中显示该页面时，将弹出一个消息框显示判断结果，即子元素“渝北区”是否在父元素“重庆市”里面，如图010-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，parents（）方法用于获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。通过选择器判断元素是否嵌套一般是获取元素对象的父级元素，然后通过判断父级元素的length属性是否等于1来确定是否嵌套。如果给定一个表示DOM元素集合的jQuery对象，.parents（）方法允许在DOM树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的jQuery对象。元素是按照从最近的父元素向外的顺序被返回的。.parents（）和.parent（）方法类似，不同的是后者沿DOM树向上遍历单一层级。该方法接受可选的选择器表达式，与向＄（）方法中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。parents（）方法的语法声明如下：

.parents（selector）

其中，参数selector包含用于匹配元素的选择器表达式。

本例的源文件名是HtmlPageC113.html。

011　获取指定元素在同类元素中的索引位置

本例主要通过调用index（）方法获取指定元素在同类元素中的索引位置。在浏览器中显示该页面时，单击“获取元素在同类中的索引位置”按钮，则将在弹出的消息框中显示指定的两个元素在整个类别中的索引位置，如图011-1所示。这种技术主要针对HTML中的树、列表、组合框等控件，如果需要对这些控件进行插入、删除或替换等操作，通常需要获取其中某个元素的索引值，再根据获得的索引值进行操作。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，index（）方法用于获取指定元素相对于其他指定元素的index位置，这些元素可通过jQuery选择器或DOM元素来指定。如果未找到元素，index（）方法将返回—1。index（）方法的语法声明如下：

＄（selector）.index（element）

其中，参数element是一个可选参数，规定要获得index位置的元素，可以是DOM元素或jQuery选择器。

本例的源文件名是HtmlPageC112.html。

012　将指定的事件和方法绑定到指定的元素

本例主要通过调用bind（）方法实现将指定的事件和方法绑定到指定的元素（此实例即是显示的图片）。jQuery框架的优势之一就是可以将事件和函数绑定到HTML元素上，这样既简化了传统JavaScript代码冗长的编写方式，又美化了jQuery代码的书写效果，可谓一举两得。在浏览器中显示该页面时，单击图片，则将在弹出的消息框中显示相关的信息，如图012-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，bind（）方法用于为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。bind（）方法的语法声明如下：

＄（selector）.bind（event,data,function）

其中，参数event规定添加到元素的一个或多个事件，可以由空格分隔多个事件，但必须是有效的事件。参数data规定传递到函数的额外数据。参数function规定当事件发生时运行的函数。

本例的源文件名是HtmlPageC120.html。

013　将多个事件和方法同时绑定到指定元素

本例主要通过调用bind（）方法实现将多个指定的事件和方法同时绑定到指定的元素（显示的图片）。在浏览器中显示该页面时，如果把鼠标放在图片上，则下面的文字呈现红色，如图013-1的左边所示；如果鼠标离开图片，则下面的文字呈现蓝色；如果使用鼠标单击图片，则下面的文字根据当前状态自动收缩或展开，如图013-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，bind（）方法用于为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。bind（）方法的基本语法是＄（selector）.bind（event，data，function），但它还有一个替代语法，即本例采用的语法，该语法的声明如下：

＄（selector）.bind（｛event:function, event:function, ...｝）

其中，参数｛event：function，event：function，...｝规定事件映射，其中包含一个或多个添加到元素的事件，以及当事件发生时运行的函数。

本例的源文件名是HtmlPageC121.html。

014　为元素同时绑定多个事件及其响应方法

本例主要使用on（）方法为li元素同时绑定mouseover和mouseout事件从而实现单行选择的效果。在浏览器中显示该页面时，当使用鼠标在列表项li元素上滑动时，该列表项背景呈现绿色；当鼠标离开列表项时，该列表项背景呈现白色，如图014-1所示，这样就给用户产生了单行选择的效果。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，on（）方法用于为指定元素的一个或多个事件绑定事件处理函数。从jQuery 1.7开始，on（）方法提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind（）、delegate（）、live（）等事件函数。on（）方法支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on（）方法之后新添加的元素，只要它符合条件，绑定的事件处理方法也对其有效。该方法在为同一元素、同一事件类型绑定多个事件处理方法，在触发事件时，jQuery将按照绑定的先后顺序依次执行绑定的事件处理方法。on（）方法的语法声明如下：

on（ events［, selector ］［, data ］, handler ）

其中，参数events表示一个或多个用空格分隔的事件类型和可选的命名空间，如click等。参数selector是可选的，用于指定哪些后代元素可以触发绑定的事件，如果该参数为null或被省略，则表示当前元素自身绑定事件（实际触发者也可能是后代元素，只要事件流能到达当前元素即可）。参数data是可选的，在任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。参数handler是指定的事件处理函数（方法）。

本例的源文件名是HtmlPageC074.html。

015　为同类元素添加相同的事件响应方法

本例主要使用delegate（）方法为指定的超链接添加事件响应方法从而实现在新窗口中打开超链接所指向的网页。在浏览器中显示该页面时，单击“凤凰网”超链接，则将在新窗口中打开凤凰网，单击其他几个超链接也将打开独立的浏览器窗口，如图015-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，delegate（）方法用于为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用delegate（）方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。delegate（）方法的语法声明如下：

＄（selector）.delegate（childSelector,event,data,function）

其中，参数childSelector规定要附加事件处理程序的一个或多个子元素。参数event规定附加到元素的一个或多个事件，由空格分隔多个事件值，必须是有效的事件。参数data是一个可选参数，规定传递到函数的额外数据。参数function规定当事件发生时运行的函数。

本例的源文件名是HtmlPageC128.html。

016　为匹配元素的事件绑定一次性响应方法

本例主要调用one（）方法实现为匹配元素的一个或多个事件绑定一次性事件响应方法（函数）。在浏览器中显示该页面时，单击“测试仅响应一次的单击按钮事件处理函数”按钮，则将在下面显示响应的提示信息，如图016-1所示。以后再单击“测试仅响应一次的单击按钮事件处理函数”按钮，将不响应。

主要代码如下所示：

上面有底纹的代码是jQuery实现此功能的核心代码。在这部分代码中，one（）方法用于为每个匹配元素的一个或多个事件绑定一次性事件响应方法。通过one（）方法绑定的事件处理方法都是一次性的，只有首次触发事件时才会执行该事件的响应方法；在触发之后，jQuery就会移除当前事件绑定。可以为同一元素、同一事件类型绑定多个一次性的事件响应方法，在触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件响应方法。

此实例的源文件名是HtmlPageC167.html。

017　为动态生成的元素绑定其事件响应方法

本例主要通过调用on（）方法实现为动态产生的元素的相关事件绑定响应方法。在浏览器中显示该页面时，单击“单击此按钮就会在下面新增一行文字”按钮，则将在下面显示一行文字，如图017-1所示。单击动态新增的这行文字，则这行文字将会自动消失。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，on（）方法用于在被选元素及子元素上添加一个或多个事件处理程序。on（）方法的语法声明如下：

＄（selector）.on（event,childSelector,data,function,map）

其中，参数event规定被选元素的一个或多个事件或命名空间，由空格分隔多个事件值，必须是有效的事件。参数childSelector是可选参数，规定只能添加到指定的子元素上的事件处理程序。参数data是可选参数，规定传递到方法的额外数据。参数function是可选方法，规定当事件发生时运行的方法。参数map规定事件映射（｛event：function，event：function，...｝），包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

使用on（）方法添加的事件处理程序适用于当前及未来动态创建的元素（比如由脚本创建的新元素）。如需移除事件处理程序，应使用off（）方法。

本例的源文件名是HtmlPageC168.html。

018　处理在容器中的指定元素事件是否冒泡

本例主要通过调用event.stopPropagation（）函数实现是否允许或禁止在容器中的指定元素的事件冒泡。事件冒泡就是单击子节点，会向上触发父节点、祖先节点的单击事件。在浏览器中显示该页面时，body容器中包含“外层div元素”，“外层div元素”容器包含“内层span元素”；单击“允许span元素的事件冒泡”按钮，再单击“内层span元素”，由于三个元素是嵌套的，因此单击最上层的“内层span元素”会导致三个元素都产生被单击了的效果，如图018-1的左边所示；单击“禁止span元素的事件冒泡”按钮，再单击“内层span元素”，此时只显示“内层span元素”被单击了，如图018-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，stopPropagation（）函数用于阻止当前事件在DOM树上冒泡。根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理方法，就会触发执行这些方法。使用stopPropagation（）函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理方法。该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理方法的函数。但是，event.stopImmediatePropagation（）不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他（尚未执行的）事件处理方法的执行。

本例的源文件名是HtmlPageC179.html。

019　为document绑定或解绑相关鼠标事件

本例主要使用bind（）和unbind（）方法实现为document绑定鼠标事件和解绑鼠标事件。在浏览器中显示该页面时，单击蓝色的div块，即可在页面上使用鼠标任意拖动该div块，松开鼠标则该div块将被放置在新位置，如图019-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，bind（）方法用于为被选元素绑定一个或多个事件处理程序，并规定事件发生时运行的方法，关于该方法的语法声明请参考本书的其他部分。unbind（）方法用于解绑被选元素的事件响应方法，该方法能够移除所有的或被选的事件响应方法，或者当事件发生时终止指定方法的运行。unbind（）方法适用于任何通过jQuery绑定的事件响应方法。如果没有规定参数，unbind（）方法会删除指定元素的所有事件响应方法。unbind（）方法的语法声明如下：

＄（selector）.unbind（event,function）

其中，参数event是可选参数，规定删除（解绑）元素的一个或多个事件，由空格分隔多个事件值，如果只规定了该参数，则会删除绑定到指定事件的所有函数。参数function也是可选参数，规定从元素的指定事件取消绑定的方法名称。

本例的源文件名是HtmlPageC218.html。

020　创建删除动态生成的元素及自身的按钮

本例主要通过为动态生成的按钮绑定事件响应方法从而实现删除动态生成的元素及删除按钮自身。在浏览器中显示该页面时，单击“增加”按钮，则将在下面另起一行增加一个“浏览”和“删除”按钮，单击动态生成的“删除”按钮，则将删除刚才动态生成的“浏览”和“删除”按钮，如图020-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，after（）方法用于在被选元素后插入指定的内容。remove（）方法用于移除被选元素，包括所有文本和子节点。bind（）方法用于为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的响应方法。关于这些方法的语法声明请参考本书的其他部分。

本例的源文件名是HtmlPageC232.html。

021　设置元素属性创建只能单击一次的按钮

本例主要通过设置元素的disabled属性实现在用户单击按钮后使按钮变成不可用状态。在浏览器中显示该页面时，单击“禁止此按钮”按钮，将弹出一个消息框，此时按钮已经被禁止；再次单击“禁止此按钮”按钮，将无反应，如图021-1所示。这种场景主要出现在客户端（浏览器）向服务器提交数据的时候，如果用户不断地连续单击按钮提交数据，会严重影响服务器的资源，所以一般用Ajax或者表单提交的时候，都会在首次单击按钮后将按钮变成灰色不可再次单击。

主要代码如下所示：

上面有底纹的代码是jQuery实现此功能的核心代码。在这部分代码中，＄（this）.attr（"disabled"，"true"）用于设置按钮为禁止状态，addClass（"mydisabled"）用于设置按钮在被禁止后的样式。

本例的源文件名是HtmlPageC038.html。

022　在指定元素的后面补充相同类型的内容

本例主要通过调用appendTo（）方法实现在指定元素的后面补充相同类型的内容。在浏览器中显示该页面时，如图022-1的左边所示，“商品名称：”是空白；单击“为下面这张图片添加商品名称”按钮，则将在“商品名称：”后面补充内容，如图022-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，appendTo（）方法用于在被选元素的结尾（仍然在内部）插入指定内容。appendTo（）方法的语法声明如下：

＄（content）.appendTo（selector）

其中，参数content规定要插入的内容（可包含HTML标签）。参数selector规定把内容追加到哪个元素上。需要说明的是：append（）方法和appendTo（）方法执行的任务相同，不同之处在于：内容和选择器的位置，以及append（）能够使用函数来附加内容。

本例的源文件名是HtmlPageC114.html。

023　在被选元素的开始位置插入指定的内容

本例主要通过调用prependTo（）方法实现在指定元素的前面插入新的HTML元素。在浏览器中显示该页面时，将显示如图023-1的左边所示的一幅图片；单击“在此按钮的上面插入一幅图片”按钮，则将在此按钮的上面插入一幅图片，如图023-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，prependTo（）方法用于在被选元素的开头（仍位于内部）插入指定内容。prependTo（）方法的语法声明如下：

＄（content）.prependTo（selector）

其中，参数content规定要插入的内容（可包含HTML标签）。参数selector规定在何处插入内容。需要说明的是：prepend（）和prependTo（）方法作用相同，差异在于语法，即内容和选择器的位置，以及prepend（）能够使用函数来插入内容。

本例的源文件名是HtmlPageC115.html。

024　在被选元素的前边插入新的HTML标记

本例主要使用insertBefore（）方法实现在某HTML标记的前边插入新的HTML标记。在浏览器中显示该页面时，在未插入新图片之前如图024-1的左边所示；单击“在下面这张图片的前边插入新图片”按钮，则将在该图片的前边新插入一张图片，如图024-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，insertBefore（）方法用于在被选元素之前插入HTML标记或已有的元素，如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。insertBefore（）方法的语法声明如下：

＄（content）.insertBefore（selector）

其中，参数content规定要插入的内容，可能的值包括选择器表达式和HTML标记。参数selector规定在何处插入被选元素。

此实例的源文件名是HtmlPageC089.html。

025　在被选元素的末尾添加新的HTML标记

本例主要使用append（）方法实现在一段HTML标记的后面添加新的HTML标记。在浏览器中显示该页面时，在未新增加图片之前如图025-1的左边所示；单击“在下面这张图片的后面新增一张图片”按钮，则将在那张图片的后面添加一张图片，如图025-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，append（）方法用于在被选元素的结尾（仍然在内部）插入指定内容，append（）方法和appendTo（）方法执行的任务相同，不同之处在于内容的位置和选择器。append（）方法的语法声明如下：

＄（selector）.append（content）

其中，参数content规定要插入的内容（可包含HTML标签）。

本例的源文件名是HtmlPageC090.html。

026　清除元素的HTML标记同时保留元素内容

本例主要使用正则表达式结合each（）方法实现在已经存在的元素中清除元素的HTML标签同时保留元素内容。在浏览器中显示该页面时，表格在未清除表格线之前的效果如图026-1所示；单击“清空所有的表格线”按钮，则表格将仅保留文字内容，如图026-2所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，each（）方法用于为每个匹配元素规定运行的函数，当使用each（）方法遍历函数时，如果需要提前终止遍历操作，可以通过返回false值来终止。replace（）方法用于执行正则表达式的替换操作。关于这些方法的语法声明请参考本书的其他部分。

本例的源文件名是HtmlPageC122.html。

027　判断某个指定ID的HTML标记是否存在

本例主要通过判断对象的length属性是否大于0来确定该对象是否已经存在。在jQuery里，如果要判断某个指定ID的HTML标记，比如ID为myimage的标记是否已经存在，可能有很多人会像下面这样来判断：

if（＄（"＃myimage"））｛alert（"存在ID为myimage的标签"）;｝

但是，上面的这种方法是错误的！亲自测试一下就会明白，因为＄（"＃myimage"）不管对象是否存在都会返回一个object对象。正确的方法应该是下面这样：

if（＄（"＃myimage"）.length>0）｛alert（"存在ID为myimage的标签"）;｝

在浏览器中显示该页面时，将在弹出的消息框中显示“不存在ID为myimage的标签”，如图027-1所示。如果采用被注释的代码进行测试，将没有任何反应。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在此实例中，length属性用于获取在jQuery对象中元素的数目。

本例的源文件名是HtmlPageC085.html。

028　获取outerHTML整个节点的HTML内容

本例主要使用prop（）方法实现获取outerHTML整个节点的HTML内容和文本，包括节点自身。当在浏览器中显示该页面时，将在弹出的消息框中显示获取的页面HTML内容，如图028-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，outerHTML可以用来更改或获取元素内所有的HTML和文本内容，包含引用该方法元素自身的标签。prop（）方法用于设置或获取当前jQuery对象所匹配的元素的属性值。在进行节点复制时，通常需要对节点的HTML内容进行读取和判断，jQuery.html（）只能获取当前节点下的HTML代码，并不包含节点本身的代码，因此常常需要通过jQuery.prop（"outerHTML"）的方式来解决这一问题。

本例的源文件名是HtmlPageC129.html。

029　修改无序列表ul的首项末项及其指定项

本例主要实现了修改无序列表ul的首项、末项和任意指定项的显示内容。在浏览器中显示该页面时，修改前的无序列表ul的内容如图029-1所示；单击“修改首项”、“修改末项”、“修改第3项”按钮，则将实现按钮标题所示的功能，修改后的无序列表ul的内容如图029-2所示。主要代码如下所示：

上面有底纹的代码为jQuery实现此功能的核心代码。在该部分代码中，“＄（"＃myul li：first"）”用于获取无序列表ul的首项；“＄（"＃myul li：last"）”用于获取无序列表ul的末项；“＄（"＃myul li"）.eq（2）”用于获取无序列表ul的第3项；“html（"3、中山市"）”用于设置元素的HTML内容。

本例的源文件名是HtmlPageC023.html。

030　根据指定条件删除无序列表ul的节点

本例主要调用了remove（）方法实现根据指定的条件删除无序列表的节点元素。在浏览器中显示该页面时，“超大城市”中的“北京”如图030-1的左边所示；单击“在超大城市中删除北京”按钮，则将从“超大城市”中删除“北京”，如图030-1的右边所示。单击其他按钮则会实现按钮标题所示的功能。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，remove（）方法用于移除被选元素，包括所有文本和子节点。append（）方法用于在被选元素的结尾（仍然在内部）插入指定内容。empty（）方法则从被选元素中移除所有内容，包括所有文本和子节点。remove（）方法的语法声明如下：

jQueryObject.remove（ ［ selector ］ ）

其中，参数selector是可选参数，它是String类型指定的选择器字符串，用于筛选符合该选择器的元素。如果没有指定selector参数，则移除当前匹配元素中的所有元素。

本例的源文件名是HtmlPageC119.html。

031　在相同结构的无序列表ul之间移动节点

本例主要通过调用clone（）等方法实现在两个相同结构的无序列表间移动节点。在浏览器中显示该页面时，节点分布如图031-1的左边所示；单击“杭州”节点，则“杭州”节点将从“特大城市：”移动到“超大城市：”，如图031-1的右边所示，反之亦然。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，remove（）方法用于移除被选元素，包括所有文本和子节点，该方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，remove（）不会保留元素的jQuery数据，其他的比如绑定的事件、附加的数据等都会被移除。clone（）方法用于生成被选元素的副本，包含子节点、文本和属性，注意只是副本。appendTo（）方法用于在被选元素的结尾插入指定内容。关于这些方法的语法声明请参考本书的其他部分。

本例的源文件名是HtmlPageC117.html。

032　获取在无序列表ul中任意位置的li元素

本例主要使用html（）方法实现获取并修改ul中首个li元素或者任意位置的li元素的内容。在浏览器中显示该页面时，无序列表ul中的首个li元素是一张酒店图片，如图032-1所示；在文档加载完成后，该无序列表ul中的首个li元素所展示的酒店图片将被修改为一张人物照片，如图032-2所示。

主要代码如下所示：

上面有底纹的代码为jQuery实现此功能的核心代码。在这部分代码中，“＄（"＃myul li"）.eq（0）”用于获取在ul中的首个li元素。html（）方法用于设置该元素的内容（inner HTML），如果该方法未设置参数，则返回被选元素的当前内容。eq（）方法用于获取当前jQuery对象所匹配的元素中指定索引的元素，并返回封装该元素的jQuery对象。eq（）方法的语法声明如下：

jQueryObject.eq（index）

其中，参数index表示Number类型的索引值，从0开始计数。jQuery 1.4新增支持参数index可以为负数。如果index为负数，则将其视作length+index，这里的length指的是匹配到的元素的个数（负数的index也可理解为从后往前计数）。

本例的源文件名是HtmlPageC087.html。

033　获取无序列表ul指定位置的节点内容

本例主要通过细化jQuery的选择器表达式的元素索引值获取无序列表ul指定位置的节点及其内容。在浏览器中显示该页面时，单击“显示第二种书名”按钮，则将获取无序列表ul的第二个节点内容，并将结果显示在消息框中，如图033-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，“＄（"ul li：eq（1）"）”用于获取无序列表ul的第二个节点。jQuery使用CSS选择器来选取HTML元素的格式有下列3种：

（1）＄（"p"）选取<p>元素。

（2）＄（"p.intro"）选取所有class="intro"的<p>元素。

（3）＄（"p＃demo"）选取所有id="demo"的<p>元素。

jQuery使用XPath表达式来选择带有给定属性的元素的格式有下列4种：

（1）＄（"［href］"）选取所有带有href属性的元素。

（2）＄（"［href='＃'］"）选取所有带有href值等于"＃"的元素。

（3）＄（"［href！='＃'］"）选取所有带有href值不等于"＃"的元素。

（4）＄（"［href＄='.jpg'］"）选取所有href值以".jpg"结尾的元素。

其他常用的jQuery选择器实例如表033-1所示。

eq（）方法用于获取指定索引位置的元素。text（）方法用于设置或获取被选元素的文本内容，当该方法用于获取一个值时，它会返回所有匹配元素的组合的文本内容（会删除HTML标记），当该方法用于设置值时，它会覆盖被选元素的所有内容，其语法声明如下：

＄（selector）.text（content）

其中，参数content规定被选元素的新文本内容，特殊字符将会被编码。

本例的源文件名是HtmlPageC130.html。

034　获取和设置在无序列表ul中的节点样式

本例主要通过调用find（）方法和css（）方法实现查找无序列表ul中指定类型的子节点并设置其样式。在浏览器中显示该页面时，无序列表ul的子节点在未设置背景前的样式如图034-1的左边所示，单击“设置子节点背景颜色”按钮，则将设置无序列表的两级子节点的背景颜色，如图034-1的右边所示。

主要代码如下所示：

上面有底纹的代码是jQuery实现此功能的核心代码。在这部分代码中，“＄（'li'）.find（'.level-1'）”用于获取CSS样式类型为“level-1”的子节点（li元素）。在jQuery中，find（）方法用于获得当前元素集合中每个元素的后代，通过选择器、jQuery对象或元素来筛选。如果给定一个表示DOM元素集合的jQuery对象，find（）方法允许在DOM树中搜索这些元素的后代，并用匹配元素来构造一个新的jQuery对象。find（）与children（）方法类似，不同的是后者仅沿着DOM树向下遍历单一层级。find（）方法第一个明显特征是：其接受的选择器表达式与向＄（）函数传递的表达式的类型相同，将通过测试这些元素是否匹配该表达式来对元素进行过滤。find（）方法的语法声明如下：

find（selector）

其中，参数selector包含供匹配当前元素集合的选择器表达式。

css（）方法用于设置或返回被选元素的一个或多个样式属性。如需获取指定的CSS属性的值，应使用如下语法：css（"propertyname"）；如需设置指定的CSS属性，应使用如下语法：css（"propertyname"，"value"）。

本例的源文件名是HtmlPageC131.html。

035　根据父元素筛选并设置无序列表ul的节点

本例主要通过调用parent（）方法实现根据父元素指定的条件筛选无序列表ul的节点并设置其样式。在浏览器中显示该页面时，无序列表ul的长寿区及其街道节点在未设置颜色和字体大小前的样式如图035-1的左边所示，单击“设置长寿区的街道为红色”按钮，则将设置长寿区的两级子节点的文本颜色为红色，并将字体大小设置为超大号，如图035-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，parent（）方法用于获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。如果给定一个表示DOM元素集合的jQuery对象，parent（）方法允许在DOM树中搜索这些元素的父元素，并用匹配元素构造一个新的jQuery对象。parents（）和parent（）方法类似，不同的是后者沿DOM树向上遍历单一层级。该方法接受可选的选择器表达式，与向＄（）函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。parent（）方法的语法声明如下：

parent（selector）

其中，参数selector包含用于匹配元素的选择器表达式。

本例的源文件名是HtmlPageC132.html。

036　在树结构中查找离当前节点最近的父节点

本例主要使用closest（）方法实现在树结构中查找离当前节点最近的父节点。在浏览器中显示该页面时，两张图片的说明文字背景颜色暂无，如图036-1的左边所示；分别单击两张图片，则两张图片的说明文字背景颜色将分别呈现浅绿色和浅蓝色，如图036-1的右边所示，即分别设置两张图片的父节点div块的背景颜色。有关此实例的主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，closest（）方法用于获得匹配选择器的第一个父元素，从当前元素开始沿DOM树向上。如果给定表示DOM元素集合的jQuery对象，closest（）方法允许检索DOM树中的这些元素以及它们的父元素，并用匹配元素构造新的jQuery对象。parents（）和closest（）方法都是沿DOM树向上遍历，二者之间的差异如表036-1所示。

此实例的源文件名是HtmlPageC146.html。

037　判断鼠标是否单击了无序列表ul的节点

本例主要实现了调用is（）方法判断鼠标是否单击了无序列表ul的节点（列表项）。在浏览器中显示该页面时，单击无序列表ul的某个节点，则该节点的背景将呈现绿色；单击无序列表ul的非节点部分，则该无序列表ul的背景将呈现红色，如图037-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，is（）方法用于根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回true。与其他筛选方法不同，is（）方法不创建新的jQuery对象。相反，它允许在不修改jQuery对象内容的情况下对其进行检测。这在callback内部通常比较有用，比如事件处理程序。is（）方法的语法声明如下：

is（selector）

其中，参数selector包含匹配元素的选择器表达式。

本例的源文件名是HtmlPageC143.html。

038　获取在无序列表ul中的li元素的个数

本例主要使用size（）方法获取在无序列表ul中的li元素个数。在浏览器中显示该页面时，单击“获取无序列表ul的li元素个数”按钮，则将在下面以粗体字显示无序列表ul的li元素个数，如图038-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，size（）方法用于获取被jQuery选择器匹配的元素的数量。size（）是jQuery提供的方法，而length是属性（不带括号），这两者在使用上类似。

本例的源文件名是HtmlPageC157.html。

039　在无序列表ul中筛选有子级的li元素

本例主要通过调用has（）方法实现在无序列表ul中筛选有子级的li元素。在浏览器中显示该页面时，有子级的li元素未设置背景之前如图039-1的左边所示，单击“设置有ul子级的li元素背景为浅蓝色”按钮，则将筛选该无序列表ul中有子级的li元素并设置其背景为浅蓝色，如图039-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，has（）方法用于将匹配元素集合缩减为拥有匹配指定选择器或DOM元素的后代的子集。如果给定一个表示DOM元素集合的jQuery对象，has（）方法用匹配元素的子集来构造一个新的jQuery对象，所使用的选择器用于检测匹配元素的后代；如果任何后代元素匹配该选择器，该元素将被包含在结果中。has（）方法的语法声明如下：

has（selector）

其中，参数selector包含匹配元素的选择器表达式。

本例的源文件名是HtmlPageC161.html。

040　筛选无序列表ul的奇数或偶数行的li元素

本例主要通过调用filter（）方法实现在无序列表ul中筛选奇数行或偶数行的li元素。在浏览器中显示该页面时，单击“设置偶数行li元素背景颜色”按钮，则将筛选该无序列表ul中偶数行的li元素并设置其背景为浅蓝色，如图040-1的左边所示；单击“设置奇数行li元素背景颜色”按钮，则将筛选该无序列表ul中奇数行的li元素并设置其背景为浅绿色，如图040-1的右边所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，filter（）方法用于将匹配元素集合缩减为匹配指定选择器的元素。如果给定表示DOM元素集合的jQuery对象，filter（）方法会用匹配元素的子集构造一个新的jQuery对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。filter（）方法的语法声明如下：

filter（selector）

其中，参数selector包含供匹配当前元素集合的选择器表达式。

filter（）方法的另一种形式是：通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回true，则元素会被包含在已筛选集合中，否则会排除这个元素。注意：无序列表ul的列表项的索引以0开始。

本例的源文件名是HtmlPageC162.html。

041　筛选无序列表ul的某行之前或之后的li元素

本例主要通过调用：gt选择器和：lt选择器实现在无序列表ul中筛选某行之前或之后的li元素。在浏览器中显示该页面时，单击“设置第3行之后li元素背景颜色”按钮，则将筛选该无序列表ul中第3行之后的li元素并设置其背景为浅蓝色，如图041-1的左边所示；单击“设置第3行之前li元素背景颜色”按钮，则将筛选该无序列表ul中第3行之前的li元素并设置其背景为浅绿色，如图041-1的右边所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，：gt选择器用于选取index值高于指定数的元素。index值从0开始。此选择器经常与其他元素／选择器一起使用，来选择指定的组中特定序号之后的元素。：gt选择器的语法声明如下：

＄（":gt（index）"）

其中，参数index规定要选择的元素。

：lt选择器用于选取小于指定index值的元素。index值从0开始。该选择器经常与其他元素／选择器一起使用，来选择指定的组中特定序号之前的元素。：lt选择器的语法声明如下：

＄（":lt（index）"）

其中，参数index规定要选择的元素。

本例的源文件名是HtmlPageC174.html。

042　在无序列表ul中实现根据内容筛选li元素

本例主要通过调用：contains（）选择器实现根据内容筛选在无序列表ul中符合条件的li元素。在浏览器中显示该页面时，单击“筛选无序列表中的牛肉商品”按钮，则将筛选该无序列表ul中包含牛肉商品的li元素并设置其背景为浅蓝色，如图042-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，：contains（）选择器用于选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。此选择器经常与其他元素／选择器一起使用，来选择指定的组中包含指定文本的元素。：contains（）选择器的语法声明如下：

＄（":contains（text）"）

其中，参数text规定要查找的文本。

本例的源文件名是HtmlPageC175.html。

043　在无序列表ul中倒序查找符合条件的li元素

本例主要通过调用子元素过滤选择器：nth-last-child（n）选取每个父元素下的倒数第n个子元素或者符合特定顺序规则的元素并设置这些li元素的背景颜色。在浏览器中显示该页面时，单击“查找每个无序列表的倒数第3个li元素”按钮，则将在三个无序列表中设置倒数第3行li元素的背景颜色为浅蓝色，如图043-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，：nth-last-child（n）选择器用于匹配作为父元素下的倒数第n个子元素或符合特定顺序规则的元素，将其封装为jQuery对象并返回。与该选择器相对的是：nth-child（n）选择器，用于匹配作为父元素下的第n个子元素或符合特定顺序规则的元素。：nth-last-child（n）选择器的语法声明如下：

＄（"selector:nth-last-child（n）"）

其中，参数selector表示一个有效的选择器。参数n表示指定的序号，从1开始计数。参数n一般是一个自然数，表示作为父元素下的倒数第n个子元素。例如：：nth-last-child（2）表示作为父元素的倒数第2个子元素。参数n也可以为特定的表达式（表达式中只能使用字母n表示自然数，大小写均可）。例如：：nth-last-child（odd）表示匹配作为父元素倒数顺序的奇数（第1，3，5，7，…）子元素的元素；：nth-last-child（even）表示匹配作为父元素倒数顺序的偶数（第2，4，6，8，…）子元素的元素；：nth-last-child（3n）表示匹配作为父元素倒数顺序的第3n个子元素的元素（n表示包括0在内的自然数，下同）；：nth-last-child（3n+1）表示匹配作为父元素倒数顺序的第3n+1个子元素的元素；：nth-last-child（3n+2）表示匹配作为父元素倒数顺序的第3n+2个子元素的元素。

本例的源文件名是HtmlPageC178.html。

044　选择无序列表ul某个li元素之前（后）的元素

本例主要使用prevAll（）和nextAll（）等方法实现选择在无序列表ul中某个li元素之前（或之后）的所有元素。在浏览器中显示该页面时，单击“设置第三项之后的所有选项颜色”按钮，则出现如图044-1所示的效果；单击“设置第三项之前的所有选项颜色”按钮，则出现如图044-2所示的效果。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，prevAll（）方法用于获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。prevAll（）方法的语法声明如下：

prevAll（selector）

其中，参数selector包含用于匹配元素的选择器表达式。

nextAll（）方法用于获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。如果应用选择器，则将通过检测元素是否匹配来对它们进行筛选。nextAll（）方法的语法声明如下：

nextAll（selector）

其中，参数selector包含用于匹配元素的选择器表达式。

本例的源文件名是HtmlPageC251.html。

045　选择无序列表ul指定范围内的多个li元素

本例主要使用slice（）方法实现选择无序列表ul指定范围内的多个li元素。在浏览器中显示该页面时，单击“设置第三项后的所有选项颜色”按钮，效果如图045-1所示；单击“设置最后四项的选项颜色”按钮，效果如图045-2所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，＄（'ul li'）.slice（2）用于选择无序列表从第三项开始之后的所有选项，因为基数是0，所以该参数是2。＄（'ul li'）.slice（-4）用于选择无序列表的最后四个选项。slice（）方法通常有两个参数，如果两个参数都指定，则表示选择指定范围内的选项。slice（）方法的语法声明如下：

slice（startIndex［，endIndex］）

其中，参数startIndex用于指定选取的起始索引，从0开始算起。参数endIndex是可选参数，用于指定结束索引（不包括该索引位置的元素）。如果startIndex为负数，则表示startIndex+length，length表示匹配的元素个数（也可理解为从后向前计数）。如果endIndex为负数，则表示endIndex+length，length表示匹配的元素个数（也可理解为从后向前计数）。如果省略endIndex参数，则一直选取到集合末尾。

本例的源文件名是HtmlPageC245.html。

046　根据输入字符智能匹配符合要求的li元素

本例主要使用jquery.fastLiveFilter.js插件来实现根据输入字符智能匹配符合要求的li元素。在浏览器中显示该页面时，如果在输入框中输入s，则将在下面显示无序列表中包含s的li元素，如图046-1的左边所示；如果在输入框中输入b，则将在下面显示无序列表中包含b的li元素，如图046-1的右边所示；即它会根据输入的字符智能匹配符合要求的li元素并自动列出来。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，fastLiveFilter（）方法即是jquery.fastLiveFilter.js插件的主要内容，使用时只要按照下列格式进行调用即可：＄（'＃search_input'）.fastLiveFilter（'＃search_list'）。

本例的源文件名是HtmlPageC369.html。

047　在无序列表ul中每隔3行设置li元素的背景色

本例主要通过调用子元素过滤选择器：nth-child（index／even／odd）选取每个父元素下的第index个子元素或者奇偶元素，从而实现在无序列表ul中每隔3行设置li元素的背景颜色。在浏览器中显示该页面时，单击“每隔3行设置li元素的背景颜色”按钮，则将在该无序列表ul中每隔3行设置li元素的背景颜色为浅蓝色，如图047-1所示。主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，：nth-child（index／even／odd）用于选取每个父元素下的第index个子元素或者奇偶元素。与该选择器相对的是：nth-last-child（n）选择器，用于匹配作为父元素下的倒数第n个（或符合特定倒数顺序的）子元素。：nth-child（n）选择器与：eq（index）选择器的不同之处在于，：eq（index）选择器只匹配一个元素，并且是所有匹配到的元素中的第index+1个元素（索引index从0开始算起）；：nth-child（n）选择器则需要判断匹配到的元素是否是其父元素的第n个子元素或符合其他特定要求（序号n从1开始算起），如果是就保留，否则将被舍弃。：nth-child（n）选择器的语法声明如下：

＄（"selector:nth-child（n）"）

其中，参数selector代表一个有效的选择器。参数n指定序号，从1开始计数。参数n一般是一个自然数，表示作为父元素下的第n个子元素。例如：：nth-child（2）表示作为父元素的第2个子元素。参数n也可以为特定的表达式（表达式中只能使用字母n表示自然数，大小写均可）。例如，：nth-child（odd）表示匹配作为父元素的奇数（第1、3、5、7、…个）子元素的元素；：nth-child（even）表示匹配作为父元素的偶数（第2、4、6、8、…个）子元素的元素；：nth-child（3n）表示匹配作为父元素的第3n个子元素的元素（n表示包括0在内的自然数，下同）；：nth-child（3n+1）表示匹配作为父元素的第3n+1个子元素的元素；：nth-child（3n+2）表示匹配作为父元素的第3n+2个子元素的元素。

本例的源文件名是HtmlPageC177.html。

048　为指定的元素添加或移除指定的CSS样式

本例主要调用addClass（）和removeClass（）方法实现为指定的元素添加或移除指定的CSS样式。在浏览器中显示该页面时，如果文本输入框获得焦点，将以红字样式显示内容；如果文本输入框失去焦点，将以黑字样式显示内容，如图048-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在这部分代码中，addClass（）方法用于向被选元素添加一个或多个CSS类。如果需要添加多个类，应使用空格分隔类名。该方法不会移除已存在的class属性，仅仅添加一个或多个class属性。addClass（）方法的语法声明如下：

＄（selector）.addClass（class）

其中，参数class规定一个或多个class名称。

removeClass（）方法用于从被选元素移除一个或多个类。removeClass（）方法的语法声明如下：

＄（selector）.removeClass（class）

其中，参数class是一个可选参数，该参数规定要移除的class名称。如需移除若干类，应使用空格来分隔类名。如果不设置该参数，则会移除所有类。

本例的源文件名是HtmlPageC166.html。

049　在两种不同风格的CSS样式之间自动切换

本例主要调用了toggleClass（）方法实现在两种不同风格的CSS样式之间自动切换。在浏览器中显示该页面时，表格的文字颜色是黑色，如图049-1所示，单击“改变表格的文字颜色”按钮，则表格的文字颜色变成蓝色，如图049-2所示。再次单击“改变表格的文字颜色”按钮，则表格的文字颜色又从蓝色变成黑色，如图049-1所示。

主要代码如下所示：

上面有底纹的代码是本例的核心代码。在该部分代码中，toggleClass（）方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之，即所谓的切换效果。toggleClass（）方法的语法声明如下：

＄（selector）.toggleClass（classname,function（index,currentclass）,switch）

其中，参数classname规定添加或移除的一个或多个类名，如需规定若干个类，应使用空格分隔类名。参数function（index，currentclass）是可选参数，该参数规定返回需要添加／删除的一个或多个类名的函数。参数index返回集合中元素的index位置。参数currentclass返回被选元素的当前类名。参数switch是可选参数，它是一个布尔值，规定是否仅仅添加（true）或移除（false）类。

本例的源文件名是HtmlPageC172.html。