jQuery 选取元素概要

96
九彩拼盘
2016.02.02 22:40* 字数 558

用选择器选取元素

$(选择器 [, 父元素])

如:

$('#save-btn');// 所有 id 为 save-btn 的
$('.btn', $('form'));// form 元素下类名包含 btn 的元素
$('.box h2.title'); // 所有类名包含 box 的元素下的类名包含 title 的 h2

jQuery 支持的选择器包括:

注意:
对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

// 不推荐
$('.form:visible');
$('.form :selected');
$('.list:eq(3)');
// 推荐
$('.form').filter(':visible');
$('.form').find(':selected');
$('.list').eq(3);

一些有用的选择器

表单类

是否可见

内容过滤

其他

选择器中包含元字符的处理

选择器的元字符有:!"#$%&'()*+,./:;<=>?@[\]^{|}~

选择器中如果要使用选择器的元字符,必须用 \ 来转义。如:选择 id 为 foo.bar 的元素,要使用 $("#foo\\.bar")。如果使用 $("#foo.bar"),则选择的是 id 为 foo 并且有 bar 的类名的元素。

从层级中选取元素

从父元素和祖系元素中找

从子元素中下找

$('#frameDemo').contents().find('a');
// 等效与
$('#frameDemo')[0].contentWindow.$('a');

从兄弟元素中找

过滤掉不满足条件的元素

$(".btn")
  .filter(function(index) {
    return index > 2 && $(this).is(':visible');
});

本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

🐋 Web 前端
Web note ad 1