Child of an element number
ParentNode.childElementCount readonly attribute unsigned long returns a number representing the number of elements in a given sub-element.
Cancel the current event
e.preventDefault ();
sometimes we chose a checkBox, then because not all selected, it will cancel the click event.
CSS attribute selector
<INPUT checkboxtype = "ddd">
document.querySelector ( "[checkboxtype]")
Returns the first label contains checkboxtype properties.
Analyzing tag name
element.tagName;
Get custom labels attribute
<box P = "666"> </ P>
element.getAttribute ( "box")); // this is a custom attribute box, he value of 666.
After checkbox click event occurs, checkbox is checked immediately changes the state of true, but this time the hook is not marked, because the screen is the final rendering.
webpack packaging tools
Node.js JavaScript is running on the server side
less lightweight module css
sass css to make the statement more simple and clear.
Nested sass:
#content {div
Color: Red;
background: Blue;
}
#content div: hover {
Color: Yellow;
background: Green;
}
#content> P {
border: 1px Solid # 000;
border-left: 10px;
right-border: 5px;
}
with sass may be combined into a
#content {
div {
Color: Red;
background: Blue;
&: hover {
Color: Yellow;
background: Green;
}
}
> {P
border: Solid 1px # 000; {
left: 10px;
right: 5px;
}
}
}
sass introduced:
a local file named _blue-theme.scss, as follows:
aside {
background: Blue;
Color: White;
}
The following syntax is introduced:
.blue {@import-Theme "Blue-Theme"}
// generate results with you to write directly in the .blue-theme selector content _blue-theme.scss file exactly the same.
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
You repeatedly declare a variable, only the last one declared valid and it will cover the value front. Exemplified:
$ Link-Color: Blue;
$ Link-Color: Red;
A {
Color: $ Link-Color;
}
In the following example, before if the user import your sass local file declares a $ fancybox-width variable ,
then your local files for $ fancybox-width 400px assignment operation is invalid.
! $ the fancybox-width: 400px default;
.fancybox {
width: $ the fancybox-width;
}
sass Note:
body {
Color: # 333; // this annotation content in the generated document does not appear css
padding: 0; / * This comment will appear in the generated css file * /
}
sass mixer
@mixin Link-Colors (Normal $, $ hover, visited $) {
Color: Normal $;
&: hover {Color: $ hover;}
&: Color {visited: $ visited;}
}
When the mixer is @ include, you can use it as a css function parameter passing. If you write like the following:
a {
@include link-colors(blue, red, green);
}
// Sass is finally produced:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
Inheritance sass
// inherited by inheritance pattern selector
.error {
border: 1px Solid Red;
background-Color: #fdd;
}
.seriousError {
@extend .error;
border width-: 3px;
}
at the top of the code, .seriousError at any position will inherit the stylesheet for all styles .error defined.
With class = "seriousError" modified html elements in the final display effect is like class = "seriousError error"