Extra jQuery (I) – 选择器的回退及自定义筛选

系列前言

这个系列是动物书 《jQuery Cookbook》 的笔记,其实 jQuery 已经使用了相当长的一段时间,但是还是有必要去系统性学习一下 jQuery,以覆盖一些更高阶的使用技能以及更低层的原理。


主题

这一节讨论关与 jQuery 选择器的一些话题

1. 选择器栈以及回退

第一个,jQuery 的基础方法有这两类:

  1. jQuery 选择
  2. jQuery 属性
  3. jQuery 文档操作

第一类,例如 $('a').parent(),所有这一类返回一个 jQuery 对象的方法,都属于选择类的方法。

这里讨论的就是选择器,其实 jQuery 的集合对象除了保留了当前选择的元素集合之外,还保留了一系列的选择路径,举个例子:

var $items = $('#page-content')
                .find('a[href]')
                .siblings('label')
                .parent();

如上,这一个语句最终生成了一个 jQuery 集合对象,事实上这个选择的过程有五步,分别是:

// 第一步
$('#page-content')

// 第二步
$('#page-content').find('a[href]')

// 第四步
$('#page-content').find('a[href]').siblings('label')

// 第五步
$('#page-content').find('a[href]').siblings('label').parent();

注意,这里面其实在 jQuery 集合对象里面保留了一个选择栈,分别把整个选择路径都保存了下来,我们可以使用 .end() 方法来让选择栈回退到之前的一步:

var $links = $('#page-content').find('a[href]');
var $page_content = $links.end();

此外,如果使用 .end() 的时候,栈已经空了,就会返回一个空集合。

2. andSelf() 方法:与栈的前一个元素并集

在当前集合中调用 andSelf() 方法,可以将一个当前选择与栈的上一个选择进行并集,生成一个新的集合,再压栈到选择路径上。

例如下例,将每个同级的前两个 a 选中:

var $begin_two_a = $('a:first-of-type').nextUntil('a').andSelf();

3. 使用自定义的筛选方法进行集合筛选

使用 filter(selector) 方法进行集合的筛选的时候,这个 selector 除了使用 css 语法的字符串进行选择之外,还可以是一个函数。

这个函数会遍历应用到集合中的每一个元素,然后返回 true/false 来决定这个元素是否符合筛选条件,例如下面的例子筛选 .data('super') === 'yes' 的元素。

var $super_items = $('*').filter(function() {
    return $(this).data('super') === yes;
});

本节完成,涉及的这些知识点是比较容易遗漏的,先补上记录。


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/12/extra-jquery-1.html【Extra jQuery (I) – 选择器的回退及自定义筛选】

发表评论

电子邮件地址不会被公开。 必填项已用*标注