JQuery选择器详解与示例

"这篇文档是关于JQuery选择器的详细说明，主要涵盖了1.3.2版本中的各种选择器用法，包括基本选择器、属性选择器、子元素选择器等，并通过实例代码展示了如何使用这些选择器进行元素操作。" 在JQuery库中，选择器是一个强大的工具，用于选取HTML文档中的特定元素。JQuery 1.3.2版本提供了丰富的选择器功能，简化了DOM操作。以下是对JQuery选择器的详细解析： 1. **基础选择器 (Basics)** - **#id**：通过元素的ID选择器，如`$("#divId")`将选取具有指定ID的唯一元素。 - **.class**：根据元素的class选择，如`$(".some-class")`选取所有class为some-class的元素。 - **tagname**：按元素标签名选择，如`$("p")`选取所有段落元素。 2. **更变通的实例** - 子元素选择器：`$("#selected-plays > li")`选取id为selected-plays元素下的所有li子元素。 - 属性选择器：无需使用`@`前缀，直接使用`$('a[title]')`选取所有有title属性的链接。例如，`$('a[href^="mailto:"]').addClass('mailto')`将所有href属性以"mailto:"开头的链接添加一个'mailto'类。 3. **属性选择器** - **属性值以...开头**：`$('a[href^="mailto:"]')`选取href属性以"mailto:"开头的链接。 - **属性值以...结尾**：`$('a[href$=".pdf"]')`选取href属性以".pdf"结尾的链接。 - **属性值包含...**：`$('a[href*="mysite.com"]')`选取href属性中包含"mysite.com"的链接。 4. **jQuery自定义选择器** - **:eq(index)**：选取索引为index的元素，如`$('div.horizontal:eq(1)')`选取所有水平排列的div中的第二个元素。 - **:contains(text)**：选取包含指定文本的元素，如`$('table td:contains("Henry")').addClass('highlight')`将包含"Henry"的表格单元格高亮。 5. **其他选择器** - **:first**：选取第一个元素，如`$('div:first')`选取第一个div。 - **:last**：选取最后一个元素，如`$('p:last')`选取最后一个段落。 - **:not(selector)**：排除符合选择器的元素，如`$('input:not(:checked)')`选取未被选中的输入元素。 - **:gt(index)**：选取索引大于index的元素，如`$('li:gt(2)')`选取所有索引大于2的li元素。 - **:lt(index)**：选取索引小于index的元素，如`$('div:lt(3)')`选取前三个div。 JQuery的选择器体系极大地增强了对DOM的操作效率，使得开发者能更轻松地选取和操作页面上的元素，实现丰富的动态效果和交互。通过熟练掌握这些选择器，可以编写出更加高效和简洁的JQuery代码。