jquery选择器之基本过滤选择器详解


jQuery的基本过滤选择器允许你根据特定的条件来选择元素。这些选择器提供了一种快速而灵活的方式来定位页面上的元素。下面是对一些常用基本过滤选择器的详细解释:

1. `:first` - 选择每个元素集合中的第一个元素。


   $("li:first").css("color", "red"); // 将第一个<li>元素的文本颜色设置为红色
   

2. `:last` - 选择每个元素集合中的最后一个元素。


   $("li:last").css("color", "blue"); // 将最后一个<li>元素的文本颜色设置为蓝色
   

3. `:even` - 选择索引为偶数的元素(索引从0开始,因此0和2是偶数)。


   $("li:even").css("background-color", "lightgrey"); // 将索引为偶数的<li>元素的背景色设置为浅灰色
   

4. `:odd` - 选择索引为奇数的元素。


   $("li:odd").css("background-color", "lightblue"); // 将索引为奇数的<li>元素的背景色设置为浅蓝色
   

5. `:eq(index)` - 选择索引等于`index`的元素(索引从0开始)。


   $("li:eq(2)").css("font-weight", "bold"); // 将索引为2的<li>元素的字体加粗
   

6. `:gt(index)` - 选择索引大于`index`的元素。


   $("li:gt(1)").hide(); // 隐藏索引大于1的所有<li>元素
   

7. `:lt(index)` - 选择索引小于`index`的元素。


   $("li:lt(2)").addClass("highlight"); // 为索引小于2的<li>元素添加"highlight"类
   

8. `:not(selector)` - 选择不匹配`selector`的元素。


   $("li:not(.hidden)").show(); // 显示所有不包含"hidden"类的<li>元素
   

9. `:has(selector)` - 选择包含至少一个匹配`selector`的元素的元素。


   $("ul:has(li.active)").css("border", "2px solid green"); // 为包含至少一个.active类的<li>元素的<ul>元素添加绿色边框
   

这些基本过滤选择器是jQuery中非常强大且常用的工具,可以帮助你更精确地选择页面上的元素。