Js Basics_Willson_o’s Blog

http://www.jianshu.com/p/bee295965800 chrome developer tools

Chapter 1

1. Development

netscape –livescript+sun=javascript

2. Features

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

3. Application

1. Industry style

…

2.

3. In-page style

4. Web Standards

1. Structure: page entity HTML (Hypertext Markup Language)

2. Performance: CSS (style sheet)

3. Behavior: DOM (JS Document Object Model)

****The result shows behavior, and the three are separated.

Chapter 2 Structural Language-HTML

1. Classification

XML: Extensible Markup Language

html:

XHTML: Extensible Hypertext Markup Language

2. Grammar

… or

Former: General Tab

or: empty tag

note: Tags are not allowed to cross

3. Commonly used labels

1. Document structure class

: declare document type

: Declare the content of the document (visible)

: Declaration document information (not visible)

2. Section format label

: natural paragraph

: line break

: page title (unique, head)

: (i=1~6): text title (the smaller the value, the higher the level. body)

: horizontal dividing line

: text formatting tags (what you see is what you get)

3. Image tags



src path

alt text replacement

width wide

height high

4.**** list

1) Ordered list

…

List Items

2) Unordered list

…

List Items

3) Custom list

Custom List Items

Title

5. Form

: table

: row

: cell

Attributes:

border: border

width: width (absolute unit (PX), relative unit (%))

Table height is determined by cell height.

6. Anchor tag (positioning)

Attributes:

href: link target.

target: the way to open the link target. (The _blank link target opens in a new window.)

7. Form. (control)

1. Form fields

2. Input controls

type attribute:

type=”text”: single-line text box.

type=”password”: mask

type=”radio” : radio button (control the uniqueness of the radio button through the ID and NAME attributes.)

type=”checkbox”: check box

type=”file” : file field

type=”submit” : submit button (value attribute: default value attribute, available for text, password, textarea, all buttons)

type=”reset” : reset button, clear the form (for elements in the form)

type=”button” : normal button

Supplement:

disabled: disabled

size : Control the width of the text box.

maxlength: the maximum number of characters.

3. Drop-down list box

: list item

(

selected : The drop-down list is selected by default.

size : Control the list height.

multiple : multiple selection (multiple selection)

)

4. Text field

rows: Control the number of lines in the text field. = height.

cols: Control the number of columns in the text field. = width.

Chapter 3 Cascading Style Sheets

1. CSS concept

1. Composition

selector, attribute value, value

2. Grammar format

selector { attribute: value; }

note:

All symbols are English half-width, and numbers cannot be used as the first letter of the selector.

2. Selector classification****

1. Basic selector

1) Tag selector: Effective for similar tags, named after the tag name.

2) Class selector : for individual elements, across elements, 1: many. Custom name (declare with ., call with class).

3) id selector : for individual elements, 1:1, custom name. (declared with #, called by id)

Priority: id>class>label

2. Compound selector

1) Intersection selector: satisfy two conditions at the same time.

p.no2{} table.#abc{}

2) Union selector: group statement

h1,h2,h4,h3,.no2{}

3) Descendant selector: Find child elements by specifying ancestors, separated by spaces.

table h3{}

note: special selector

*: A wildcard selector, declare all � in the page��

note: only for objects

onscroll: when the scroll bar scrolls

onresize: when the window size changes

note: Only applicable to window objects.

======================================

DOM (Document Object Model)—node tree

1. Node classification

1. Element node label

2. Attributes in the attribute node tag

2. Text node continuous character string

2. The method of obtaining nodes

1. .getElementById(): uniqueness

.tagName : tag name

.id : ID value

.innerHTML : the content in the element node

.className : class name

.style : control appearance

2. .getElementsByTagName(‘tag name’): Get multiple tag elements and return an array collection

note: If you want to point accurately, you must cooperate with the array subscript.

.getElementsByTagNmae(‘tag name’)[0]

.getElementsByTagName(‘Tag Name’).Item(0)

3. .getElementsByName(‘name attribute value’) : Same as ByTagName

4. .getAttribute(): get attribute node

5. .setAttribute(‘attribute name’,’attribute name’) : set attribute node

note: Not supported below 4.5ie7

2. DOM node relationship (pointer)

1. Get child nodes: childNodes Use with subscripts

2. .firstChild : Get the first node childNodes[0]

3. .lastChild : Get the last node

4. .parentNode : point to the parent node of the current node

5. .previousSibling: parent node

6. .nextsibling : subordinate node

7. .ownerDocument : point to the root node ===document

8. .attributes : point to the attributes of the current node, and return an array object

Supplement:

.nodeName

Element — Tag Name Attribute — Attribute Name Text —#text

.nodeType

Element–1 Attribute–2 Text–3

.nodeValue

Element–NULL Attribute–Attribute Value Text–String

*****note:

Empty strings or newlines are considered text nodes by chrome and FF

3. Node operation add, apply, delete, copy, replace

1. Create a new node

1) document.write(“

123

“) : Disadvantage: unstable, in some cases, the output of this method 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 nodes all reside in the cache, so use the insert method to insert them into the interface.

4. .insertBefore(‘node object’,’node position’): Insert a node before the node position

5. .replaceChild(‘new node’,’old node’) : replace the child node

6. .removeChild(‘node’) : delete child node

note: 5 and 6, in order to realize self-operation, the node pointer must be moved to the parent node for operation.

7. .cloneNode(‘bool’) : copy node

true: contains child nodes

false: does not contain child nodes, only structure

Supplement:

.hasChildNodes: Determine whether child nodes are included, and return a Boolean value