不是基于最新版本,有待更新。
优势:
1.写法简洁
2.支持css1到css3
3.完善的处理机制。如避免不必要的错误和空的判断
元素查找方法
1.id选择器: $("#myELement")
2.element选择器(遍历html元素): $("div")
3.class选择器: $(".myClass")
4. * 选择器(遍历所有元素): $("*")
5.并列选择器: 例如:将p元素和div元素的margin设为0 => $('p, div').css('margin', '0');
层叠选择器:
1.$("div span") 选择所有的div元素中的span元素
2.parent > child(直系子元素): $('div > span').css('color', '#FF0000');
3.prev + next(下一个兄弟元素,等同于next()方法):
$('.item + div') => 选取class为item的下一个div兄弟元素
4.prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
例如: $('.inside ~ div') => 选取class为inside之后的所有div兄弟元素
基本过滤选择器:
选择器 | 描述 | 返回 | 实例 |
:first | 选取第一个元素 | 单个元素 | $("tr:first") |
:last | 选取最后一个元素 | 单个元素 | $("tr:last") |
:not(selector) | 去除所有给定选择匹配的元素 | 集合元素 | $(input:not(.myClass)) |
:even | 选取索引是偶数的所有元素 | 集合元素 | $("tr:even") |
:odd | 选取索引是奇数的所有元素 | 集合元素 | $("tr:odd") |
eq:(index) | 选取索引等于index的元素 | 集合元素 | $("td:eq(1)") |
:gt(index) | 选取索引大于index的元素 | 集合元素 | $("td:gt(4)") |
:lt(index) | 选取索引小于index的元素 | 集合元素 | $("td:lt(1)") |
:header | 选取所有的标题元素 | 集合元素 | $(":header") |
:animated | 选择当前正在执行动画的所有元素 | 集合元素 | $("div:animated") |
:focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus") |
内容过滤选择器:
选择器 | 描述 | 返回 | 实例 |
:contains(text) |
选取含有文本内容为text的元素 |
集合元素 | $("div:contains('ss')") |
:empty | 选取不包含子元素或者空元素 | 集合元素 | $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)") 选择所有含有p标签的div元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 | $("td:parent") 选择所有的以td为父节点的元素数组 |
可视化过滤选择器:
选择器 | 描述 | 返回 | 实例 |
:hidden | 选取所有不可见的元素 | 集合元素 | $("div:hidden") 选择所有的被hidden的div元素 |
:visible | 选取所有可见的元素 | 集合元素 | $("div:visible") 选择所有的可视化的div元素 |
属性过滤选择器:
选择器 | 描述 | 返回 | 实例 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]") 选择所有含有id属性的div元素 |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 |
[attribute!=value] | 选取属性的值不为value的元素 | 集合元素 | $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 |
[attribute^=value] | 选取属性的值以value开头的元素 | 集合元素 | $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 |
[attribute$=value] | 选取属性的值以value结尾的元素 | 集合元素 | $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("input[name*='man']") 选择所有的name属性包含'news'的input元素 |
[attribute|=value] | 选取属性等于给定字符串或以改字符串为前缀(字符串后紧跟链接符'-')的元素 | 集合元素 | |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | |
[attribute1][attribute2][atrributeN] | 用属性选择器合并一个复合属性选择器 | 集合元素 | $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 |
子元素过滤选择器:
选择器 | 描述 | 返回 | 实例 |
:nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素。index从1算起 | 集合元素 | $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") |
:first-child | 选取每个父元素的第一个元素 | 集合元素 | $("div span:first-child") 返回所有的div元素的第一个子节点的数组 |
:last-child | 选取每个父元素的最后一个元素 | 集合元素 | $("div span:last-child") 返回所有的div元素的最后一个节点的数组 |
:only-child | 如果某个元素是它父元素中唯一的子元素,那么它将会被匹配 | 集合元素 | $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 |
表单元素选择器:
选择器 | 描述 | 返回 | 实例 |
:input | 选择所有的text input元素 | 集合元素 | |
:text | 选择所有的表单输入元素 | 集合元素 | |
:password | 选择所有的password input元素 | 集合元素 | |
:radio | 选择所有的radio input元素 | 集合元素 | |
:checkbox | 选择所有的checkbox input元素 | 集合元素 | |
:submit | 选择所有的submit input元素 | 集合元素 | |
:image | 选择所有的image input元素 | 集合元素 | |
:reset | 选择所有的reset input元素 | 集合元素 | |
:button | 选择所有的button input元素 | 集合元素 | |
:file | 选择所有的file input元素 | 集合元素 | |
:hidden | 选择所有类型为hidden的input元素或表单的隐藏域 | 集合元素 |
表单元素过滤选择器:
选择器 | 描述 | 返回 | 实例 |
:enabled | 选择所有的可操作的表单元素 | 集合元素 | |
:disabled | 选择所有的不可操作的表单元素 | 集合元素 | |
:checked | 选择所有的被checked的表单元素 | 集合元素 | $("input :checked") |
:selected | 选取所有被选中的选项元素 | 集合元素 | $("select option:selected") 选择所有的select 的子元素中被selected的元素 |
其他选择器
待补充
注意事项:
1.选择器中含有“。”、“#”、“(”、“]”等特殊字符
转义: 例如: $("#id=\\#b")
2.属性选择器@符号问题
jquery1.3.1版本中放弃了1.1.0版本遗留下来的@符号
3. 选择器中含有空格的注意事项
待补充
css2 介绍参考:http://www.w3.org/TR/CSS2/selector.html
参考:http://www.cnblogs.com/hulang/archive/2011/01/12/1933771.html
相关推荐
**jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...
在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...
【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中,特别是涉及到用户输入时间的场景,如预订、会议安排等,拥有一个直观易用的时间选择器可以极大提升...
在提供的压缩包文件"lay-picker-master"中,我们可以推测这是一个基于jQuery的移动端选择器库,名为"lay-picker"。这个库可能包含了实现上述功能的源代码、示例、文档和其他资源。使用这个库,开发者可以快速集成到...
jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和jQuery库,提供了一种便捷、高效的交互方式。本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量...
在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。
3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...
jQuery城市选择器是一款基于JavaScript库jQuery的插件,其主要目的是简化用户在网页上进行城市选择的过程。它支持中文和拼音输入查询,提供标签页展示,极大地提升了用户体验。在"abcde"标签页的展示方式下,用户...
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...
首先,理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...
使用这个插件,你需要在HTML文件中引用jQuery库、ColorPicker插件的JS和CSS文件,然后在适当的地方通过jQuery选择器调用插件,并根据需要配置选项。 例如: ```html <!DOCTYPE html> <title>jQuery颜色选择器...
本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...
对于初学者,这是一个极好的学习资源,通过研究这个插件,可以加深对jQuery选择器的理解,并掌握编写高效JavaScript代码的技巧。而对于经验丰富的开发者,它提供了一个有趣的挑战,去挖掘和分析代码中的创新之处。
1. jQuery选择器和DOM操作:如何使用jQuery选择特定的HTML元素,如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件处理:掌握`.on()`, `.click()`, `.change()`等事件监听器的...
6. **使用示例**:在HTML中,你只需要创建一个`<div>`或其他元素作为颜色选择器的触发器,并通过jQuery选择器和`.colpick()`方法初始化插件。例如: ```javascript $('#colorPicker').colpick({ layout: 'hex', ...
jQuery,一个流行的JavaScript库,提供了许多插件来简化开发人员的工作,其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能,以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...
**jQuery日期选择器插件**是一种广泛应用于网页开发中的组件,它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验,尤其适用于需要用户输入生日、预约日期或者截止日期...
jquery 城市选择器代码
然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...