Home>

First, find the element:

docunment.getelementbyid ("id");find by id, find at most one;

var a=docunment.getelementbyid ("id");put the found element in a variable;

docunment.getelementsbyname ("name");find by name, find out the array;

docunment.getelementsbytagname ("name");find by tag name,Find out the array;

docunment.getelementsbyclassname ("name") looks for the classname and finds the array;

Second, the operation content:

1. Non-form elements:

(1) Get content:

alert (a.innerhtml);The html code and text in the tag are obtained,Everything inside the label.

Such as:There is such a div in the body:

<div><b>try it</b></div>

Use innerhtml in the script to get the content of the div:

var a=document.getelementbyid ("me");

alert (a.innerhtml);

The results are as follows:

alert (a.innertext);take only the text inside

alert (a.outerhtml);include the content of the tag itself (a simple understanding)

(2) Setting contents:

a.innerhtml="<font color=red"hello world</font>";

If the result of setting the content code is as follows,The content in the div is replaced:

a.innertext will render the assigned thing as it is

Empty content:assign an empty string

2. Form elements:

(1) Get content,There are two ways to get it:

var t=document.f1.t1;form input with id id t1 in f1;

var t=document.getelementbyid ("id");Get directly with id.

alert (t.value);Get the value of input;

alert (t.innerhtml);get<textarea>value here</textarea> ;;

(2) Set content:t.value="content changed";

3. A little knowledge point:

<a href="http://www.google.com" onclick="return false">Go to Baidu</a> ;;adding return flase will not jump,The default is return true to jump. The same goes for the button.If return flase is set in the button, no commit will occur,Use this to control the commit jump.

Operation properties

First find the element using its id,Stored in a variable:

var a=document.getelementbyid ("id");

You can then manipulate the attributes of the element:

a.setattribute ("attribute name", "attribute value");set an attribute,You can add or change;

a.getattribute ("attribute name");get the value of the attribute;

a.removeattribute ("attribute name");remove an attribute.

Example 1:Make a question,If the input is correct, it pops up correctly,Error pop-up error

Here we write a daan attribute in the text, which stores the value of the answer,When you click to check the answer, the cheak input is the same as the answer:

Body code:

<form>In what year was the Republic of China founded?<input type="text" daan="1912" value="" name="t1" /<input type="button" onclick="check ()" name="t2" value="check Answer "/</form>

Code in js:

function check ()
{
  var a=document.getelementbyid ("t1");
  var a1=a.value;
  var a2=a.getattribute ("daan");
  if (a1 == a2)
  {
    alert ("Congratulations, you got it right!");
  }
  else
  {
    alert ("Fool!");
  }
}

Results when answered correctly:

Example 2:Agree button,A 10-second countdown, the consent button becomes commitable,Here we use the operation attribute:disabled to change the state of the button,The button is unavailable when disabled="disabled".

Code in body:

<form><input type="submit" name="b1" value="agree (10)" disabled="disabled" /></form>

Code in js:

var n=10;
var a=document.getelementbyid ("b1");
function bian ()
{
   n--;
   if (n == 0)
   {
      a.removeattribute ("disabled");
      a.value="Agree";
      return;
   }
   else
   {
      a.value="Agree (" + n + ")";
      window.settimeout ("bian ()", 1000);
   }
}
window.settimeout ("bian ()", 1000);

Results of the operation:

Fourth, the operation style

First find the element using its id,Stored in a variable:

var a=document.getelementbyid ("id");

You can then manipulate the attributes of the element:

a .;Manipulate the attributes of this id style.

The style is the style in css,All styles can be manipulated with code.

document.body.style.backgroundcolor="color";the background color of the entire window.

Manipulating style classes:a.classname="classname in style sheet" Manipulating a batch of styles

Example 1:Switch between automatic and manual display pictures;

the code in the body,Make a div with a background image and control objects on both sides:

<div><div onclick="dodo (-1)"></div>
<div onclick="dodo (1)"></div></div>

Code in style sheet:

<style type="text/css">
* {
   margin:0px auto;
   padding:0px;
   font-family:"Microsoft Yahei";}
#tuijian
{
   width:760px;
   height:350px;
   background-repeat:no-repeat;}
.pages
{
   top:200px;
   background-color:#000;
   background-position:center;
   background-repeat:no-repeat;
   opacity:0.4;
   width:30px;
   height:60px;}
#p1
{
   background-image:url (imges/prev.png);
   float:left;
   margin:150px 0px 0px 10px;}
#p2
{
   background-image:url (imges/next.png);
   float:right;
   margin:150px 10px 0px 0px;}
</style>

code in js,Here, the huan () function is called every 3 seconds to modify the style of the background image.When you click left and right to switch, it becomes manual switching.Automatic switching stops:

<script language="javascript">
var jpg=new array ();
jpg [0]="url (imges/tj1.jpg)";
jpg [1]="url (imges/tj2.jpg)";
jpg [2]="url (imges/tj3.jpg)";
var tjimg=document.getelementbyid ("tuijian");
var xb=0;
var n=0;
function huan ()
{
   xb ++;
   if (xb == jpg.length)
   {
      xb=0;
   }
   tjimg.style.backgroundimage=jpg [xb];
   if (n == 0)
   {
      var id=window.settimeout ("huan ()", 3000);
   }
}
function dodo (m)
{
   n=1;
   xb=xb + m;
   if (xb<0)
   {
       xb=jpg.length-1;
   }
   else if (xb>= jpg.length)
   {
       xb=0;
   }
   tjimg.style.backgroundimage=jpg [xb];
}
window.settimeout ("huan ()", 3000);</script>

The effect is as follows:

Five, related element operations:

var a=document.getelementbyid ("id");find a;

var b=a.nextsibling, find the next sibling element of a,Note the inclusion of spaces;

var b=a.previoussibling, find the previous sibling element of a,Note the inclusion of spaces;

var b=a.parentnode, find the parent element of a;

var b=a.childnodes, find out the array,Find the next child element of a;

var b=a.firstchild, the first child element,lastchild last one,childnodes [n] find the number;

alert (nodes [i] instanceof text);Yes returns true, not returns, use if to determine if its value is false, you can remove spaces.

6. Creation, addition and deletion of elements:

var a=document.getelementbyid ("id");find a;

var obj=document.createelement ("tag name");create an element

obj.innerhtml="hello world";When adding, you first need to create an element.

a.appendchild (obj);Add a child element to a.

a.removechild (obj);Remove a child element.

A.selectedindex in the list:the selected number;

//a.options[a.selectindex] Press the index to get the number of option objects

Seven, string operations:

var s=new string ();or var s="aaaa";

var s="hello world";

alert (s.tolowercase ());turn lowercase touppercase () turn uppercase

alert (s.substring (3,8));intercepted from the third position to the eighth position

alert (s.substr (3,8));starting at the third position,Truncate eight characters in length,Do not write the following numbers to the end.

s.split ("");will split the characters according to the specified characters,Into an array,Automatic sorting

s.length is the property

s.indexof ("world");the first occurrence of world in the string,Did not return -1

s.lastindexof ("o");o The last occurrence of o in the string

Eight,Date time operation

var d=new date ();current time

d.setfullyear (2015,11,6);/* minus 1 setting on the month i want to set * /

d.getfullyear:take the year;

d.getmonth ():take the month, take out less 1;

d.getdate ():take the day;

d.getday ():Get the day of the week

d.gethours ():take hours;

d.getminutes ():take minutes;d.getseconds ():take seconds

d.setfullyear ():set the year,Pay attention to -1 when setting the month.

nine,Operations on mathematical functions

math.ceil ();smallest integer greater than the current decimal

math.floor ();The largest integer for the current decimal of the fish

math.sqrt ();square root

math.round ();round

math.random ();random number, between 0-1

Ten, little knowledge

Double quotes outside,Inside double quotes changed to single quotes;

When the line height is set in the div,No matter how high the setting is,The occupied line defaults to the middle position (the middle of the upper and lower areas of the div-[default] vertical center)

The value taken out of the text box is a string,Need to be converted to a number with parseint ()

s.match (reg);s represents a string,reg represents a string,Match the two,If the two strings do not match,Returns a null.

  • Previous Method of Yii model operation criteria search database
  • Next Detailed usage of Yii's Srbac plugin