jQuery选择器应该是学习jQuery的最基本的知识了,下面介绍一下各个类型的选择器的怎么写。
1、基本选择器:这是最常用的选择器
#id:根基给定的id匹配一个元素
.class:根据类名匹配元素
element:直接写出标签名,根据给定的元素名匹配元素
*:通配符
selector1,selector2,...,selectorN:将每一个选择器匹配的元素合并后一起返回
2、层次选择器:根据层次之间的特定关系来获取元素
$("ancestor descendant"):选取ancestor元素里的所有descendant
后代元素
$("parent>child"):选取parent元素下的child
(子)元素
$("pre+next"):选取紧接在pre后的next
(下一个)元素
$("prev~siblings"):选取prev元素之后的
所有siblings
(同辈)元素
3、过滤选择器:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤
基本过滤选择器:
:first :选择第一元素
:last:最后一个元素
:not(selector):去除所有与给定选择器匹配的元素
:even:偶数
:odd:奇数
:eq(index):选取索引等于index的元素(index从0开始)
:gt(index):索引大于index
:lt(index):索引小于index
:hender:选取所有标题元素
:animated:选取当前正在执行动画的元素
:focus:选取当前获取焦点的元素
内容过滤选择器:
:contains(text):选取含有文本内容为“text”的元素
:empty:选取不包含子元素或者文本的空元素
:has(selector):选取含有选择器所匹配的元素的元素
:parent:选取含有子元素或者文本的元素
可见性过滤选择器:
:hidden:选取所有不可见的元素
:visible:选取所有可见的元素
属性过滤选取器:
[attribute]:选取拥有此属性的元素
[attribute=value]:属性值为value的元素
[attribute!=value]:属性值不等于value的元素
[attribute^=value]:属性值以value开头的元素
[attribute$=value]:属性值以value结尾的元素
[attribute*=value]:属性值含有value的元素
[attribute|=value]:属性等于给定字符串或以该字符串为前缀的元素(如果为前缀的话,该字符串之后要有“-”连字符)
[attribute~=value]:属性用空格分隔的值中包含有一个给定值的元素
[attribute1][attribute2][attributeN]:几个条件同时符合的元素
子元素过滤选择器:
:nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)
:first-child:父元素中第一个子元素
:last-child:父元素中最后一个子元素
:only-child:如果某个元素是它父元素的唯一子类将会匹配
表单对象属性过滤器:
:enabled:选取所有可用元素
:disabled:选取所有不可用元素
:checked:选取所有被选中的元素(单选框、复选框)
:select:选取所有被选中的选项元素(下拉列表)
4、表单选择器
:input:选取所有<input><textarea><select><button>元素
:text:所有单行文本框元素
:password:所有密码框
:radio:所有单选框
:checkbox:所有多选框
:submit:所有提交按钮
:image:所有图像按钮
:reset:所有重置按钮
:button:所有的按钮
:file:所有的上传域
:hidden:所有不可见元素
选择器中有好多前边都带有冒号,使用的时候千万注意是否要加空格,例如:
$("div :input") 指的是在div下的所有<input><textatea><select><button>元素
$("div:input") 指的是在div下的为input标签的元素
在jQuery中还有一些特使的字符,如$、[、{ 等,如果在选择器中没法识别应该用转译字符“\\”将其转译再使用。
选择器的灵活应用可以使代码干净整洁,掌握好选择器是一个开发人员的基本素质。大家一起努力啦!fighting!
分享到:
相关推荐
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...
本篇文章将深入探讨jQuery选择器的基础知识,包括其类型、用法和实际应用。 ### 1. 基本选择器 基本选择器包括ID选择器(#id)、类选择器(.class)和元素选择器(element)。例如: - `$("#myID")` 选择ID为...
### jQuery选择器大全详解 #### 引言 在前端开发领域,jQuery因其强大的功能和简洁的语法而备受青睐。选择器作为jQuery的核心组件之一,扮演着桥梁的角色,连接DOM操作与CSS选择。本文旨在深入解析jQuery提供的48...
在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。
**jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...
### jQuery选择器速查表知识点 jQuery选择器是jQuery库中用于选取HTML元素的强大工具。通过不同的选择器,我们可以轻松地选中页面中的元素并进行操作。本速查表将介绍几种不同类型的选择器,以供查询和参考。 ####...
可以创建一个方法,根据选择器类型进行处理,如: ```java private static NodeList selectById(Parser parser, String id) { NodeList nodes = new NodeList(); NodeFilter filter = new TagNameFilter("ID", ...
通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...
**jQuery选择器工具详解** jQuery库是JavaScript中最广泛使用的库之一,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery实验室的选择器工具”中,我们将深入探讨jQuery选择器的强大功能,它是...
而jQuery选择器是jQuery的核心部分之一,用于选择页面元素,以便我们可以对它们进行操作。这些选择器可以分成多个类别,包括基本选择器、层次选择器、过滤选择器等,下面将详细介绍。 基本选择器包括id选择器、...
动态选择器通常涉及以下几种类型: 1. **类选择器**: 使用`.`符号来选取具有特定CSS类的元素。例如,`$(".myClass")`将选取所有类名为`myClass`的元素。 2. **ID选择器**: 使用`#`符号来选取具有特定ID的元素。...
2. jQuery 选择器的类型 jQuery 选择器有多种类型,包括: * Id 选择器:通过元素的 Id 属性来选择元素,例如 $("#id")。 * 类选择器:通过元素的类名来选择元素,例如 $(".class")。 * 元素选择器:通过元素的...
JQuery选择器,xpath类型等的选择器
在本实例中,我们将探讨如何利用jQuery选择器在Visual Studio 2010环境下进行高效而精确的网页元素选取。jQuery的选择器是其强大功能的核心,它们基于CSS选择器,但提供了更丰富的功能。 首先,让我们了解jQuery的...
JQuery选择器是jQuery库中的核心功能之一,它极大地简化了JavaScript中对DOM元素的选取,使得开发者可以更高效地操作网页元素。本篇将详细阐述JQuery选择器的使用和原理。 一、基础选择器 JQuery的基础选择器包括ID...
下面,我们将深入探讨jQuery选择器的各种类型及其应用,帮助你构建坚实的基础。 #### 基本选择器:构建DOM操作的基石 1. **ID选择器**:用于选取具有特定ID的单个元素。例如: ```javascript $('#one').css('...
### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...
jQuery选择器是其强大之处,它们基于CSS选择器,但扩展了更多功能,允许更复杂的选取方式。以下是一些常见选择器: - **基本选择器**:`#id`(ID选择器)、`.class`(类选择器)、`tag`(标签选择器)和`*`(通用...
**jQuery选择器教程** 在Web开发中,jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理和动画制作。尤其在选择元素方面,jQuery提供了一系列高效且易用的选择器,使得开发者可以更方便地选取页面上...