一、基本选择器
选择器 | 描 述 | 返回 | 示例 |
#id | 根据给定id匹配一个元素 | 单个元素 | $("#test") 选取id为test的元素 |
.class | 根据给定类名匹配一个元素 | 集合元素 | $(".test") 选取class为test的元素 |
element | 根据给定元素名匹配一个元素 | 集合元素 | $("p") 选取p元素 |
selector1,selector2...selectorN | 将每一个选择器匹配到元素合成后一起返回 | 集合元素 | $("div , span ,p , myClass")选取所在div span 和拥有class为myClass的标签的一组元素 |
* | 匹配所有元素 | 集合元素 | $("*") 选取所在的元素 |
二、层次选择器
选择器 | 描 述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $("div span")选取div里面的所有span元素 |
$("parent > child") | 选取parent元素下的child(子)元素。 | 集合元素 | $("div > span")选取div元素下的元素名是span的子元素 |
$("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(.one + div)选取class为one的下一个div元素 |
$("prev~siblings") | 选取 prev 元素之后的所有siblings元素 | 集合元素 | $("#one~div")选取id为two的元素后面的所有div兄弟元素 |
可以用next()方法来代替$("prev + next")
$(".one+div") <==> $(".one").next("div");
可用nextAll()代替$("prev~siblings")
$("#prev~div") <==> $("#prev").nextAll("div");
siblings()方法与前后位置无关,只要是同辈节点就能匹配。
三、过滤选择器
1、基本过滤选择器
选择器 | 描 述 | 返回 | 示例 |
:first | 选取第1个元素 | 单个元素 | $("div:first") |
:last | 选取最后一个元素 | 单个元素 | $("div:last") |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)") |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 | $("ul li:even") |
:odd | 选取索引是奇数的所有元素,索引从1开始 | 集合元素 | $("ul li:odd") |
:eq(index) | 选取索引等于index的元素,index从0开始 | 单个元素 | $("ul:eq(3)") |
:gt(index) | 选取索引大于index的元素,index从0开始,不包括index | 集合元素 | $("ul li:gt(3)") |
:lt(index) | 选取索引小于index的元素,index从0开始,不包括index | 集合元素 | $("ul li:lt(3)") |
:header | 选取所有标题元素,如:h1 h2 h3... | 集合元素 | $(":header") |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated") |
2、内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取含有文本内容text的元素 | 集合元素 | $("div:contains('我')") |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") |
:has(selector) | 选取含有选择器所匹配元素的元素 | 集合元素 | $("div:has(p)") |
:parent | 选取含有子元素或文本的元素 | 集合元素 | $("div:parent") |
3、可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
:visible | 选取所有可见元素 | 集合元素 | $("div:visible") |
$(":hidden")==》选取所有不可见元素。包括:<input type="hidden"/> 、 <div style="display:none;"> 、<div style="visibility=hidden">等元素。
4、属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]") |
[attribute = value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]") |
[attribute != value] | 选取属性值不等于value的元素 | 集合元素 | $("div[titil!=test]") |
[attribute ^= value] | 选取属性值以value开始的元素 | 集合元素 | $("div[titil^=test]") |
[attribute $= value] | 选取属性值以value结束的元素 | 集合元素 | $("div[titil$=test]") |
[attribute *= value] | 选取属性值含有value值的元素 | 集合元素 | $("div[titil*=test]") |
[selector][selector2][selectorN] |
用属性选择器合并成一个复合属性选择器,满足多个条件。 |
集合元素 |
$("div[id][title=test]") 选取拥有属性id , 并且属性title 等于test的div元素 |
5、子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even/odd) |
选取每个父元素下的第index个子元素或奇偶元素 index从1开始 |
集合元素 | $("ul li:nth-child(3)") |
:first-child | 选取每个父元素的第1个子元素 | 集合元素 | $("ul li:first-child") |
:last-child | 选取第个父元素下的最后一个子元素 | 集合元素 | $("ul li:last-child") |
:only-child |
如果某个元素是它父元素中惟一的子元素,那么将会 被匹配。如果父元素中含有其它元素,刚不会匹配 |
集合元素 | $("div:only-child") |
:nth-child(even) =>选取每个父元素下的偶子元素
:nth-child(odd) =>选取每个父元素下的奇子元素
:nth-child(3n) =>选取每个父元素下的索引值是3倍数的元素(n从0开始)
6、表单对象属性过滤选择器
选择器 | 描述 | 返回值 | 示例 |
:enabled | 选取所有可用元素 | 集合元素 | $("#form1:enabled") |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form1:disabled") |
:checked |
选取所有被选中的元素 (单选框、复选框) |
集合元素 | $("input:checked") |
:selected |
选取所有被选中的选项元素 (下拉列表) |
集合元素 | $("select:selected") |
四、表单选择器
选择器 | 描述 | 返回 | 示例 |
:input | 选取所有input 、textarea 、select 、button元素 | 集合元素 | $(":input") |
:text | 选取所有的单行文本框 | 集合元素 | $(":text") |
:password | 选取所有的密码框 | 集合元素 | $(":password") |
:radio | 选取所有的单选框 | 集合元素 | $(":radio") |
:checkbox | 选取所有的多选框 | 集合元素 | $(":checkbox") |
:submit | 选取所有的提交按钮 | 集合元素 | $(":submit") |
:image | 选取所有的图像按钮 | 集合元素 | $(":image") |
:reset | 选取所有的重置按钮 | 集合元素 | $(":reset") |
:button | 选取所有的按钮 | 集合元素 | $(":button") |
:file | 选取所有的上传域 | 集合元素 | $(":file") |
:hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden") |
相关推荐
本文将深入探讨JQ中的层次选择器,这是一种强大的工具,帮助开发者快速定位页面上的特定元素。 层次选择器是jQuery的核心功能之一,它允许我们根据元素在HTML文档结构中的位置来选取元素。下面我们将详细讲解几种...
本文将深入探讨"JQ内容过滤选择器"这一关键知识点,它是jQuery选择器体系中的一个重要组成部分,用于从DOM树中筛选出符合特定条件的元素。 一、JQ内容过滤选择器概述 内容过滤选择器允许我们根据元素内部的文本或...
本文将深入探讨“JQ子元素过滤选择器”,这是一个强大的功能,可以帮助开发者精确地定位到DOM树中的特定子元素,进而进行进一步的操作。通过学习和掌握这些选择器,可以提高开发效率,使代码更加简洁易读。 首先,...
**jQuery 属性选择器详解** 在前端开发中,jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作,其中包括选择元素。属性选择器是 jQuery 提供的一种高级选择器,用于根据元素的属性及其值来定位和操作...
**jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...
在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**: - `#id`:通过ID选择器选取具有特定ID的元素...
"JQ选择时间插件"就是这样一个工具,它专注于时间选择的便捷性和灵活性,特别适合用于表单输入或者日程管理等场景。这个插件名为laydate,是一个基于jQuery的轻量级组件,它提供了丰富的选择类型和强大的自定义能力...
"jq时间选择器"是指利用jQuery实现的一个功能,允许用户在网页上方便地选取日期或时间。这个功能在网页表单、日程安排、预订系统等场景中非常常见。 jQuery时间选择器通常基于插件实现,例如jQuery UI中的...
jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...
1. jQuery的选择器:jQuery提供了丰富的选择器用于选取DOM元素,如ID选择器(#id)、类选择器(.class)和标签选择器(input)等,这些选择器在表单验证中用于定位需要验证的输入字段。 2. DOM操作:jQuery提供了`.val()`...
省市县(区)三级选择, 含UI, 可用与移动端web开发 ----------------构造函数--------------------- fnBdAdCode({ test:false,//开启测试输出 depth:3, //选择级别,1 省, 2省市, >=3省市县(区) fn:function(name,...
"jq高校联动下拉选择器"是一个专门针对这种情况设计的解决方案,它利用JavaScript库jQuery(简称jq)来实现高效、便捷的交互体验。这个工具集成了全国省市大学的数据,为用户提供了一种方便的方式来选择他们所在的...
例如,在一个国家/地区选择器之后,可能会有一个相应的城市选择器,城市列表根据之前选择的国家动态加载。级联选择器提高了数据输入的效率,减少了用户输入的复杂性,同时也能够有效地管理大量数据。 自定义HTML...
本文将深入探讨“JQ表单对象属性过滤选择器”的概念,以及如何在实际开发中有效地利用它们。 一、jQuery选择器概述 jQuery选择器是其强大功能的核心之一,它允许开发者通过简洁的语法来选取DOM元素。选择器分为基本...
本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...
【基于jQuery实现的地址选择器】是一种常用的前端交互组件,常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式,展示省、市、区、乡镇、社区等多级行政区域,使得用户能够方便快捷...
在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...
综上所述,这个“jq垂直水平翻转效果”涉及到jQuery的选择器、事件处理、CSS3的`transform`属性以及jQuery插件的应用。掌握这些知识点有助于提升网页交互设计的能力,为用户提供更加生动和有趣的视觉体验。
1. **日期选择器的基本功能**: - **日期选择**:用户可以选择特定的日期,例如生日或截止日期。 - **时间选择**:除了日期,还可以选择具体的时间,如会议的开始和结束时间。 - **星期选择**:允许用户选择一周...
### jQuery选择器速查表知识点 jQuery选择器是jQuery库中用于选取HTML元素的强大工具。通过不同的选择器,我们可以轻松地选中页面中的元素并进行操作。本速查表将介绍几种不同类型的选择器,以供查询和参考。 ####...