JQuery选择器、过滤器大整理

1. 选择器

1.1 基础选择器

JQuery的基础选择器大致分为以下几种：

• 元素选择器（Element Selector）：通过标签名来选择元素，例如 $('button') 选择页面中所有的button元素。
• ID选择器（ID Selector）：通过元素的id属性来选择元素，例如 $('#myId') 选择id为myId的元素。
• 类选择器（Class Selector）：通过元素的class属性来选择元素，例如 $('.myClass') 选择所有class属性值为myClass的元素。
• 属性选择器（Attribute Selector）：通过元素的属性来选择元素，例如 $('[href]') 选择所有带有href属性的元素。
• 后代选择器（Descendant Selector）：通过元素的父子关系来选择元素，例如 $('ul li') 选择ul元素下的所有li元素。

1.2 层次选择器

JQuery还提供了一些层次选择器，用来选择元素之间特定的关系，例如：

• 子元素选择器（Child Selector）：通过元素的直接父子关系来选择元素，例如 $('ul > li') 选择所有ul元素下作为直接子元素的li元素。
• 相邻兄弟选择器（Adjacent Sibling Selector）：通过元素之间相邻的兄弟关系来选择元素，例如 $('h1 + p') 选择所有h1元素之后相邻的p元素。
• 兄弟选择器（General Sibling Selector）：通过元素之间的兄弟关系来选择元素，例如 $('h1 ~ p') 选择所有h1元素之后的兄弟p元素。

1.3 过滤器

除了基础选择器和层次选择器，JQuery还提供了各种各样的过滤器。

• :first - 选择第一个元素，例如 $('div:first') 选择页面中第一个div元素。
• :last - 选择最后一个元素，例如 $('div:last') 选择页面中最后一个div元素。
• :even - 选择偶数位置的元素，例如 $('li:even') 选择所有偶数位置的li元素。
• :odd - 选择奇数位置的元素，例如 $('li:odd') 选择所有奇数位置的li元素。
• :eq(index) - 选择第index个元素，例如 $('ul li:eq(2)') 选择第三个li元素。
• :lt(index) - 选择小于第index个元素的所有元素，例如 $('ul li:lt(2)') 选择前两个li元素。
• :gt(index) - 选择大于第index个元素的所有元素，例如 $('ul li:gt(2)') 选择第三个li元素之后的所有li元素。

2. 示例

以下是两个示例，帮助理解JQuery选择器和过滤器的使用：

1. 给页面中的input元素添加一个淡出动画。可以使用基础选择器和过滤器来完成：

javascript
$('input[type="text"]:visible').fadeOut();

上述代码将选择页面中所有类型为text且可见的input元素，并对它们应用一个淡出动画。

1. 当页面上的checkbox被选中时，在div#myDiv中添加一个class属性。可以使用属性选择器和事件监听器来完成：

javascript
$('input[type="checkbox"]').on('change', function() {
if ($(this).is(':checked')) {
$('#myDiv').addClass('selected');
} else {
$('#myDiv').removeClass('selected');
}
});

上述代码将选择页面上所有类型为checkbox的input元素，并为它们的change事件添加一个监听器。当checkbox被选中时，代码会为id为myDiv的元素添加一个class属性；如果checkbox被取消选中，则移除class属性。