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