JavaScript simple effects and summaries

Element object in 1.js

* * var Input1=docuemnt.getelementbyid ("Input1");

alert (Input1.value);

Alert (input1.getattribute ("attribute name"));

Alert (input1.setattribute ("attribute name", "attribute value"));

Input1.removeattribute ("attribute name"); This method cannot be used to delete value values.

2.node objects

<span id= "Spanid" > Hahaha </span>

var Span1=document.getelementbyid ("Spanid");

alert (span1.innerhtml); Gets the label text content, or you can set the content.

alert (Span1.value);

alert (Span1.nodetype); 1

alert (span1.nodename); SPAN

alert (Span1.nodevalue); Null

var id1=span1.getattributenode ("id");

alert (Id1.nodetype); 2

alert (id1.nodename); Id

alert (Id1.nodevalue); Spanid

var text1=span1.firstchild;

alert (Text1.nodetype); 3

alert (text1.nodename); #text

alert (Text1.nodevalue); Ha ha haha

3. Get the parent node, child node, sibling node method

<ul id=ulid>

<li id=li1>hahgagh</li>

<li id=li2>dasaadad</li>

<li id=li3>cxzzcccxcv</li>

</ul>

var Li1=document.getelementbyid ("Li1");

Get the UL junction.

var Ul1=li1.parentnode;

alert (ul1.id); Ul

li1.nextsibling; Get it's next sibling node

li1.previoussibling; Get his former brother

var Ul1=document.getelementbyid ("Ulid");

alert (ul1.firstchild); Li

alert (ul1.lastchild);

AppendChild (""); Effect similar to shear paste

Parent node.         InsertBefore ("New node", "Old Node"); Insert a new node before an old node

Insert a new node and the new node does not exist, so create a node first.

Parent node.                            RemoveChild ("Sub-node"); Delete child nodes

Parent node.          ReplaceChild ("New node", "Old Node"); Replace old node with new node

A node.            CloneNode (TRUE); Copy a node

Case: Full selection and no selection

<script type= "Text/javascript" >

function Selall () {
var boxarray=document.getelementsbyname ("Hobbey");
for (Var i=0;i<=boxarray.length;i++) {
Boxarray[i].checked=true;
}
}

function Selno () {
var boxarray=document.getelementsbyname ("Hobbey");
for (Var i=0;i<=boxarray.length;i++) {
Boxarray[i].checked=false;
}
}

function Selsome () {
var boxarray=document.getelementsbyname ("Hobbey");
for (Var i=0;i<=boxarray.length;i++) {
if (boxarray[i].checked==true) {
Boxarray[i].checked=false;
}else if (boxarray[i].checked==false) {
Boxarray[i].checked=true;
}
}
}

function Selallno () {
var Box=document.getelementbyid ("Boxid");
if (box.checked==true) {
Selall ();
}else{
Selno ();
}
}
</script>
<input type= "checkbox" id= "Boxid" onclick= "Selallno ()"/> Select All/Select All <br/>
<input type= "checkbox" Name= "Hobbey"/> Watermelon <br/>
<input type= "checkbox" Name= "Hobbey"/> Strawberry <br/>
<input type= "checkbox" Name= "Hobbey"/> Apple <br/>
<input type= "checkbox" Name= "Hobbey"/> lychee <br/>
<input type= "button" name= "button" value= "Select All" onclick= "Selall ()"/>
<input type= "button" Name= "Hobbey" value= "All not selected" onclick= "Selno ()"/>
<input type= "button" Name= "Hobbey" value= "reverse select" onclick= "Selsome ()"/>

* * The focus of the form input box and the effect of losing focus

<input type= "text" id= "text" value= "Please enter ..." onfocus= "Focus1" (); " Onblur= "Blur1 ();" />

<script type= "Text/javascript" >

function Focus1 () {

var Inputid=document.getelementbyid ("text");

Inputid.value= "";

}

function Blur1 () {

var Inputid=document.getelementbyid ("text");

Inputid.value= "Please enter ... ";

}

</script>

This dynamic effect is similar to the search effect under the computer's C drive. Can be self-experimental effect.

* * Mouse Hover event code

<meta http-equiv= "Content-type" content= "text/html charset=utf-8"/>
<style type= "Text/css" >
. Span{background:white;}
</style>
<script type= "Text/javascript" >
function over () {
var Span=document.getelementbyid ("span");
Span.style.background= "#ccffff";
}
function out () {
var Span=document.getelementbyid ("span");
span.style.background= "White";
}
function down () {
var Span=document.getelementbyid ("span");
Span.style.background= "Grey";
}
</script>
<span id= "span" class= "span" onmouseover= "over ();" Onmousedown= "Down ();" Onmouseout= "Out ();" > Subaojuan </span>

JavaScript simple effects and summaries