JavaScript Preliminary understanding

One. Javascrip Embedding Method:

-----<li onclick= "alert (' Hello ')" > Entry </li> embedded in HTML

------<li onclick= "init ()" > Entry one </li>

<script>
function init () {
Alert ("Hello");
}
</script> calling methods in the script tag

-------<script href= "1.js" ></script> call external JS code

Two. Composition of the Javascrip

ECMAScript (spec) + BOM (Browser object model) + DOM (Document Object model)

Three. The hierarchical structure of JavaScript

--------Screen

--------Navigator

Window--------Document

--------History

--------Location

-------- .....

Four. How node objects are fetched

document.getElementById ("id"); Gets the specified node object by ID

Document.getelementbytagname ("TagName"); Get node objects by node name

Document.getelementbyname ("classname") gets the node by class= the node specified by "username", limited to the form node

Document.form[] Get all the form objects on the page <form>

document.images[] Get page all img Tag Objects

document.links[] Get page All hyperlink Tag Object <a>

Get (attribute) with node relationship

ParentNode (parent node)

ChildNodes (child node)

FirstChild (older son node)

LastChild (Youngest node)

NextSibling (next sibling node)

PreviousSibling (previous sibling node)

Five. Node Object classification:

Element node text node attribute node

Six. Node properties　　

A. NodeName (node name)
The nodeName of the element node is the label name
The nodeName of the attribute node is the property name
The nodeName of a text node is always #text
The nodeName of the document node is always #document

B. NodeValue (node value)
For text nodes, the NodeValue property contains text.
For attribute nodes, the NodeValue property contains the property value.
The NodeValue property is not available for document nodes and ELEMENT nodes.

C. NodeType (node type): The NodeType property returns the type of the node.
The type value of the label node is 1
The type value of the attribute node is 2
The type value of the text node is 3

Seven. Adding and deleting nodes and changing the operation

A. Node check operation as above

B. Increased operation of the node appendchild () or innerHTML mode

C. Deletion of the node operation RemoveChild ()

D. Node change operation ReplaceChild (NODEA,NODEB) Replace node with NodeA node NodeB

E. Node creation action document.createelement (): Create a label node docuemnt.createtextnode ("content"): Create a text node

Eight. JavaScript Code Set Timer

var timer = settimerout (function (), time); Called Once

var timer = SetInterval (func (), time); Repeatedly called

---cleartimeout (timer) to remove timers created by settimeout ()

---clearinterval (timer) to remove timers created by SetInterval ()

Nine. Note that the node object is animated:

1. offsetleft OffsetTop offsetwidth Offsetheigh Gets the left margin width of the element (including border padding) height (including border padding)

2. The element is not modified by the Style->position attribute, and changing its Left,right property does not take effect, but can be changed by MarginLeft MarginTop.

3. Properties that are decorated in the built-in style property of the page cannot be obtained directly through Javascrip, such as:　　　　

<meta charset= "UTF-8" >
<title>test</title>
<style>
li{
width:160px;
height:80px;
Background-color:yellow;
margin-top:50px;
Text-align:center;
}
</style>

<javascript>

function GetWidth () {
var div = document.getElementById ("id");
return div.style.width;
}

<javascript>

this way is not able to take the value to the width because he is defined in the CSS style sheet. However, it can be obtained by the following ways:

function GetStyle (obj,attr) {

Compatible with IE
if (Obj.currentstyle) {
return obj.currentstyle[attr];
}else{

Compatible with most browsers on the market
Return getComputedStyle (Obj,false) [attr];
}
}

Ten: JavaScript's demo code

　　

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>test</title>
<style>
Ji=
width:160px;
height:80px;
Background-color:yellow;
margin-top:50px;
Text-align:center;
}
</style>
<script href= "1.js" >
Window.onload = function () {
var Ali = document.getelementsbytagname ("Li");
for (Var i=0;i<ali.length;i++) {
Ali[i].onmouseover = function () {
Startmove (this,400);
}
Ali[i].onmouseout = function () {
Startmove (this,160);
}
}
}

function Startmove (Obj,itarger) {
Clearinterval (Obj.timer);
Obj.timer = setinterval (function () {
var currentwidth = obj.offsetwidth;
var speed = (itarger-currentwidth)/10;
Speed = speed>0? Math.ceil (Speed): Math.floor (speed);
if (currentwidth = = Itarger) {
Clearinterval (Obj.timer);
}else{
Obj.style.width = currentwidth + speed + "px";
}
},30);
}

function GetStyle (obj,attr) {
if (Obj.currentstyle) {
return obj.currentstyle[attr];
}else{
Return getComputedStyle (Obj,false) [attr];
}
}
</script>
<body>
<ul>
<li> Item A </li>
<li> Entry Two </li>
<li> Article three </li>
<li> entry Four </li>
</ul>

</body>

　　　　

JavaScript Preliminary Understanding