javaScript_day2

javaScript_day2

1. Organizational default request submitted by the behavior

Hyperlink // <a herf="javascript:void(0)"/> transmission request

Form:

Note: οnsubmit = "return test ();" attribute value of the function call can write return the result to trun | false

2.event objects (event object)

Event Source: events HTML tags event.target

Obtaining lateral coordinates event.clientx events

Gets longitudinal coordinates event.clienty events

function test(event){

// Get tag events

alert(event.target);

// Get occurrences horizontal and vertical coordinates

alert(event.target)

3. event bubbling

Description: When a page element nesting occurs, both internal and external elements define the same event attributes, starting to run internal events, external events will also start running

Solution: differences in browser

Stop event bubbling

​ IE:event.cancelBubble=true;

Stop event bubbling

​ wbKit:event.stopPropagation();

4.DOM [focus]

DOW concept: document Object Model Document Object Model

js effect: the effect of technology to achieve dynamic page

DOM model: the entire page and the page tags, as an object corresponding to the node, all objects stored in a tree structure

Facilitate subsequent operation.

// Get the node object syntax

// the id attribute value of the tag, label objects to obtain the return value of the object is to get an object tag

var div = document.getElementById(“div1”);

Get Object Action Properties

div.id (Get tag property value)

Modify the label value attribute

div.id = "value"; caution label attributes can not be modified id class

// Get the object tag by tag name tag return value is an array of objects acquired by a group of objects

var divs = document.getElementsbyTagName ( "div");

// Get the object tag by the tag name attribute value of the return value of the tag array to obtain a set of target objects

var = divn document.getEementsByName ( "name"); s

5. Obtain the label text

1. Obtain internal text message, only to get the text inside information

Label object .InnerText

Modify the internal text messages

Label object .InnerText = "value" (replacing all the contents inside)

2. Get the text inside the tag information includes an inner nested label content

Label object .InnerHTML

Label object .InnerHTML = "value" (replacing the internal contents of all

6. Other attributes of the object tag (Objective: obtaining a flexible label object)

1. Obtain a parent node object tag

Label object .parentNode

2. Get all the child nodes label objects

Label object .childNodes

3. Get the first child node object tag

Label object .firstChild

4. Get the label of the last child objects

Label object .lastChild

The label object is acquired next sibling node

Label object .nextSibling

6. Get the label object previous sibling node

Label object .previousSibling

Note; wrap between the sub-elements within a sub-element tags are also counted

7. The operation of the specific configuration page

i create

1. Create a text node object: document.createTextNode ( "text messages")

2. Create a label node object: document.createElement ( "tag name")

3. Adding a node to the parent node, a parent node object .appendChild (); \

ii deleted

1. Obtain parent object

​ var body = document.getElementById(“bd”);

2. Gets you want to remove child nodes like

   var rxx = body.firstChild.nextSibling.nextSibling(bd);

3. delete

   Parent object .removeChild (child node object);

8. The data added to the input table

1. Get the user input

var nameText = document.getElementbyId ( "text information") .value;

2. Create a text node object

var nt = document.createTextNode(nameText);

3. Create td (column) objects in the text into td

var tdName = document.createElement(“td”)

td.appendChild(nt);

4. Create tr (row) in the object td tr into

var tr = document.createElement(“tr”);

tr.appendChild(tdName)

The acquisition table (table) into the object table in the tr

var table = document.getElementById(“table”);

table.appendChild(tr);

js drop table operation

1. Get the parent node

var trparent = input.parentNode.parentNode.parentNode;

2. Get the child node object to be removed

tr = input.parentNode.parentNode;

trparent.removeChild(tr);

9. drop-down list

var sel = document.getElementById ( "select"): Get the object dropdown

sel.option: get a list of all the drop-down list items

sel.selecttedindex: Gets index of the selected option

sel.value: value attribute value of the selected option just acquired

10.bom

The concept: Broswer Object Model Browser Object Model

method:

i. window.alert Output ( "content")

. Ii window.confirm ( "content"): confirmation box Return Value: Boolean

. Iii window.prompt ( "content"): the input box tips

iV var id = window.setTimeout (function () {}, time): After a certain time to perform the timing actuator content time in milliseconds, the timing task returns the id value

window.clearTimeout (id); stop timing actuator

v var id = window.setInterval (function () {}, time): Each time through the loop execution intervals

window.clearInterval (id); stop the timer loop is executed

11.location [emphasis]: Equivalent to the address bar

Send Request: additional data processing location.href = "xxx / xxxAction"; Key

Four-way transmission request

1. Address Bar

2. hyperlink

3. Form

​ 4.location.href