一。基本选择器
选择器 | 描述 | 示例 |
#id | 根据ID匹配元素 | $('#test') |
.class | 根据class匹配元素 | $('.test') |
element | 根据元素名匹配元素 | $('p') |
* | 匹配所有元素 | $('*') |
selector1,selector3,selector2, | 将匹配到的元素合并并返回 | $('.text,p,#one,div') |
二。层次选择器
选择器 | 描述 | 示例 |
$('ancestor descendant') | 选取ancestor 元素里所有descendant后代元素 | $('div p ') |
$('parent>child') | 选取parent的子元素chlid | $('div>p') |
$('prev+next') | 选取紧跟prev的next元素 | $('.text+p')class为text的类与p为同辈元素 |
$('prev~siblings') | 选取prev后所有siblings元素 | $('#text~div')text后的所有div同辈元素 |
注:$('parent>child'),选择parent元素下的子元素child,其跟后代选择器$("ancestor descendant")是有区别的,前者只能选择到子元素,而后者能选择到所有后代元素。
三。基本过滤选择器
选择器 | 描述 | 示例 |
:first | 选取第一个元素 | $('div:first') |
:last | 选取最后一个元素 | $('div:last') |
:not(selector) | 去除所有选择器匹配的元素 | $('div:not(.text)')选取<div>中class不是text的元素 |
:even/:odd | 选取所有索引值为偶数/j奇数的元素,从 0 开始计数 | $("tr:even")/$("tr:odd")索引等于偶数/奇数的tr元素 |
:eq(index) | 选取索引等于index的元素 | $('input:eq(1)')索引等于1的input元素 |
:gt(index) | 选取索引大于index的元素 | $('input:gt(1)')索引大于1的input元素 |
:it(index) | 选取索引小于index的元素 | $('input:gt(1)')索引小于1的input元素 |
:header | 选取所有标题元素 | $(':header')如<h1><h2><h3><h4> |
:focus | 选取当前焦点的元素 | $(';focus') |
:animated | 选取当前正在执行的动画元素 | $('div:ainmated') |
四:内容过滤选择器
选择器 | 描述 | 示例 |
:contains(text) | 选取含有text内容的元素 | $('div:contains(‘我’)') |
:empty | 选取不含有子元素 | $('div:empty') |
:has(selector) | 选取还有选择器所匹配元素的元素 | $('div:has(p)')选取含有<p>的<div>元素 |
:parent | 选取含有子元素活文本元素 | $('div:parent') |
五:可见性过滤器
选择器 | 内容 | 示例 |
:hidden | 选取所有不可见的元素 | $(':hidden') |
:visible | 选取所有可见元素 | $(':visible') |
不可见元素:css样式中dispay属性为none,使用hide()函数,typle.style.visibility属性为hidden等元素
相关推荐
### jQuery选择器与过滤器深度解析 在前端开发领域,jQuery因其简洁的语法和强大的功能,长期以来备受开发者青睐。其中,选择器与过滤器作为jQuery的核心功能之一,为DOM操作提供了极大的灵活性和便利性。本文将对...
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...
基本选择器是学习jQuery选择器的基石,涵盖了ID选择器、Class选择器、Element选择器及通配符选择器。 1. **ID选择器**:`#id`,用于定位具有特定ID的单一元素,如`$('#one')`会选中ID为“one”的元素,常用于修改该...
jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...
在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。
### jQuery选择器速查表知识点 jQuery选择器是jQuery库中用于选取HTML元素的强大工具。通过不同的选择器,我们可以轻松地选中页面中的元素并进行操作。本速查表将介绍几种不同类型的选择器,以供查询和参考。 ####...
在实际应用中,这两个选择器可以与其他jQuery选择器结合使用,以实现更复杂的操作。比如,如果你想隐藏所有可见的div,可以这样做: ```javascript $("div:visible").hide(); ``` 或者,如果要切换元素的可见性,...
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
### jQuery选择器详解 在网页开发中,jQuery作为一款轻量级、功能强大的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。其中,选择器是jQuery的核心特性之一,它提供了丰富的语法来...
综上所述,jQuery选择器提供了一套强大且灵活的工具,帮助开发者高效地选择和操作DOM元素。无论是简单的元素选择还是复杂的条件过滤,都能轻松实现。在实际开发过程中,合理运用这些选择器可以极大地提高代码的效率...
首先,jQuery选择器是用于选取HTML元素的关键机制。它们借鉴了CSS选择器的语法,并在此基础上扩展了一些额外的功能,使得操作DOM(文档对象模型)变得更加简单。jQuery的选择器分为几大类: 1. **基础选择器**:...
这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...
通过`org.htmlparser.Parser`库,我们可以实现对HTML文档的解析,并利用自定义的过滤器来模拟jQuery选择器的功能。然而,由于JavaScript和Java在处理DOM上的本质差异,完全复制jQuery的功能可能会较为复杂,因此在...
3. **简单过滤选择器** - `:first`或`First()`:选取第一个元素,如`$("div:first")`选取第一个`<div>`。 - `:last`或`Last()`:选取最后一个元素,如`$("div:last")`选取最后一个`<div>`。 - `:not(选择器)`:...
jQuery选择器是jQuery库的核心功能之一,它使得开发者能够高效地选取HTML文档中的特定元素,进行操作或应用样式。在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。...
基本过滤选择器帮助我们从一组元素中筛选出特定的元素: 1. `$("tr:first")` - 选取所有 `<tr>` 元素的第一个。 2. `$("tr:last")` - 选取所有 `<tr>` 元素的最后一个。 3. `$("input:not(:checked) + span")` - ...
本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考,具体如下: 前面一篇介绍了层次选择器,今天我们学习一下jQuery的另一种选择器:基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西,...
除此之外,内容过滤选择器可以选择包含特定子元素或文本的元素,属性过滤选择器可以根据属性来选取元素,表单选择器用来选取不同类型的`<input>`元素,可见性过滤选择器用于选择可见或隐藏的元素等。 在使用选择器...
### jQuery选择器详解 #### 一、基本选择器:快速定位DOM元素 基本选择器是jQuery中最常用的选择器之一,用于快速定位文档中的特定元素。它包括: - **ID选择器**:`#id` - 匹配文档中带有指定ID的单一元素。例如...