jQuery笔记(三)-- 使用过滤器

jQuery选择器能够模仿CSS和XPath语法,提供高效、准确匹配元素的方法,jQuery过滤器是一系列简单,实用的jQuery对象,建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中,过滤器通过Sizzle.filter子类实现,包含过滤、查找和串联三类操作行为

1、过滤

过滤是对jQuery对象所包含的元素进行再筛选的操作,jQuery过滤方法主要包括8种:

过滤方法 说明
eq(index) 获取第N个元素
hasClass(class) 检查当前的元素是否包含某个特定的类,如果有则返回true
filter(expr) 筛选出与指定表达式匹配的元素集合
is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback) 将一组元素转换成其他数组(不论是否是元素数组)
has(expr) 保留包含特定后代的元素,去掉那些不含有指定后代的元素
not(expr) 删除与指定表达式匹配的元素
slice(start,[end]) 选取一个匹配的子集
  • 类过滤:就是根据元素的类特性进行过滤操作,hasClass(className)
  • 下表过滤:可以精确找出jQuery对象中指定下表为止的元素,eq(index),参数index是一个整数值,从0开始,用来指定元素在jQuery对象中的下标位置
  • 表达式过滤:是最强大的过滤工具,因为表达式具有较大的灵活性,只要表达式符合jQuery选择器语法形式,可以是简单的选择符,也可以是复合型选择器。
    • filter():接受表达式参数的filter(expr)、接受函数参数的filter(fn)
    • has():是一个轻便的过滤器,没有filter()复杂,它保留包含特定后代的元素,去掉那些不含有指定后代的元素。
  • 判断:is(expr)方法不直接过滤元素,仅作为一个检测工具判断jQuery对象是否包含特定条件的元素
  • 映射:map()方法能够把jQuery对象中每个元素映射到一个新的jQuery对象中,map(callback)
  • 清除:not(expr)方法能从jQuery对象中删除符合条件的元素,并返回清除后的jQuery对象
  • 截取:slice()方法能够从jQuery对象中截取部分元素,并把这个被截取的元素集合装在一个新的jQuery对象中返回,用法:slice(start,[end])。参数start表示开始选取子集的位置,第一个元素的0,若该参数是负数,则表示从集合尾部开始选起。end是一个可选参数,表示选取结束的位置,如果不指定,则表示到集合的结尾,但不包括end所指定位置的元素

使用过滤器:




    
    
    
    使用过滤器




床前明月光,疑是地上霜。

举头望明月,低头思故乡。

独在异乡为异客,每逢佳节倍思亲。

遥知兄弟登高处,遍插茱萸少一人。

map映射:




    
    
    
    map映射


用户名

密码

网址

2、查找

查找操作主要是以jQuery对象为基础,查找父级、同级或者下级相关元素,以便实现延伸筛选,增强对文档的控制能力。jQuery中的查找方法主要包括16种

查找方法 说明
add(expr,[context]) 把与表达式匹配的元素添加到jQuery对象中
children([expr]) 取得一个匹配的元素集合中每一个元素的所有子元素的元素集合
closest(expr,[context]) 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
contents() 查找匹配元素内部所有的子节点(包括文本节点)
find(expr) 搜索所有与指定表达式匹配的元素
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr]) 查找当前元素之后所有的同辈元素
nextUntil([seletor]) 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止
offsetParent() 返回第一个匹配元素用于定位的父节点
parent([expr]) 取得一个包含所有匹配元素的唯一父元素的元素集合
parents([expr]) 取得一个包含所有匹配元素的祖先元素的元素集合(不包含根元素)
parentsUntil([seletor]) 查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止
prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr]) 查找当前元素之前所有的同辈元素
prevUntil([seletor]) 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的唯一同辈元素的元素集合
  • 向下查找
    • children()方法能够查找当前元素的所有或者部分子元素,用法childern(expr)
    • contents()方法不仅可以获取子元素也可以获取文本节点和注释节点,该方法没有参数,功能等同于DOM的childNodes
    • find()方法能够查找所有后代元素,而childern()方法仅能够查找子元素



    
    
    
    向下查找


  • 向上查找
    • parents()方法能够查找所有匹配元素的祖先元素
    • parent()方法是对parents()方法的延伸,它可以取得一个包含着所有匹配元素的唯一父元素的元素集合。用法parent([expr])
    • parentsUntil()方法可以查找指定范围的所有祖先元素,相当于在parents()方法返回集合中截取部分祖先元素。用法parentsUntil([selector])



    
    
    
    
    向上查找


  • 向前查找
    • prev()方法能够匹配前一个相邻元素。用法prev([expr])
    • prevAll()方法能够向前选取所有相邻的同辈元素。用法prevAll([expr])
    • prevUntil()方法能够向前选取指定范围的相邻元素。用法prevUntil([selector])
  • 向后查找
    • next()方法仅能够匹配后一个相邻的元素。用法next([expr])
    • nextAll()方法能够向后查找所有同辈元素。用法nextAll([expr])
    • nextUntil()方法能够向后查找指定范围内的同辈元素。用法nextUntil([selector])



    
    
    
    向前向后查找


回乡偶书

贺知章

少小离家老大回

乡音未改鬓毛衰

儿童相见不相识

笑问客从何处来

  • 查找同辈元素
    • siblings()方法可以查找所有兄弟元素,不管其位置在前还是在后。用法siblings([expr])
  • 添加查找
    • 使用add()方法可以为查找的结果集添加新的查找内容。用法:add(expr,[context])

3、串联

jQuery链式语法能够实现在一行代码中完成各种复杂的任务。但是在很多情况下用户希望jQuery方法能够操作不同的jQuery对象,或者前后方法能够相互影响,为此jQuery提供了两个串联方法:addBack()end()

  • 合并jQuery对象addBack()
  • 返回jQuery()对象end()



    
    
    
    串联


少小离家老大回,乡音未改鬓毛衰。

儿童相见不相识,笑问客从何处来。

你可能感兴趣的:(jQuery笔记(三)-- 使用过滤器)