6--The selector in Jquery (basic filter selector)

The filter selector is mainly to filter out the required DOM elements through specific filter rules, and the selectors all start with ":".
According to different filter rules: filter selectors can be divided into basic filter, content filter, visibility filter, attribute filter and form object attribute filter selector.

1. :first
   Usage: $("tr:first"); Return value is a collection of single elements
   Description: Match the first element found
   Example: Change the background color of the first div element to #0000FF

$(function(){
    
    
    $("div:first").css("backgroundColor","#0000FF");
});

2. :last
   Usage: $("tr:last") Return value collection element
   Description: Match the last element found. Corresponds to :first.
   Example: Change the background color of the last div element to #0000FF

$(function(){
    
    
    $("div:last").css("backgroundColor","#0000FF");
});

3. :not(selector)
   Usage: $("input:not(:checked)") Return value collection element
   description: Remove all elements that match the given selector. A bit similar to "not", meaning that the input is not selected (When input type=”checkbox”).
   Example: Change the background color of all div elements whose class is not one to #0000FF

$(function(){
    
    
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });

4. :even
   Usage: $("tr:even") Return value collection element
   description: Match all elements whose index value is an even number, counting from 0. js arrays are counting from 0. For example, to select a row in the table , Because it starts counting from 0, the first tr in the table is an even number 0.
   Example: Change the background color of the div element with an even number to #0000FF

$(function(){
    
    
    $("div:even").css("backgroundColor","#0000FF");
});

5. : odd
   Usage: $("tr:odd") Return value collection element
   Description: Match all elements with odd index value, corresponding to :even, counting from 0.
   Example: Change the background color of div element with odd index value For #0000FF

$(function(){
    
    
    $("div:odd").css("backgroundColor","#0000FF");
});

6. :eq(index)
   Usage: $("tr:eq(0)") Return value collection element
   description: Match an element with a given index value. Eq(0) is to get the first tr element. The index in parentheses is the index Value, not the number of element arrangements.
   Example: Change the background color of the div element whose index value is equal to 3 to #0000FF

$(function(){
    
    
    $("div:eq(3)").css("backgroundColor","#0000FF");
});

7. :gt(index)
   Usage: $("tr:gt(0)") Return value collection element
   Description: Match all elements greater than the given index value.
   Example: Change the background color of the div element whose index value is greater than 3 to # 0000FF

$(function(){
    
    
    $("div:gt(3)").css("backgroundColor","#0000FF");
});

8. :lt(index)
   Usage: $("tr:lt(2)") Return value collection element
   Description: Match all elements less than the given index value.
   Example: Change the background color of the div element whose index value is less than 3 to # 0000FF

$(function(){
    
    
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

The content of the entire selector_filter.js file

/**
 * 基本过滤选择器
 */
/*实例：改变第一个 div 元素的背景色为 #0000FFs*/
/*
$(function(){
    $("div:first").css("backgroundColor","#0000FF");
});
*/
/*实例：改变最后一个 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:last").css("backgroundColor","#0000FF");
});
*/
/*实例：改变class不为 one 的所有 div 元素的背景色为 #0000FF*/
/*
 $(function(){
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });
 */
/* 实例：改变索引值为偶数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:even").css("backgroundColor","#0000FF");
});*/
/*实例：改变索引值为奇数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:odd").css("backgroundColor","#0000FF");
});
*/
/*实例：改变索引值为等于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:eq(3)").css("backgroundColor","#0000FF");
});*/

/*实例：改变索引值为大于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:gt(3)").css("backgroundColor","#0000FF");
});*/
/*实例：改变索引值为小于 3 的 div 元素的背景色为 #0000FF*/
$(function(){
    
    
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

Originality is not easy, and I hope you can give me some suggestions if there are mistakes. Move your finger to give a thumbs up.