jQuery复习——选择器

在jQuery中，选择器是用来选择DOM元素的。jQuery提供了多种选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器等。

以下是一些常用的jQuery选择器示例代码：

1. 基本选择器：

// 选择id为"myId"的元素
$('#myId');
 
// 选择所有的p元素
$('p');
 
// 选择class为"myClass"的所有元素
$('.myClass');
 
// 选择所有的元素
$('*');

2. 层次选择器：

// 选择所有的子元素
$('parent > child');
 
// 选择所有的后代元素
$('ancestor descendant');
 
// 选择下一个兄弟元素
$('prev + next');
 
// 选择之后所有的兄弟元素
$('prev ~ siblings');

3. 过滤选择器：

// 选择第一个元素
$('selector:first');
 
// 选择最后一个元素
$('selector:last');
 
// 选择非空元素
$('selector:not(.exclude)');
 
// 选择索引为index的元素
$('selector:eq(index)');
 
// 选择大于index的元素
$('selector:gt(index)');
 
// 选择小于index的元素
$('selector:lt(index)');
 
// 选择所有可见的元素
$('selector:visible');
 
// 选择所有隐藏的元素
$('selector:hidden');

4. 表单选择器：

// 选择所有的单选按钮
$('input:radio');
 
// 选择所有的复选框
$('input:checkbox');
 
// 选择所有的文本框
$('input:text');
 
// 选择所有被选中的option元素
$('option:selected');

5. 使用属性选择器：

// 选择具有特定属性的元素
$('selector[attribute]');
 
// 选择具有特定属性值的元素
$('selector[attribute=value]');
 
// 选择具有特定属性值的元素，该值不区分大小写
$('selector[attribute=value] i');
 
// 选择属性值开始于特定值的元素
$('selector[attribute^=value]');
 
// 选择属性值结束于特定值的元素
$('selector[attribute$=value]');
 
// 选择属性值包含特定子串的元素
$('selector[attribute*=value]');

6. 使用伪类选择器：

// 选择所有的:link元素
$('selector:link');
 
// 选择所有的:visited元素
$('selector:visited');
 
// 选择所有的:active元素
$('selector:active');
 
// 选择所有的:hover元素
$('selector:hover');
 
// 选择所有的:focus元素
$('selector:focus');
 
// 选择所有的:animated元素
$('selector:animated');

7. 使用选择器组：

// 用逗号分隔多个选择器
$('selector1, selector2, selector3');

8. 使用自定义选择器：

// 使用jQuery.extend()添加自定义选择器
$.extend($.expr[':'], {
    custom: function(element, index, meta, stack) {
        // 自定义选择逻辑
    }
});
 
// 使用自定义选择器
$('selec