jQuery 选取元素概要

用选择器选取元素

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

如:

$('#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协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WD学习记录

html学习笔记1

1.网页文档的结构和格式的定义是由HTML元素来完成的.HTML元素是由单个或一对标签定义的范围。一个标签就是左右分别有(<)(>)的字符串。开始标签是指不以/...

11630
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

30920
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

32170
来自专栏十月梦想

CSS三种表现形式

10020
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

21160
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

33410
来自专栏偏前端工程师的驿站

根据标准word模板生成word文档类库(开源)

前言     最近因项目需要要自定义标准word模板,并以编码方式操作word模板、填充数据和生成word文档,于是自己写了条小“内裤”来实现这个功能。该“内...

27460
来自专栏一“技”之长

Java开发GUI之Menu菜单 原

    在MacOS上的软件都有一个菜单栏,会浮现在屏幕顶部,Java的awt包中也提供了构建菜单功能的相关组件,示例代码如下:

15120
来自专栏流媒体

Android View measure解读

14530
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

35940

扫码关注云+社区

领取腾讯云代金券