jQuery讲义3：管理包装集.ppt

管理包装集 包装器与包装集的概念 包装器：即$( )函数(jQuery( )的别名) ，该函数可以接受一个选择器作为参数，返回选择器所选定的dom元素的包装集 包装集：也称为jQuery对象，由$( )函数返回的特殊对象，它包含与选择器相匹配的Dom元素数组，这个数组中的元素是按照在文档中的顺序排列的。这个对象拥有大量有用的预定义方法，可作用于已收集的元素集合。 例如： .class4 表示一个类选择器 $(.class4) 表示当前页面中与类.class4相匹配的dom元素的包装集 $(.class4).hide( ) 表示调用包装集里的预定义方法hide( )，将当前页面中的.class4类的dom元素隐藏起来 $(img).addClass(‘thickBorder’) 表示调用包装集里的预定义方法addClass( )，将当前页面中图片元素应用thickBorder类 确定包装集的大小 包装集的size( )方法用于返回包装集中元素的个数，例如： $(a).size( )用于返回页面中a元素数的个数 var num=$(a).size() 表示定义一个变量num，并将其初始化为页面中a元数的个数 从包装集中获取元素 一般来说，一旦获取了元素包装集，就可以用jQuery方法对其执行某种操作。比如，用hide( )方法隐藏全部元素。但有时候，我们希望获取其中一个或者多个元素的直接引用，以便对其执行一些原始的JavaScript操作。 （1）通过索引获取元素 因为jQuery允许我们将包装集当成JavaScript数组，所以我们可以使用简单的数组下标，即通过位置来获取包装序列中的任何元素。 例如：var imgElement=$(img[alt])[0] （2）通过get( )方法获取元素 例如：$(img[alt]).get(0) get( )方法也可以接受负的下标值作为参数，get(-1)表示包装集末尾最后一个元素，get(-2)表示最后第二个元素，...... 从包装集中获取元素 （3）eq( )方法 与get( )方法相似，不同之处在于get( )方法返回的是dom元素，而eq( )方法返回的是dom元素的新包装集 这就意味着： $(img[alt]).get(0).addClass(green)是错误的 $(img[alt]).eq(0).addClass(green)才是正确的 同样eq( )方法可以接受负的参数 （4）first( )方法和last( )方法 first( )方法用于获取包装集中的第一个元素，并返回只包含此元素的新包装集 而last( )方法用于获取包装集中的最后一个元素，并返回只包含些元素的新包装集 从包装集中获取元素 （5）toArray( )方法 以数组形式获取包装集中所有元素，例如： var allLabeledButtons=$(label+button).toArray( ) 这条语句会收集页面上所有的label元素后面同级节点的第一个button元素，将它们封装成jQuery包装集，然后创建这些button元素组成的javaScript数组，将其赋值给allLabeledButtons变量 （6）index( element)方法 获取指定元素在包装集中的索引，例如： var n=$(img).index($(img#findMe)[0]); 该语句表示将id号为findMe的图片在整个页面图片集合中的索引号赋值给变量n 添加更多元素到包装集 add(expression)方法 创建包装集的副本并向其中添加由expression参数指定的元素。expression可以是选择器、HTML片段、DOM元素或DOM数组，如果是选择器，则将全部匹配的元素添加到包装集中；如果是HTML片段，则创建相应的元素并添加到包装集中；如果是DOM元素或DOM元素数组，则直接将其添加到包装集中。 例如： $(img[alt]).add(img[title]) $(img[alt]).addClass(thickBorder) .add(img[title]).addClass(seeThrough) 说明：以上语句为jQuery链式操作 过滤包装集 filter(expression)方法 创建包装集的副本并从中删除与expression参数值指定的标准不匹配的元素集合。expression可以是选择器、元素、数组、函数，如果是选择器，则删除所有不匹配expression的元素；如果传递的是元素或者元素数组，则删除包装集中除了这些元素之外的所有元素；如果传递的是函数，则会对包装集的每个元素分别调用此函数(this指定当前元素)，并从包装集