Selectors and filters in jquery learning

Keywords: Attribute less

Basic selector

   Universal selector * all
   id selector
   Class selector.class
   Label selector label name
   Group selector one,.two union
   The intersection of compound selector div and one

Descendant or descendant selector

   Offspring selector > Direct child
   Descendant selectors spaces all descendants
   All descendant elements in body * body

Sibling Combinators

 Next sibling node+
  After that, all brothers~

Filter

 **Use after selector**
 **Basic filter**
         :first  First element, example:$('div:first');   body First of the elements div
         :last  Last element,column:$('div:last');  body Last of elements div
         :eq(index)  Index is index Of
         :lt(index)   Index less than index Of
         :gt(index)  Index greater than index Of
        :even       Even indexed
        :odd        With an odd index
        :not(selector/Filter)    Select not as selector/Filter
        :header Choice h1~h6 Here is the title $('div :header'); 
         div There is a space after it, which means choice div Of the descendant elements of h1~h6 Headline
          ,If there is no space, the selected one is div
  **Content filter**
        :contains(e)   $('Selector: contains(e)')  Text in selector contains e Of
        :empty   Select without text or child elements
        :paretn  Select the
        :has(selector)    Select with selector $('div:has("p")')
  **Visibility Filters **
        :hidden     Select elements that do not occupy screen space
            body Not occupying space in the body: display:none; input type="hidden"
       :visible    Select the elements that occupy the screen space  
              body The body is displayed on the page
                 visibility:hidden;    opacity:0;
 **Attribute filter**
       [attr]    Select the
       [attr=val]   The property name is selected and the property value is val Of
       [attr^=val]  Select a property with a property name and a property value to val initial
       [attr$=val]  Select a property with a property name and a property value to val Ending
       [attr*=val]   The property name is selected and the property value contains val Of
       [attr!=val]   No choice attr Attribute or have attr Property name but not equal to val Valued
**Offspring filter**
       div :first-child   Get every div The first son of the parent element
       div :last-child    Get every div The last son of the parent element
       div :nth-child(index)   Get the number of child nodes in each parent element  index Starting from 1
       div :only-child  Get the only child element in each parent element
       div :first-of-type Get the first element of each type in each parent element
       div :last-oftype Get the last element of each type in each parent element

Posted by kc5tvd on Mon, 30 Dec 2019 08:46:14 -0800