选择器
1. 基本选择器
#id —— 根据指定的id匹配一个元素
element —— 根据“元素名”匹配元素
.class —— 根据指定的“类名”匹配元素
selector1,selector2,selector3... —— 组合选择器,为并集关系
* —— 通用选择器, 匹配所有元素
2. 层次选择器
$('ancestor descendant') —— 匹配ancestor下的所有descendant元素, 包括子孙节点
$('parent > child') —— 匹配parent下的所有child元素, 注意child为parent的直接子节点, 即不包含子孙节点
$('prev + next') —— 匹配pre元素后的next元素
$('prev~siblings') —— 匹配prev元素后的所有siblings元素
3. 基本过滤选择器(针对一个集合的操作,可以把这个集合想象成ArrayList)
:first —— 选择第一个元素, 如$('div:first'), 选择第一个div元素
:last —— 选择最后一个元素
:not(selector) —— 过滤掉所有与给定selector匹配的元素,如$('input:not(.myClass)')选取class不是myClass的input元素
:even —— 选取索引是偶数的所有元素, 索引从0开始
:odd —— 选取索引是奇数的所有元素
:eq(index) —— 选取索引是index的元素
:gt(index) —— 选取索引大于index的所有元素
:header —— 选取所有的标题元素,如h1,h2,h3等
:animated —— 选取当前正在进行动画的的所有元素
4. 子元素过滤器(父元素的第几个孩子,故在使用时都会以父元素作为上下文)
:nth-child —— 选取父元素的第几个孩子, 注意索引下标从1开始, 而:eq(index)是从0开始的
:nth-child(even) 选取父元素下索引值是偶数的子元素
:nth-child(odd) 选取父元素下索引值是奇数的子元素
:nth-child(index) 选取父元素下索引值为index的子元素
:nth-child(3n) 选取父元素下索引值是3的倍数的元素(n从0开始)
:nth-child(3n+1) 选取父元素下索引值是3n+1的元素 (n从0开始)
:first-child —— 父元素下的第一个孩子
:last-child —— 父元素下的最后一个孩子
:only-child —— 父元素下的唯一孩子(选中独生子)
5. 内容过滤选择器
:contains(text) —— 选取含有文本内容为"text"的元素
:empty —— 选取不包含子元素或文本的空元素
:has(selector) —— 选取含有选择器所匹配的元素的元素,如$('div:has(p)')选取含有p元素的所有div元素
:parent —— 选取含有子元素或文本的元素,如$('div:parent')选取拥有子元素或文本元素的所有div元素
6. 可见性过滤选择器
:hidden —— 选取所有不可见元素,包括hidden, display:none,visibility:hidden元素,若只想选择input,则可用input:hidden
:visible —— 选取所有可见元素
7. 属性过滤选择器
[attribute] —— 选取拥有此属性的元素
[attribute=value] —— 选取属性值为value的元素
[attribute!=value] —— 选取属性值不等于value的元素
[attribute^=value] —— 选取属性值以value开头的元素
[attribute$=value] —— 选取属性值以vlue结尾的元素
[attribute*=value] —— 选取属性值包含value的元素
[selector1][selector2][selector3] —— 复合属性选择器,交集关系, 如$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结尾的div元素
8. 表单对象属性过滤器
:enabled —— 选取所有可用元素
:disabled —— 选取所有不可用元素
:checked —— 选取所有被选中的元素(单选和复选框)
:selected —— 选取所有被选中的select元素
9. 表单选择器
:input —— 选取所有的input,textarea,select,button元素
:text —— 选取所有的单行文本
:password —— 选取所有的密码框
:radio —— 选取所有的单选按钮
:checkbox —— 选取所有的复选框
:submit —— 选取所有的提交按钮
:image —— 选取所有的图像按钮
:reset —— 选取所有的重置按钮
:button —— 选取所有的按钮
:file —— 选取所有的上传文件域
:hidden —— 选取所拥有不可见元素
分享到:
相关推荐
在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**:主要包括`$()`,用于选取一个或多个DOM元素...
本文实例讲述了JQuery常用选择器功能与用法。分享给大家供大家参考,具体如下: JQuery基础回顾 今天对JQuery内容进行了回顾,下面进行一些总结: JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到...
本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下 1、jQuery:(使用jQuery一定标明我们使用的版本号) 它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题) 2、...
以下是关于 jQuery 常用选择器分类及其用法的详细说明: ### 一、基本选择器 1. **ID 选择器**:使用 `#` 符号指定元素的 ID。例如,`$("#myID")` 会选取 ID 为 "myID" 的元素。 2. **Class 选择器**:使用 `.` ...
jQuery城市选择器是网页表单设计中常用的一种组件,通过合理的数据结构和事件驱动,实现了级联选择的效果。理解其工作原理,并结合实际项目需求进行优化,能有效提升网站的用户体验和交互性。随着前端技术的不断发展...
jQuery颜色选择器是一种在网页开发中常用的前端工具,它极大地简化了用户在网页上选取颜色的过程。这个插件,称为colpick,是基于jQuery库构建的,为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...
jQuery颜色选择器是一种在网页开发中常用的交互组件,它允许用户通过图形化界面选取颜色,通常集成在HTML表单中,用于输入颜色值。在网页设计中,这种选择器为用户提供了一种直观、便捷的方式来设定元素背景色、字...
【基于jQuery实现的地址选择器】是一种常用的前端交互组件,常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式,展示省、市、区、乡镇、社区等多级行政区域,使得用户能够方便快捷...
其中,颜色选择器作为一个常用的组件,能让用户方便地选取所需的颜色,提升用户体验。本文将深入探讨一款优秀的jQuery颜色选择器插件——colpick,它以其简洁的界面、丰富的功能和良好的可定制性,深受开发者喜爱。 ...
基本选择器是jQuery中最常用的,它们通过元素的id、class和标签名来选取元素。 - **id选择器**:通过元素的id来选取,用`#`前缀标识。例如`$('#testID')`选取id为`testID`的元素。 - **类选择器**:通过元素的class...
基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与返回值:** 1. **根据给定的ID匹配一个元素** - **选择器:** `#...
jQuery中的常用选择器
jQuery选择器是jQuery库的核心功能之一,用于高效地定位并操作网页中的DOM元素。通过使用jQuery选择器,开发者可以轻松地选取需要的HTML元素,并执行一系列的DOM操作,如添加样式、修改内容或绑定事件等。 1. **...
这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...
本教程将基于提供的"jquery一些案列和一些选择器"来深入理解jQuery的核心概念和常用选择器。 1. **jQuery引入** 在HTML文档中,可以通过在`<head>`标签内添加`<script>`标签来引入jQuery库。通常,我们从CDN(内容...
jQuery通过选择器语法大大简化了DOM元素的选取,使得开发者能够更快速地定位到页面上的特定元素。 接下来,我们逐一分析这些插件: 1. **jQuery UI Dialog 插件**:Dialog插件是jQuery UI库的一部分,它允许开发者...
例如,通过`$()`选择器可以轻松选取HTML元素,`$(element).click(function() {...})`可以绑定点击事件,`$(element).hide()`和`$(element).show()`用于元素的显示和隐藏,而`$(element).animate()`则实现了平滑的...