Leak detection and vacancy filling (III)

Implicit type conversion

Symbol	Conversion result
-、*、/、%、++、–	Convert string to number
+	Convert numbers to strings

console.log("A"- "B"+"2")  //NaN2
//"A"- "B": use Number Function to numeric , The result is NaN, In subtraction , If one of them is NaN, The result is NaN

Unary addition and subtraction operator

type	result
Numbers	unchanged （ If the number comes first 0, Remove after conversion 0）
Boolean type	true Turn into 1,false Turn into 0
null	0
undefined	NaN
character string	The string is a pure number , Return the corresponding number ; Not return NaN
object	NaN

The unary subtraction operator is similar to the addition operation , It just returns a negative number

onchange It's a text box （input perhaps textarea） Event triggered when content changes

The element hierarchy displays the priority

Frame element > Form Elements > Non form elements
Frame element ：frameset、frame、iframe
Form Elements ： Text input box , Password input box , Radio buttons , Check box , Text input fields , List box, etc ;
Non form elements ：a、div、table、span etc.

The minimum time interval for manual animation writing is 16.7ms

The default frequency for most monitors is 60hz, Refresh every second 60 Time . So the theoretical minimum interval is 1/60*1000ms=16.7ms

Selector weight

Floating element overlap problem

For the example of this sentence ： If there are non floating elements and floating elements at the same time , also Non floating elements come first , The floating element will not be higher than the non floating element

Floating elements and block level elements

Floating element background 、 The border is below the block level element , Text is at the same level as block level elements

.div2 {
    
    background-color: pink;
    border: 1px solid red;
    width: 500px;
    height: 300px;
    float: left;
}
.div1 {
    
    background-color: green;
    border: 1px solid green;
    width: 700px;
    height: 500px;
}
<div class="div1">xxxxx</div>
<div class="div2">yyyyy Floating elements </div>

Floating elements and inline elements

The border of the in line element 、 background 、 The content is displayed horizontally with floating elements

.div2 {
    
    background-color: pink;
    border: 1px solid red;
    width: 500px;
    height: 300px;
    float: left;
}
span {
    
    background-color: green;
    border: 1px solid green;
    width: 700px;
    height: 500px;
}
<span class="div1">xxxxx</span>
<div class="div2">yyyyy Floating elements </div>

track label

track The label is something like video Media such as elements dictate the external text track .
Used to specify subtitle files or other files containing text , When the media is playing , These documents are visible .

embed label

embed Tags define embedded content , This is an empty label , No content

Code recycling rules

1. Global variables are not recycled .
2. Local variables are recycled , That is, once the function is run , Everything inside the function is destroyed .
3. As long as it is referenced by another scope, it will not be recycled

The difference between pseudo class and pseudo element

1. CSS3 The syntax of pseudo class and pseudo element in is different ： pseudo-classes :link、:hover; Pseudo elements ::before、::after
2. You can use multiple pseudo classes at the same time , Only one pseudo element can be used at the same time ;
3. Pseudo elements / Pseudo object ： It doesn't exist in DOM In the document , It's a virtual element , Is to create a new element . This new element ( Pseudo elements ) Is a child element of an element , Although this sub element exists logically , But it doesn't actually exist in the document tree .
   pseudo-classes ： There is DOM In the document ,( No label , Can't find , Only when the trigger conditions are met can you see ), Logically existing but not identified in the document tree “ ghost ” classification .

Essential difference ： Whether new elements have been created , This newly created element is called pseudo element .

CSS3 Selectors

css Use the font of the server

@font-face { font-family : name ; src : url( url ) ; sRules }

h5 Cross document information transfer

1. Can achieve the same domain web Pages can communicate with each other
2. You can pass strings and objects to each other
3. Use this function , You need to get the instance of the window object where the web page is located

DOM

DOM The tree is divided into the following node formats ：Element type （ Element nodes ）、Text type （ Text node ）、Comment type （ Comment node ）、Document type （document node ）.

blink

After setting, the string will flash

str.blink()

mark label

highlight mark The text inside the tag , Yellowing

strong label

Define important text , Used to bold text
Be careful ：em The label emphasizes ,strong、b The labels don't emphasize .b The label represents bold text

highlight

Highlight special effects , Hide or show an element by changing the background color