JS Get node:
var chils= s.childnodes; Get all the sub-nodes of S var Par=s.parentnode; Get the parent node of s var ns=s.nextsbiling; Get s the next sibling node Var ps=s.previoussbiling; Get S on the previous sibling node Var fc=s.firstchild; Get the first child node of S var lc=s.lastchile; Get the last child node of s
CSS selector:
Base Selector
* |
Universal element selector that matches any element of the page (which also determines how seldom we use it) |
#id |
An ID selector that matches an element of a specific ID |
. class |
Class selector, matching class contains (not equals) elements of a particular class |
Element |
Tag Selector |
Combo Selector
multi-element selector, with ", delimited, matching element E or element F |
descendant selector, separated by spaces, matches all the descendants of the E element (not just child elements, child elements recursively down) element F |
e>f |
child element selector, separated by" > ", matching all of the E elements Direct child element |
e+f |
direct adjacent selector, after matching E element adjacent sibling element F |
e~f |
normal neighbor selector (brother selector), matching the sibling element F (whether directly adjacent or not) of the E element after |
TD valign= "Top" width= ">.class1.class2"
This is also a bar, no name, Matches the element in the class name that contains both Class1 and Class2 |
Property Selector
E[ATTR] |
Matches all elements with attribute attr, Div[id] can fetch all div with id attribute |
E[attr=value] |
Match attribute attr value to element, Div[id=test], match id=test div |
E[attr~=value] |
Matches all attributes attr elements with multiple spaces separated, one of which equals value |
E[attr|=value] |
Matches all ATT attributes with multiple "-" separators, one of which values begin with value, primarily for the lang attribute, such as "en", "us-en" |
E[attr ^=value] |
The element that matches the value of the attribute attr that begins with value |
E[attr $=value] |
The element that matches the value of the Attr property to the end |
E[attr *=value] |
The value of the match attribute attr contains the element of value |
Pseudo-Class selector (CSS tool. All evils incompatible)
E:first-child |
Matches the first child element of element E |
E:link |
Match all the links that have not been clicked |
e:visited |
Match all clicked Links |
E:active |
Matches the E element on which the mouse has been pressed and not released |
E:hover |
Match the E element on which the mouse hovers |
E:focus |
Matches the E element that obtains the current focus |
E:lang (c) |
The e element that matches the lang attribute equals C |
E:enabled |
Match the elements available in the form |
E:disabled |
Match disabled elements in a form |
E:checked |
Matches the selected radio or checkbox element in the form |
E::selection |
Matches the element currently selected by the user |
E:root |
Matches the root element of the document, which is the HTML element for the HTML document |
E:nth-child (N) |
Matches the nth child element of its parent element , the first number is 1 |
E:nth-last-child (N) |
Matches the reciprocal nth child element of its parent element, the first number is 1 |
E:nth-of-type (N) |
Similar to: Nth-child (), but only matches elements that use the same label |
E:nth-last-of-type (N) |
Similar to: Nth-last-child (), but only matches elements that use the same label |
E:last-child |
Matches the last child element of the parent element, equivalent to: Nth-last-child (1) |
E:first-of-type |
Match the first child element of the same label under the parent element, equivalent to: Nth-of-type (1) |
E:last-of-type |
Match the last child element of the same label under the parent element, equivalent to: Nth-last-of-type (1) |
E:only-child |
Matches only one child element under a parent element, equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1) |
E:only-of-type |
Match the only child element that uses the same label under the parent element, equivalent to: First-of-type:last-of-type or: Nth-of-type (1): Nth-last-of-type (1) |
E:empty |
Matches an element that does not contain any child elements, and the text node is also considered a child element |
E:not (selector) |
Matches any element that does not conform to the current selector |
Pseudo element Selector
E:first-line |
Matches the first line of e element content |
E:first-letter |
Matches the first letter of the E element content |
E:before |
Insert the generated content before the E element |
E:after |
Insert the generated content after the E element |
JQ Selector, filter, find (full function, node nowhere to run):
Selector | Selector
Example |
Select |
* |
$("*") |
All elements |
#ID |
$ ("#lastname") |
id= elements of "LastName" |
. class |
$ (". Intro") |
All elements of class= "Intro" |
Element |
$ ("P") |
All <p> elements |
. class. class |
$ (". Intro.demo") |
All class= "Intro" and Class= "demo" Elements |
|
|
|
: First |
$ ("P:first") |
First <p> Element |
: Last |
$ ("P:last") |
Last <p> Element |
: Even |
$ ("Tr:even") |
All even <tr> elements |
: Odd |
$ ("tr:odd") |
All odd <tr> elements |
|
|
|
: eq (index) |
$ ("UL Li:eq (3)") |
Fourth element in the list (index starting from 0) |
: GT (no) |
$ ("UL li:gt (3)") |
List elements with index greater than 3 |
: LT (no) |
$ ("UL Li:lt (3)") |
List elements with index less than 3 |
: Not (selector) |
$ ("Input:not (: Empty)") |
All input elements that are not empty |
|
|
|
: Header |
$ (": Header") |
All heading elements |
: Animated |
|
All animated elements |
|
|
|
: Contains (text) |
$ (": Contains (' W3school ')") |
All elements containing the specified string |
: Empty |
$ (": Empty") |
All elements with No child (element) nodes |
: Hidden |
$ ("P:hidden") |
All hidden <p> elements |
: Visible |
$ ("table:visible") |
All the visible tables |
|
|
|
S1,s2,s3 |
$ ("Th,td,.intro") |
All elements with a matching selection |
|
|
|
[attribute] |
$ ("[href]") |
All elements with an HREF attribute |
[attribute=value] |
$ ("[href= ' # ']") |
The value of all href attributes equals "#" elements |
[attribute! =value] |
$ ("[href!= ' # ']") |
The value of all HREF attributes is not equal to the "#" element |
[attribute$=value] |
$ ("[href$= '. jpg ']") |
The value of all HREF attributes contains elements ending with ". jpg" |
|
|
|
: input |
$ (": input") |
All <input> elements |
: Text |
$ (": Text") |
All <input> elements of type= "text" |
:p Assword |
$ (":p Assword") |
All <input> elements of type= "password" |
: Radio |
$ (": Radio") |
All <input> elements of type= "Radio" |
: checkbox |
$ (": checkbox") |
All <input> elements of the type= "checkbox" |
: Submit |
$ (": Submit") |
All <input> elements of type= "submit" |
: RESET |
$ (": Reset") |
All <input> elements of type= "reset" |
: button |
$ (": Button") |
All <input> elements of type= "button" |
: Image |
$ (": Image") |
All <input> elements of type= "image" |
: File |
$ (": File") |
All <input> elements of type= "file" |
|
|
|
: Enabled |
$ (": Enabled") |
All the active input elements |
:d isabled |
$ (":d isabled") |
All disabled input elements |
: Selected |
$ (": Selected") |
All selected input elements |
: Checked |
$ (": Checked") |
All selected input elements |
Jquery.parent (expr)//find parent element jquery.parents (expr) //Find all ancestor elements, not limited to parent element Jquery.children (expr) //Find all child elements, Only a direct child node will be found and will not return all Descendants jquery.contents () //Find everything below, including nodes and text. Jquery.prev () //Find the previous sibling node, not all sibling nodes Jquery.prevall () //Find all previous sibling nodes Jquery.next () //Find the next sibling node, Not all Brothers node Jquery.nextall () //Find all after sibling node jquery.siblings () //Find sibling nodes, no points before and after Jquery.find (expr) // Unlike jquery.filter (expr), jquery.filter (expr) filters out part of the initial set of JQuery objects, and the return of Jquery.find () does not have a portion of the initial set filtered out. The return result of Jquery.find () will not have the contents of the initial collection, compared to $ ("P"). FIND ("span") is found starting from the element, equal to $ ("P span").
Js,jq,css Selector