JS Knowledge Point

HTTP://WWW.JIANSHU.COM/P/BEE295965800 Chrome Developer Tools


Chapter I.
First, the development
Netscape--livescript+sun=javascript


Second, the characteristics
Client-side scripting language, high security, embedded language, loose type (weak type), interpreted type.


Third, the application
1. Industry-style


<script type= "Text/javascript" >
...
</script>
2.
<script type= "Text/javascript" ref= "path, js file" >
3. In-page
<p onclick= "JS Code" ></p>


Iv. Web Standards
1. Structure: Page entity HTML (Hyper-text markup Language)
2. Performance: CSS (style sheet)
3. Behavior: DOM (JS Document Object model)


Results show behavior, three separate.


Chapter II Structural Language-html
I. Classification
XML: Extensible Markup Language
Html:
XHTML: Extensible Hypertext Markup Language


Second, the grammar
< tag name >...</tag name > or < tag name/>
Former: General label
Or: Empty label


Note: The label does not allow cross


Third, the common label
1. Document Structure class
&LT;HTML&GT;&LT;/HTML&GT;: Declaring document types
&LT;BODY&GT;&LT;/BODY&GT;: Declaring document contents (visible)
&LT;HEAD&GT;&LT;/HEAD&GT;: Declaring document information (not visible)


2. Section format label
<p></p>: Natural segment
<br/>: Break
<title>...</title>: page title (unique, head)
&LT;HR/>: Horizontal Split Line
<pre></pre&gt: Text formatting tags (WYSIWYG)


3. Picture Label

SRC path
Alt text Substitution
Width width
Height height


4.**** List
1) Sequence list <ol>...</ol>
List Items <li>...</li>


2) unordered list <ul>...</ul>
List Items <li>...</li>


3) Custom list <dl></dl>
Custom list Items <dd></dd>
Title <dt></dt>




5. Forms
<table></table>: Table
<tr></tr>: Line
<tb></tb>: cell


Property:
Border: Border
Width: Wide (absolute units (PX), relative units (%))
The height of the table is determined by the height of the cell.


6. Anchor label (positioning)
<a></a>


Property:
HREF: link target.
Target: Link target open mode. (The _blank link target opens in a new window.) ）




7. Form. Control


1. Form fields
<form></form>


2. Input Class Control
<input type= ""/>


Type property:
Type= "text": Single-line text box.
Type= "Password": Mask
Type= "Radio": The Radio box (with the ID and Name property, controls the uniqueness of the Radio box.) )
Type= "checkbox": check box
Type= "file": Domain
Type= "Submit": Submit button (Value property: Default Value property, available for Text,password,textarea, all buttons)
Type= "reset": Reset button to empty the form (for elements within a form)
Type= "button": Normal button


Add:
Disabled: Disable
Size: Controls the width of the text box.
MaxLength: Maximum number of characters.


3. Drop-down list box
<select></select>
<option><option>: List Items

(
Selected: drop-down list default selection state.
Size: Controls the list height.
Multiple: Check (multiple selection)
)


4. Text field
<textarea></textarea>


Rows: Controls the number of text field lines. = height.
COLS: Controls the number of text field columns. = width.




Chapter three Cascading Style sheets


First, the concept of CSS
1. Composition
Selector, attribute value, value


2. Syntax format
Selector {property: value;}
Note
All symbols are in English half-width, and the first letter of the selector cannot be numbered.


Second, Selector classification * * * *
1. Basic Selector
1) Tag Selector: For the same type of tag effective, named after the label name.
2) class selector: For individual elements, across elements, 1: many. Custom name (called with. Declaration, class).
3) ID selector: For individual elements, 1:1, custom names. (called with # Declaration, id)


Priority:id> Classes > Labels


2. Composite Selector
1) Intersection selector: satisfies two conditions at the same time.
p.no2{} table. #abc {}


2) Set selector: Group declaration
h1,h2,h4,h3,.no2{}


3) descendant selector: By making the ancestor lookup child elements, separated by a space.
Table h3{}


Note: Special selectors
*: A wildcard selector that declares all elements of the page.




Third, common CSS properties.
1. Box model. *****
Width: content width, not including borders.
Heidth: Content height, does not contain height.
padding: inner margin.
margin: margin.
border: Border.


Note
A shorthand scheme for margin and padding
Four values: Top, right, bottom, left.
Two values: up and down, around.
Three values: Up, around, down.




Boder-wigth: Border width.
Boder-style: Border style.
Boder-color: Border color.


Supplemental attributes:
Display:block\inline\none; Controls how elements are displayed, block \ Line \ Hide.
* *: Row-level elements do not have, wide and high characteristics.




Box model horizontal Distance: determined by the sum of the adjacent margins.
Vertical distance: Collapse, two margins maximum margin is determined. **
Actual width =width+boder+margin+padding
2. Text attributes.
Font-family: Font
Font-size: Font size px,pt,%,em
Color: Word color.
Line-heigth: Line spacing (% em)
Font-weigth: Text bold. (Bold,bolder)
Font-style: Tilt.
Text-align: Alignment. (Left\right\center)
Text-indent: First line indent.
Text-decoration: Text decoration.






3. Background properties.
Background-color: Background color (solid color)
Backgruoud-imag:url (picture address) background picture.
Background-repeat: Repetitive control of the background (repeat-x/y,no-repeat)
Background-position: Background positioning (followed by two values).




4. List properties.
List-style-type:none; The list has no modifiers.


5. Floating * * * *
Float:left\right\none;
Characteristics:
1. Lost width, becomes the smallest width that can hold content only.
2. The location is lost and subsequent elements replace it.
3. The contents of the subsequent elements are displayed around the previous floating element.


Clear: Please make a floating bad effect (Left\right\both)
Blank Div method: After the last floating element, let it load the clear property to solve the adaptive height problem.


6. Layer Positioning model
Position:relative (relative positioning)/absolute (absolute positioning)
Note: To achieve uniqueness, combine the azimuth attribute (distance).


1. Relative positioning
Displacement relative to the original position.


Has no effect on sibling elements. The original location is reserved.


2. Absolute positioning
The position is lost and the width is lost.


Positioning reference: The ancestor element closest to it, with positional properties. If not, it is positioned at the browser boundary.


Cascading effects can be achieved (adjustable position).


Supplemental: Cascading Position Properties
Z-index:z Axis Index (numeric), provided that the cascading elements must be absolutely positioned. The larger the number, the higher the front.


Iv. Application of effects
1. Layout effect.






2. Link effect. (Pseudo class selector)
: Link Normal status
: Hover Trigger Status
: Active activation status
: Visited state after browsing


1) control the appearance of the link.


2) Multiple connection effects coexist.
Method: Specify the class name for the link to which you want to specify a special effect, using the A. Name declaration.


Add: (l-v-h-a) to specify the appearance in this order.


Added: Overflow:hidden (hidden after overflow)/scroll (add scroll bar)


Block-level element centering:


selector {margin:0px auto;}




The third part-JS syntax.
1. Syntax


1) strictly case-sensitive.
2) Custom name: First letter must be character, underscore, $,


2. Note://,/* */


3. literal/Direct quantity/constant


4. Reserved words and keywords


5. Variables. JS is a weakly typed language, and declaring a variable cannot declare a data type.
Declare with VAR, local variable;
No VAR declaration. The default is the global variable;
The variable type is determined by the value,


Ii. Types of data


1.typeof: Detection variable type;




Alter () To eject the warning box.
Prompt ("", ""): Popup input box. (hint text, default value)
Onfocus: Get Focus
Onblur: Lose focus.


2.Undefined: Variable uninitialized type.


differs from not defined:
Undefined: variable, no value, normal;
Not defined: no variable, error;


3.Null: null object reference. (null pointer), NULL


Null
The NO:CSS represents no
Not: Negate.
The NONE:CSS represents no
Nan:not a number


4.boolean: Boolean type.


1) Precautions
This type has a corresponding relationship to other types.
String: Non-empty string ==true empty string ==false.
Value: Non 0 ==true 0==false nan==false
Implicit conversions: Automatic type conversions.


2) Related functions
Boolean (): explicitly converts other types to booleans.


5.number: No shaping and floating-point type, collectively known as numerical type.


1) in-process
Two: 0 1
Eight: 0~7
Ten:
16: Leading 0x rear guide 0~9 or A~f


2) floating-point declarations and operations
Declaration method: Var a=3.6, b=0.8,c=.7
Operation Characteristics: Accurate to 17 bits (with caution)


3) NaN: Non-numeric not a number
InFinity: Positive infinity.
-infinity: Negative infinity.


4) Related functions
Number (): Convert other types to numeric
parseint (): Converts a string or numeric value to a numeric type;
(1) type conversion (2) binary Conversion--8| | 16
(3) Matching parameters, can do any conversion of the binary
Parsefloat (): Converts a string to a floating-point value




6.string: String, is the most basic data type in JS;
1) Precautions
"= =", but not cross
2) escape character: &lt left angle bracket < right angle bracket
\ "represents the output double quotation mark
\ ' represents the output single quotation mark
\ nthe line break
Note
&lt Left angle Bracket <
&gt Right Angle bracket >
To: Text placeholder


document.write ("..."): Output to HTML, parsed and displayed


3) methods involved
. toString (Parameters): Converts a numeric value to a string, and the parameter represents the binary




Square Root Math.sqrt


Note: Supplemental methods
Date (): Current System Time Object
. GetYear (): Year 1900-1999
. getFullYear (): Year * * * *
. GetMonth (): month, note one months less than normal
. GetDay: Days of the week
. Grtdate (): Date
. GetHours (): hrs
. getminutes (): Min
. Getseconds (): Sec




Square root math.sqrt ()
Math.max (): Maximum value
Math.min (): Minimum value
Math.random (): Random decimal between 0~1




Three. Operators
1.
=: Assign Value
= =: equals, literal meaning judgment
= = = Congruent, data types must be consistent


2. Unary operators: only one operand
++  --
++a


3. Ternary (mesh) Operator: Simplified version of If statement
？ ：
X>y?x:y


4. Remainder:% mod


4. Priority (see Courseware)




=========================================================================================================
The second part of the Process Control statement


Statement composition: Consists of one or more keywords, to achieve the specified tasks (such as looping, judging ...) ）


Second, the statement form:
Single-line statement: if () Alter ("")
Compound statement: code block. {...} Treated as a single statement.


Iii. Classification of sentences
1. Declaration statement:
var box=100;
Label:box;


2. Expression statements
box=100;
box (); Function expression;
box.property=100 property expression;
Box.method (); Method expression


3. Branch statement (Judgment statement)
1) if () ... Single-channel Branch
2) if () ... else ... Two-way branch.
3) if () ... else if () ... else if () ... else ... Multi-Channel Branch
4) switch (expression or value) {
Case N: ...
} to determine the exact type of multi-channel branch.


Note: Often combined with break,default to use;


4. Looping statements
1.for (Assignment statement; Judgment statement; Operation statement) {Loop body}
2.while (conditional expression) {loop body, with op-statement}
3.do{loop Body ...} while (conditional expression);
4.for in: Enumerates all property names in an object


5. Control statements
Break: Jump out of the loop;
Countiue: Jump out of the current cycle, into the next cycle;
Try catch:


6. Other statements.
; Empty statement.
With: Defines the statement function into an object. (Working range)




Part Three functions
Characteristics:
1) package 2) Repeat call


First, function declaration
1. General declaration:
Function name () {...}


Not
Anonymous functions:
function () {...}
Trigger:
Window.onload=function () {} can only be triggered when all contents of the form have been loaded
Document. Event =function{}{} Current page documents




2. function declaration with parameters
Function name (formal parameter sequence) {...}


Formal parameters: determines the operation process.
Arguments: Actual participation in the operation.


Second, return
1. Return the result of the operation to the location of the calling function (value of the pass)


2. Stop the function from running.


In 3.JS, return False to stop the default action for HTML elements. (form submission, hyperlink jump)




Three, arguments parameters
*****
In JS, the function does not care about the number and correspondence of the actual participation parameters.


Four
. getElementById () through the ID name, perhaps the only element in the page.
. Length: Returns the string length
. IndexOf (): detects where a character appears in a string;
1. Detect the first occurrence of the position, subscript starting from 0.
2. If the string is detected, return to the letter position.
3. The return value is a non-negative integer. If feedback-1, then not found.
. Focus (): Get focus
. substring (numeric 1, number 2): intercepts a string. [Value 1, value 2). The value 2 can be omitted.
. IsNaN: Determines whether it is a non-numeric value.
. InnerHTML: Gets (overwrites) all content in the specified HTML tag,
Unlike value, value only gets the value of the element, innerHTML gets all the elements within the tag.


==========
One, SetTimeout ("code", Time): Deferred execution, executed only once.
Time: Unit milliseconds. How long it takes to delay.
Code
1. In the case of a code or base statement, use the declaration.
2. If it is a function.
1) No parameters, directly declared with the function name. SetTimeout (box,1000)
2) If you have parameters, or write in a function expression. SetTimeout ("box ()", 1000)


Package: Cleartimeout (deferred object name)


Second, setinterval ("code", Time): Interval execution (repeated execution.) ）。


Note: Warning box will occupy browser running thread, interrupt (pause) other threads in background




. Style: Declares a property of an object. (HTML style)
. ClassName: Add a class name to the HTML object. (CSS style)


Confirm ("string"): Confirm box.
Confirm ==true
Cancel ==false




Recursion: itself calls itself
Iteration: The value of itself is calculated by itself.
. SCR: The path to the object element (picture).


Disabled: Controls whether object elements are disabled






==============================================================
Array:


1.new Method declaration
var box=new box Object


2. Literal (constant)
var box{
Name:zhangsan,
Age:18
}


3. Traditional methods
var box{}
Box.name= "Zhangsan"


4. Attribute Output method
Object name. property name = = Object Name [' Property name ']


2. Create a method for an object (custom method)


Typically created using anonymous functions.


3. Delete Object Properties


Delete Object name. Property name


Two, array type


Features of the array in JS:
1. Elements in the same array, not qualifying types.
2. With a variety of methods, arrays or elements, positive, delete, change, check, connect


1. Declarative methods
1.new operator
var box=new Array (); Empty array
var box=new Array (10); Specifying an array of lengths
var box=new array (1, "JHJ", 5)//Specify the content array




Note
When output is used with the alert and write methods, the array is automatically converted to a string.


2. Traditional methods
var box=[]
var box=[10]//array has only one element 10, the method cannot be predefined length.
Box.length=10 defining the length of an array






2. Reading or modifying array contents
READ: Combine subscript
Modify: By assigning an expression.




3. Get the array element amount using the Length property
1. Control the length of the array.
2. Append the specified content to the end of the array. box[box.length]= "123456666"


4. Conversion method
Implicit conversions: Use alert or write.
An explicit conversion:
. toString (): Convert to normal string, function biased to display
. toLocaleString (): ibid., but different for time
. valueOf (): converted to original format, function biased to arithmetic.


5.join () Method: Replace the spacer with a special character


6. Stack method: Advanced post-out
Push (): Appends the new element from the end into the array, returning the new length
Pop (): Deletes an element from the end and returns the deleted content


7. Queue method: FIFO
Shift (): Deletes an element from the first end and returns the content
Unshift (): Append new element from the first end, return length


8. Reorder Methods
Reverse (): reverse sort
Sort (): From small to large, sorted by string format 23,1,7,45,JS----1,23,45,JS


9. Other methods of operation
Concat ():
1) Array Connection
2) Append elements from the end to create a new array


Silce (Start[,end]): Intercept array element object, no influence on original array [] can be omitted


Note: The end bit is not included in the range


Splice (start,num[, element]):
1) Intercept array elements, get by number, modify the original array
2) inserting array elements
3) Replace




==========================================================================================
BOM (Browser object model)


There is a problem with Note:bom compatibility.


I:ie, F:firefox C:chrom
First, Window object
Property:
Defaultstatus: Default status bar information (I)
Status: Custom State Bar information (I)
Opener: Parent Object
Screenleft: Browser horizontal coordinates (I,C)
ScreenX: Ibid. (c,f)
Screentop: Browser vertical coordinates.
Properties and methods:
Print (): invokes the printing command. (IFC)
Find (): Look Up Command box (F)
Open ("url" [, Open with or window name] [, appearance]): New Window Object
Close (): Close Window object




----------------------------------
IE Private objects:
MoveTo (x, y): moves to the specified coordinate point.
Moveby (x, y): offsets the current position.
Resizeto (): Changes to the specified size.
Resizeto (): Scale with reference to current size


Ii. Location Object


Property:
Hash: #后
Location.hash
Moudle=welcome. welcomemodule%7c%7b%7d


Host: hostname + port number
Location.hostname
Mail.126.com:80


Prot: Port number
Location.prot
80


href: full URL
location.href= "Http://www.qq.com"


Search:? After
Location.search


Pathname: path name


Protocol: Network protocol
Location.protocol
http
HTTPS: Encrypted hypertext protocol


Method:
Assign (URL): Add a new page to replace this page
Reload ([False]): Refresh page from local cache (fast, old)
Reload ([true]): Forces the page to be refreshed from the server ==f5 (new, slow)
Replace (URL): Replace the current address with an address




Iii. History: Historical records
Property:
Length: History of the current form


Method:
Forward (): one page ahead
Back (): Rewind one page
Go (num): Jump to specify number of steps
Positive value: Forward
Negative value: Back
0: Refresh this page


Iv. Navigator Object: Return browser information
Property:
appCodeName: Browser Name code
AppVersion: Current browser version number
AppName: Browser name
cookieenabled: Does the browser in your computer support caching of cached file cache information locally
Platfrom: Current system Platform Win32
Method:
Javaenabled (): Support for Java Google does not support simple applications, Firefox does not support IE support


V. Screen object: Returns the information
Width
Height:
Availwidth: Actual Available resolution
Availheight:
ColorDepth: Judging the number of colors, generally 24,ie=24+8 (emphasis on Alpha)








Add:
One: Open and close classic problem!
1.colse () cannot close page
Close can only close the page open/script opens


2.open Transmit Value
If you are using the GetElement series method, consider adding the order factor
Note: Google Chrome and Apple Safari are all webkit kernels, local test JS is not allowed, unless in the server state




V. Screen object: Returns the information




===========================================================
Getting Started with events


Event: A series of actions taken when the user is operating the software.


One, inline events (inline model)-use with caution-
The event handler function is applied as an HTML attribute.


<input type= "button" value= "inline" onclick= "Javascript:alert (' 12346 ')" >


Excellent: Intuitive


Missing: Violating Web standards, structure and behavior mix




Ii. Script Events (script model) * * * * *
Excellent: the implementation of web standards, easy maintenance, object operation.


Note
1. Object. event handler function (onclick) = function name;
2. Object. event handler function =function () {
... js block of code
}


Third, event handler function
1. Mouse events:
OnClick: Mouse click
OnDblClick: Double click on the mouse


OnMouseDown: Mouse Down
OnMouseUp: Mouse Bouncing up


onMouseOver: Mouse Overlay
onMouseOut: Mouse Move out


OnMouseMove: Mouse Movement




2. Keyboard events:
OnKeyDown: Press any key on the keyboard
onkeypress: Press any character key
OnKeyUp: Press the button to lift up


3.HTML Events
OnLoad: Loading complete
OnUnload: Uninstall complete


Onfocus: Getting focus
Onblur: Losing focus


Onselect: When text is selected (single-line or multiline text box)
OnChange: When the value changes (IBID.)


OnSubmit: When a form is submitted
Onrest: When the form is reset
Note: Applies only to <form> objects


Onscroll: Scroll bar when scrolling
OnResize: When the window size changes
Note: Applies only to Window objects.


===================================
DOM (Document Object Model)---node tree


First, the node classification
1. Element node label
2. Attributes in attribute node labels
2. Continuous string of text nodes


Ii. methods of acquiring nodes


1.. getElementById (): Uniqueness
. TagName: Label name
. Id:id values
. InnerHTML: Content in ELEMENT nodes
. ClassName: Class name
. Style: Controlling appearance




2.. getElementsByTagName (' tag name '): Gets multiple label elements, returns the array collection


Note: If you want to point exactly, you must match the array subscript.
. Getelementsbytagnmae (' tag name ') [0]
. getElementsByTagName (' tag name '). Item (0)


3.. getelementsbyname (' name attribute value '): Same as Bytagname


4.. getattrubute (): Get attribute Node


5.. setattruibute (' property name ', ' property name '): Set attribute node


NOTE:4.5IE7 not supported below


Two, Dom node relationship (pointer)


1. Get child nodes: ChildNodes with subscript




2.. firstchild: Get first node childnodes[0]


3.. lastchild: Get the last node


4.. parentnode: Point to the parent node of the current node


5.. previoussibling: Ancestor node


6.. nextsibling: Subordinate nodes


7.. ownerdocument: Point to root node ===document


8.. attributes: A property that points to the current node, returning an Array object




Add:


. nodeName


Element--Tag Name Property---Property name text---#text


. nodeType


Element--1 Property--2 text--3


. nodevalue


Element--null Property--Property value text--string


Note
Empty strings or line breaks are considered text nodes by Chrome and FF




Third, node operation increase, application, delete, copy, replace


1. Create a new node
1) document.write ("<p>123</p>"): Disadvantage: Unstable, in some cases, the method output will overwrite the original node
2). createelement (' tag name ')




2. Append a node to the end of a node: AppendChild (' Node object ')


3. Create a text node:. createTextNode ("continuous string")


Note: The newly created node resides in the cache and is inserted into the interface using the Insert method.




4.. insertbefore (' Node object ', ' node position '): Insert node before node location


5.. replacechild (' new node ', ' Old node '): Replace child node


6.. removechild (' node '): Delete child nodes




Note:5and6, to implement self-operation, you must move the node pointer to the parent node.


7.. cloneNode (' bool '): Replication node


True: Contains child nodes
False: does not contain child nodes, only the structure


Add:
. HasChildNodes: Determines if a child node is included, returns a Boolean value

JS Knowledge Point