首页 > 代码库 > Javascript笔记

Javascript笔记

 

v 简史

Javascript(原名livesvript)由网景公司1995年开发。

微软和网景公司共同制定script标准ECMA。

Javascript主流版本为4.0版

Javascript关键字 和 保留字

关键字

break

 case 

 catch   

continue 

default     

delete

do 

else    

finally 

for

function

 in

instanceof

if

new 

return

switch 

this

throw

try

typeof

var 

void

while 

with

 

 

 

 

 

保留字

abstract 

boolean

byte 

 char

class

const 

debugger

double 

enum

export

extends

fimal

float

goto 

implements

import

int

interface 

long 

mative

package

private

protected

public

short

static

super

synchronized

throws

transient

volatile

 

 

 

 

 

 

 

 

 

 

v 书写规范

ü Javascrip文件是以块的形式存在,如<script type=text/javascript>……</script>。

ü 外部文件引入 <script type="text/javascript"  src="http://www.mamicode.com/path/xxx.js"><\script>

ü 正常情况将script代码放在body内html代码的最后,即</body>上方。(PS:特殊情况放在head中(此方式一般是引入外部文件,)

ü script块中的注释符为 “  /* */(推荐)  ”尽量不使用 // 的方式进行注释。(PS:一旦进行代码压缩,//注释就会发生错误)

ü 代码一定要对齐和缩进。(PS:代码缩进的问题步骤,敲两下空格(enter)+tab键(4空格))

ü  一定要在方法上方写明方法的作用(PS:身为合格程序员的良好习惯)

ü 去掉空白行,方法之间的空白行只要一个就行了

ü Var变量,function函数,语句一定要加分号作为结尾。

ü Javascript属于若语言类型,只有一个唯一变量标示符“var”,但内部也区分数据类型,

(PS:Javascript中的数据类型有如下:字符串、数字、布尔、数组、对象、Null、Undefined;

var x = "xxx";//字符串(string)

var z = 2;//字符串(string)

var flag = false;//boolean

var flag = true;//boolean

var arr = ["xxx","xxuuu","zzz"];//数组,Array

var nl = null;//null;//空

var nl = undefined;//找不到)

ü var变量的命名与java相同,以字母,下划线_ ,$美元符号开头

ü 变量名定义一定要有意义。(PS:毫无意义的命名只会影响代码的可读性)

ü Javascript中的方法函数function(){ },也属于对象类型。

ü 格式是:function 方法名(Arguments){语句}

ü 调用方法,方法名后要加(this);指向当前方法

 

v 弹出窗口,前缀为window.

alert:(弹出带确认按钮的窗口)(PS:常用语代码调试)

confirm:(弹出带确认和取消的窗口)

pompt:(弹出可输入内容的窗口)

 

v  案例 

 getAttribute获取元素的属性和值 

 <body>

<input type="button" name="按钮名称" age="23" onclick="test(this)" value="http://www.mamicode.com/测试"/>

<a href="javascript:void(0)" onclick="javascript:test()"></a>

<a href="javascript:void(0);" onclick="test()"></a>

<script type="text/javascript">

/*测试getAttribute属性*/

function test(obj){

/*obj:就是当前元素本身*/

alert(obj.type);/*获取类型*/

alert(obj.name);

alert(obj.value);

alert(obj.getAttribute("type"));

alert(obj.getAttribute("age"));

};

</script>

 </body>

Js-01-end

 

v Java的对象

Javascript除了 数字,字符串,布尔值(true/false),null和undefined值。其他的所有值都是对象。如:数组,object,function,正则表达式Regex,日期Date。

对象 = {属性:值};

如:var emobj = {};   /*空对象*/

var book = {"name":"三毛"};/*对象属性可以多个用英文的逗号间隔*/

(PS:对象的属性和值推荐全加双引号(推荐))

 

ü javascript对象的检索修改方式有两种

var book = {"name":"三毛流浪记","price":10};   (PS:创建的对象)

第一种:book.name ="三毛流浪记x";  (PS:对象检索方式一)

第二种:book["name"] = "三毛流浪记x";(PS:对象的检索方式二,对象名加中括号”[ ]”,对象值不加(推荐))

空对象直接添加属性:book["price"] = 100;

(PS:修改对象属性值 如 对象名[“对象属性”] = “属性的值”; 对象名.对象属性 = “属性的值”;,对象的“函数”值,function( ) { }大括号后不加“; ”。)

 

ü 对象反射 

typeof,反回对象的数据类型

Typeof 对象名

ü 对象删除 

delete. 对象名.属性

 

v 日期笔记

ü 1:获取月份的时候一定要加1

ü 2:获取日期的时候一定要减1

常用的date属性                                                                        

var date = new Date();                                                    

date.getDate();     // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。       

date.getDay();      // 从 Date 对象返回一周中的某一天 (0 ~ 6)。          

date.getMonth();    // 从 Date 对象返回月份 (0 ~ 11)。                  

date.getFullYear(); // 从 Date 对象以四位数字返回年份。不用使用getYear()。

date.getHours();    // 返回 Date 对象的小时 (0 ~ 23)。                   

date.getMinutes();  // 返回 Date 对象的分钟 (0 ~ 59)。                   

date.getSeconds();  // 返回 Date 对象的秒数 (0 ~ 59)。                   

date.getMilliseconds(); //返回 Date 对象的毫秒(0 ~ 999)。                 

date.getTime()方法返回从1970-01-01开始到现在的毫秒数  

 Set系列方法

Set系列方法和Get系列方法一一对应,如:

date.setDate(24);

date.setUTCDate(24);

date.setTime(time)方法以毫秒数设置Date对象,和new Date(time)的作用一样。    

日期转字符串

toString();         // Tue Sep 11 2012 15:09:01 GMT+0800

toTimeString();     // 15:09:34 GMT+0800 

toDateString();     // Tue Sep 11 2012 

toGMTString();      // Tue, 11 Sep 2012 07:10:05 GMT 

toUTCString();      // Tue, 11 Sep 2012 07:10:17 GMT 

toLocaleString();   // 2012年9月11日 15:10:31 

toLocaleTimeString();   // 15:10:45 

toLocaleDateString();   // 2012年9月11日 

Date构造函数

当前时间 new Date();

Tue Sep 11 2012 15:37:46 GMT+0800 (中国标准时间)

new Date(3600 * 24 * 1000);

Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)

除了构造函数外,Date.UTC()也用于构造日期,但是并不返回Date,而是返回从1970-01-01开始的毫秒数,比如:

 1328054400100, 即2012-01-01 00:00:00 0100

Date.UTC(2012, 1, 1, 0, 0, 0, 100);

Date.parse(string)方法并不是返回Date,而是返回整数

Date.parse("Jul 8, 2005");

Date.parse("2005-07-08");

Date.parse("2005/07/08");

v  案例 

 页面显示时间(PS:需要引入老师的工具类) 

 <script type = "text/javascript" src="http://www.mamicode.com/js/Kutil.js" ></script>/*引入工具类js文件*/

 </head>

 <body>

 <div id="tm-timer"></div>

  <script type="text/javascript">

  setInterval(function(){

  var dateString = new Date().format("yyyy-MM-dd HH:mm:ss")

  document.getElementById("tm-timer").innerHTML = dateString;

  },1000);

  </script>

 

(PS:关于工具类的笔记跳过,有心者可以自行补充,分享!!!)

Js-02-end

 

v 运算及循环

null undefined,在javascript代表都是空

javascript中的字符串是由单引号或者双引号引起来的一串句子

Javascript运算

ü 加: +    减: -    乘: *     除: /

ü 取余: %(取整除后的余数) 如果分子小于分母那么直接取分子

ü XX++:递增 / ++XXX

ü XX--:递减 / --XX

ü 逻辑判断时一个是先比较后执行++,-- ,一个是先执行++,--后比较.

ü (PS:Javascript 的数字(number)是浮点型,精度为16浮点位。) 

 

 

 

 

 

条件语句

If...Else 语句

格式:if (条件) {

  只有当条件为 true 时执行的代码

}

如:

if(1==1){

   alert("进来了吗!");

}else{

   alert("没有进来!");

}

 

If...else if...else 多重语句

if (条件 1) {

   当条件 1 为 true 时执行的代码

  }else if (条件 2){

   当条件 2 为 true 时执行的代码

  }else{

   当条件 1 和 条件 2 都不为 true 时执行的代码

  }

 

Switch  case语句

 

 

 

switch(条件,一般为case的值){

case 1:执行代码块 1;break;

case 2:执行代码块 2;break;

default::执行代码;break;

}

 

循环语句

1:循环之----for

  格式如下:

  for(初始化(1);逻辑判断(2);赋值(3)){

 //循环体(4)

  }

  执行过程是:1--->2--->4-->3

  for循环什么时候结束呢:当逻辑判断为假(false)的时候,就终止循环了.

v 例子

从1打印到100

  for(var i=1;i<=100;i++){

 document.wirter("  "+i)

  }

 

 2:循环之----while

 格式如下:

 while (条件){

   需要执行的代码

 }

v 例子

从1打印到50

 var i = 1;

 while(i<=50){

document.write("<span>"+i+"</span> ");

i++;

 }

 

3:循环之---do-while

 格式如下:

 do{

循环体2

 }while(逻辑判断1);

 首先还是进入逻辑判断 1 ---> 2

v 例子

从1打印到50

 

     var k = 1;

 do{

document.write("<span>"+k+"</span> ");

k++;

 }while(k<=50);

 

小结:

for,while,do-while

  1. 所有的循环语句执行时都是先进行逻辑判断。Do....while也一样
  2. do while与while for是有区别的:do while不管逻辑条件是否满足都会进行循环体一次.
  3. 在开发过程中建议大家使用一种就行了:使用for
  4. 循环跳出是用break和continue,break 和 continue 语句只能运用于循环
  5. break:一个循环如果遇到break;就跳出当前循环,结束当前循环
  6. continue:一个循环如果遇到continue,跳出当前不符合条件,继续往下循环
  7. 方法的跳出是使用:return;
  8. =是赋值,==才是逻辑判断  

for循环的几种写法

(推荐写法)

 for(var i=0;i<101;i++){

 }

 第一种

 var n = 0;

 for(;n<=101;){

n++;

 }

 第二种

 var k = 1;

 for(var i=0;i<100;i++,k++){

 }

v javascript---数组Array

定义方式如下:

var arr = [ ]; 初始化一个空长度的数组(推荐定义方式)

var arr = new Array(); 创建内存

数组的检索方式如下:

var book = ["xiaoer","单晨","占课"];

book[0] = "xiaoer";

book[1] ="单晨";

(PS:与对象的检索相似)

 

第一种方式定义一个空数组

var arr = [ 空 ];

第二种定义了一个有值的数组

var arr2 = [1,3,4,5,6];

alert(arr2[4]);  显示6

第三种定义方式:先定义后赋值的数组

var arr3 = [ 空 ];

arr3[0] = "xiaoer";

arr3[1] = "单晨";

***********************************************************

/*********************数组的合并--concat***************************/

var arr = ["George","John","Thomas"];

var arr2 = ["James","Adrew","Martin"];

document.write(arr.concat(arr2));

/*********************数组添加元素--push***************************/

var arr5 =  ["xiaoer","KID","陈浩舟","白羊"];

alert("数组push之前的长度是:"+arr5.length+"值是:"+arr5.toString());

arr5.push("IOY");

arr5.push("简简单单");

alert("数组push之后的长度是:"+arr5.length+"值是:"+arr5.toString());

/*********************数组分隔符替换--join***************************/

var arr6 =  ["1","2","3","4","5","6"];

alert("数组join之前是用逗号分开的:"+arr6.toString());

alert("数组join之后是用#分开的:"+arr6.join("#").toString());

/*********************数组的删除第一个元素--shift***************************/

var arr7 =  ["1","2","3","4","5","6"];

alert("数组shift之前的值是:"+arr7.toString()+"长度:"+arr7.length);

var value = arr7.shift();

alert(value);

alert("数组shift之后值的是:"+arr7.toString()+"长度:"+arr7.length);

/*********************数组的删除最好一个元素--prop***************************/

var arr8 =  ["1","2","3","4","5","6"];

//alert("数组pop之前的值是:"+arr8.toString()+"长度:"+arr8.length);

var value = arr8.pop();

//alert(value);

//alert("数组pop之后值的是:"+arr8.toString()+"长度:"+arr8.length);

 

 1、slice

  slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变

 var color = new Array(‘red‘,‘blue‘,‘yellow‘,‘black‘);

 var color2 = color.slice(1,2);

 alert(color);   //输出   red,blue,yellow,black

 alert(color2);   //输出  blue;注意:这里只有第二项一个值

  2、splice

  splice是JS中数组功能最强大的方法,它能够实现对数组元素的删除、插入、替换操作,返回值为被操作的值。

  splice删除:  color.splice(1,2) (删除color中的1、2两项);

  splice插入:  color.splice(1,0,‘brown‘,‘pink‘) (在color键值为1的元素前插入两个值);

  splice替换:  color.splice(1,2,‘brown‘,‘pink‘)  (在color中替换1、2元素);

 var color = new Array(‘red‘,‘blue‘,‘yellow‘,‘black‘);

 var color2 = color.splice(2,3,‘brown‘,‘pink‘);

 alert(color);     // red,blue,brown,pink alert(color2);    // yellow,black

 

Slice和 splice总结

Slice是从已有数组中截取值,将截取的值赋给新的数组(新数组为空,有值的无效),且元数组的值不变。

 splice方法--添加、删除,修改元素

语法: splice(index,count,items(值));

 如果count等于0或者是负数的话。那么就是在下标index前面追加元素

 如果count大于0的话,那么久是从当前元素开始截取count位,把items放入到截取的位置.

 如果count大于当前数组长度的话,那么他就是截取到当前数组长度位

arr.splice(1,0,"火狐");在第一个数组值的后面插入“火狐”,如果是(0,0,“火狐”)就是在第一个数组值前面插入“火狐”。

arr.splice(1,2,5,6,7,8,9);在第一个值得后面插入56789五个数组值

arr.splice(1,2,"5,6,7,8,9");在第一个值得后面插入56789五个数组值

与不加引号的书写方式一样但是“56789”这个是一个值

arr.splice(1,-100,"5");//1,5 -100,截取位是0,也就是插入(1,0,“5”),在第一个数组值后面插入5(PS:这种写法本身是错误的)

arr.splice(1,0,"5");//1,5(上面的正确写法)

alert(arr.toString());将数组转换成字符串进行显示

slice(index,count);//截取,规则:count位置截取count-1位

index是必填项,count可以不填写

如果count不定义或者定义了一个大于当前数组的长度的数字的时候,那么它会从当前下标开始截图到结尾

......

 

 

 

v 数组小结

  • 数组下标都是从0开始,也就是说数组里面的第一个元素的下标是0
  • 数组的长度是:.length
  • 第一个元素:arr[0] = "xxx"; 最后一个元素:arr[length-1]="xxx"
  • 当一个数组下标越界的时候,返回undefined
  • toString()转成字符串
  • 数组的push()方法是:追加到数组的最后面
  • join()改变数组的分隔符
  • shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
  • pop() 方法用于把数组的最后一个元素从其中删除,并返回最后元素的值
  • slice(start,end);start:下标 end截取的个数(或者是start+1)

(PS:引用工具类的那部分没做记录)

Js-04-end

v 案例

九九乘法表

<style type="text/css">

table td{border:1px solid #ccc;padding:5px;}

table td:hover{background:#141414;color:#fff;}

  </style>

 </head>

 <body>

  <h1>九九乘法表</h1>

  <input type="text" id="number"/><input type="button" onclick="tm_change(this)" value="http://www.mamicode.com/更换"/>

  <hr>

  <div id="tm_box"></div>

  <script type="text/javascript">

//九九乘法表

tm_chengfabiao(9);

function tm_chengfabiao(number){

var html = "<table>";

for(var i=1;i<=number;i++){

html +="<tr>";

for(var j=1;j<=i;j++){

html +="<td>"+i+"*"+j+" = "+(i*j)+"</td>";

}

html +="</tr>";

};

html+="</table>";

//这里代表给div赋值

document.getElementById("tm_box").innerHTML = html;

};

function tm_change(obj){

//获取表单的元素

var number = document.getElementById("number").value;

//if(isEmpty(num) || isNaN(number))return; Tmutil.js

if(isNaN(number))return;

tm_chengfabiao(number);

};

计算器

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Javascript实现计算器</title>

<style type="text/css">

input{width:60px;height:50px;text-align:center;}

#tbCalculator td{text-align:center;vertical-align:middle;}

table td{padding:5px;}

#result{font-size:36px;font-weight:bold;}

</style>

<script type="text/javascript">

/*

1:点击数字

2:点击操作符  

3:获取结果

*/

//alert("45"+45);

//alert("45"+"45");

//alert("45+45");

//alert(eval("45+45"));

//alert(typeof("1.269"*1));

var operator;//保存运算符

var result;//保存点击操作符之前的数字

//点击数字的时候触发的事件.

function tm_number_click(obj){

var number = obj.value;

var inputdom = document.getElementById("result");

//这行代表的意思就是说告诉你:已经是小数了,确保一个数字是小数的话只有一个点.

if(inputdom.value.indexOf(".")>-1  && number==".")return ;

inputdom.value += number;

};

 

//点击+ - * /开始运算事件

function calculation(obj){

operator = obj.value;//获取当前操作符号给全局变量operator赋值

var newValue = document.getElementById("result");

if(newValue.valuehttp://www.mamicode.com/=="")return false;//输入框中没有数字不能运算

result = newValue.value;

newValue.value = "";

};

 

//点击等于符号获取结果

function getResult(obj){

var sourceResult = result * 1;

var inputdom = document.getElementById("result");

var newValue = inputdom.value * 1;

switch(operator){

case "+" : result = sourceResult + newValue; break;

case "-" : result = sourceResult - newValue;break;

case "*" : result = sourceResult * newValue;break;

case "/" : result = sourceResult / newValue;break;

};

inputdom.value = result;

result = "";//清空当前结果

operator = "";//清空当前运行操作符

};

 

/*退格*/

function tm_backspace(obj){

var inputdom = document.getElementById("result");

var inputValue = inputdom.value;

inputdom.value = inputValue.substring(0,inputValue.length-1);

}

 

/*重置,清除*/

function tm_clearall(obj){

operator="";

result = "";

document.getElementById("result").value = "";

document.getElementById("result").focus();

};

 

</script>

</head>

 

<body>

 

<table id="tbCalculator" width="360" border="1" align="center" cellpadding="0" cellspacing="0">

<tr>

<td height="30" colspan="4" align="center">

<input type="text" name="txtScream" id="result" style="width:180px; border-style:none; text-align:right;"  /> </td>

</tr>

<tr>

<td height="30" colspan="2">

<input type="button" name="btnCE" id="btnCE" value="http://www.mamicode.com/C E" style="width:80px;" align="right"; onclick="tm_clearall(this);" /></td>

<td height="30" colspan="2">

<input type="button" name="btn10" id="btn10" value="http://www.mamicode.com/Backspace" style="width:80px;" align="right"; onclick="tm_backspace(this);" /></td>

</tr>

<tr>

<td height="30"><input type="button" name="btn7" id="btn7" value="http://www.mamicode.com/7" onclick="tm_number_click(this);" /></td>

<td><input type="button" name="btn8" id="btn8" value="http://www.mamicode.com/8" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn9" id="btn9" value="http://www.mamicode.com/9" onclick="tm_number_click(this);" /></td>

<td><input type="button" name="btn6" id="btn6" value="http://www.mamicode.com/" onclick="calculation(this);" /></td>

</tr>

<tr>

<td height="30">

<input type="button" name="btn4" id="btn4" value="http://www.mamicode.com/4" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn5" id="btn5" value="http://www.mamicode.com/5" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn6" id="btn6" value="http://www.mamicode.com/6" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn13" id="btn13" value="http://www.mamicode.com/*" onclick="calculation(this);" /></td>

</tr>

<tr>

<td height="30">

<input type="button" name="btn1" id="btn1" value="http://www.mamicode.com/1" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn2" id="btn2" value="http://www.mamicode.com/2" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn3" id="btn3" value="http://www.mamicode.com/3" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btn18" id="btn18" value="http://www.mamicode.com/-" onclick="calculation(this);" /></td>

</tr>

<tr>

<td height="30"><input type="button" name="btn0" id="btn0" value="http://www.mamicode.com/0" onclick="tm_number_click(this);"/></td>

<td><input type="button" name="btndot" id="btndot" value="http://www.mamicode.com/." onclick="tm_number_click(this);" /></td>

<td><input name="btn22" type="button" id="btn22" valuehttp://www.mamicode.com/="=" onclick="getResult();" /></td>

<td><input type="button" name="btn23" id="btn23" value="http://www.mamicode.com/+" onclick="calculation(this);" /></td>

</tr>

</table>

</body>

</html>

 

制作计算器思路整理:

1首先为每一个按钮添加点击事件,将按钮值传入显示框。

2设定全局变量,接收输入的第一个值,接收运算符。

3临时变量接收运算符之后传入的值

4点击等于号,判断输入的运算符并运算,得出结果

5清空所有变量

Js-05-end

v Javascript中的Doucment

 

Javascript操作网页上的标签元素使用document。

什么是document 文档对象模型Document Object Model)---DOM

  • Document对象属性

document.title //设置文档标题等价于HTML的title标签

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期,只读属性

document.fileModifiedDate //文件修改日期,只读属性

document.fileSize //文件大小,只读属性

document.cookie //设置和读出cookie

document.charset //设置字符集 简体中文:gb2312

  • 常用对象方法

document.write() //动态向页面写入内容

document.createElement(Tag) //创建一个html标签对象

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(name) //获得指定name值的对象

document.getElementsByTagName(tagName) //获得指定标签值的对象

document.body.appendChild(oTag) //相对父标签,添加子标签元素。

document.getElementById(”ID”).innerText //动态输出文本

document.getElementById(”ID”).innerHTML //动态输出HTML

document.getElementById(”ID”).outerText //同innerText

document.getElementById(”ID”).outerHTML //同innerHTML

----------------------------------------------------------------------

var value = document.getElementById("username").value;

Alert(value);

  • Javascript中,写方法和定义的时候严格区分大小写
  • 方法:document.getElementById(元素的id)根据id获取对象
  • 当页面上同时存在两个相同的ID时,只会打印第一个id对应的值
  • .value只有form元素才有意义
  • id选择器:唯一标识符

var value1 = document.getElementById("k_div").innerHTML;

alert(value1);

var value2 = document.getElementById("k_p").innerText;

alert(value2);

  • 获取div.span等其他元素(p,label,em,span,div,h1-h6 a table td tr)

获取值得方式是:innerText(纯文本)/innerHTML(带有格式的文本),如果标签内有嵌入标签,innerHTML,会获取除了id指定的HTML标签外,其他嵌入的标签会保留显示,innerText,只获取标签内的文本内容,不包含标签。

  • 与innerHTML,innerText相对的outerHTML,outerText。

var value1 = document.getElementById("k_div").outerHTML;

alert(value1);

var value2 = document.getElementById("k_p").outerText;

alert(value2);

 

  • outerHTML会显示包含id的标签本身。这点与innerHTML有些许差别。
  • outerText与innerText相同,输出没有差别
  • Form元素用innerHTML/Text,outerHTML/Text无效(无意义)

------------------------------------------------------

Document.getElementByName

document.getElementsByName:只是用含有name元素的标签.如果input

  <input type="checkbox" name="hobbys" value="http://www.mamicode.com/爬山">爬山

  <input type="checkbox" name="hobbys" value="http://www.mamicode.com/音乐">音乐

  <input type="checkbox" name="hobbys" value="http://www.mamicode.com/读书">读书

  <input type="checkbox" name="hobbys" value="http://www.mamicode.com/游泳">游泳

  <script type="text/javascript">

var divObj = document.getElementsByName("hobbys");

divObj[2].value = "睡觉";

alert(divObj[2].value);

//value/innerText/innerHTML/outerText/outerHTML

  </script>

 

------------------------------------------------------

Document.getElementByTagName

document.get(获取) Elements(元素)  By(通过)  TagName(标签)(tagName)通过

document.getElementsByTagName(tagName)通过标签名获取当前标签对象,返回数组

var objArr = document.getElementsByTagName("div");

document.write(objArr[1].innerHTML);

----------------------------------------------------

document.body.appendChild(oTag) 动态生成一个HTML对象

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

javascript内置函数大全

 

1.Date:日期函数属性(1): constructor 所修立对象的函数参考 prototype 能够为对象加进的属性和方法 办法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包括)以后为4位 getFullYear() 返回完全的4位年份数 getMonth() 返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) getSeconds() 返回秒数(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依据国际时间来得到如今是礼拜几(0-6) getUTCFullYear() 根据邦际时间来失掉完全的年份 getUTCMonth() 依据国际时间来得到月份(0-11) getUTCDate() 依据国际时间来失掉日(1-31) getUTCHours() 依据国际时间来失掉小时(0-23) getUTCMinutes() 根据邦际光阴来往归分钟(0-59) getUTCSeconds() 依据国际时间来返回秒(0-59) getUTCMilliseconds()依据国际时间来返回毫秒(0-999) getTime() 前往自1970年1月1号0:0:0到如今一同花来的毫秒数 getTimezoneoffset() 往归时区偏偏差值,便格林威乱均匀时光(GMT)取运转足原的盘算机所处时区设置之间相差的分钟数) parse(dateString) 返回正在Date字符串中自从1970年1月1日00:00:00以来的毫秒数 setYear(yearInt) 设置年份.2位数或4位数 setFullYear(yearInt)设置年份.4位数 setMonth(monthInt) 设放月份(0-11) setDate(dateInt) 设置日(1-31) setHours(hourInt) 设置小时数(0-23) setMinutes(minInt) 设置分钟数(0-59) setSeconds(secInt) 设放秒数(0-59) setMilliseconds(milliInt) 设放毫秒(0-999) setUTCFullYear(yearInt) 依据国际时间来设置年份 setUTCMonth(monthInt) 依据国际时间来设置月(0-11) setUTCDate(dateInt) 依据国际时间来设置日(1-31) setUTCHours(hourInt) 依据国际时间来设置小时 setUTCMinutes(minInt) 依据国际时间来设置分钟 setUTCSeconds(secInt) 依据国际时间来设置秒 setUTCMilliseconds(milliInt)根据邦际时间来设置毫秒 setTime(timeInt) 设置自1970年1月1日开端的时间.毫秒数 toGMTString() 依据格林威乱时光将Date对于象的日期(一个数值)改变成一个GMT光阴字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString() 依据通用时间将一个Date对象的日期转换为一个字符串 toLocaleString() 把Date对象的日期(一个数值)改变成一个字符串,使用所在盘算机上配置使用的特定日期格局 toSource() 显示对象的源代码 toString() 将日期对象转换为字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往归自格林威乱尺度光阴到指订时光的差距,双位为毫秒 valueOf() 返回日期对象的本初值

 

2.Math:数学函数

constructor 所树立对象的函数参考 prototype 可以为对于象参加的属性和方式 E 欧推常质,天然对数的顶(约等于2.718) LN2 2的天然对数(约即是0.693) LN10 10的天然对数(约等于2.302) LOG2E 以2为顶的e的对数.(约等于1.442) LOG10E 以10为顶的e的对数(约等于0.434) PI ∏的值(约即是3.14159) SQRT1_2 1/2(0.5)的平方根(便l除以2的平方根,约即是o.707) SQRT2 2的平方根(约等于1.414) 方法: abs(x) 返回数字的相对值 acos(x) 返回数字的反余弦值 asin(x) 返回数字的反正弦值 atan(x) 返回位于-PI/2 和 PI/2 的反正切值 atan2(y,x) 前往(x,y)位于 -PI 到 PI 之间的角度 ceil(x) 返回 x 四舍五入后的最大整数 cos(x) 前往一个数字的余弦值 exp(x) 返回 E^x 值 floor(x) 返回 x 四舍五入后的最小整数 log(x) 返回底数为E的自然对数 max(x,y) 返回 x 和 y 之间较大的数 min(x,y) 返回 x 和 y 之间较小的数 pow(x,y) 返回 y^x 的值 random() 返回位于 0 到 1 之间的随机函数 round(x) 四舍五进后与整 sin(x) 返回数字的正弦值 sqrt(x) 返回数字的平方根 tan(x) 返回一个角度的正切值 toSource() 显示对象的流代码 valueOf() 返回数教对象的本初值3.Number 属性: MAX_VALUE The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN_VALUE The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE_INFINITY A value that is less than MIN_VALUE. POSOTIVE_INFINITY A value that is greater than MAX_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object valueOf() 返回数教对象的本初值4.Boolean属性: constructor 所树立对象的函数参考 prototype 可以为对象参加的属性和方式 法子: toSource() 显示对象的流代码 toString() 将布我值转换为字符串,并且返回成果 valueOf() 返回布我对象的原始值

5.String :字符函数属性: constructor 所树立对象的函数参考 prototype 可以为对于象参加的属性和方式 length 返回字符串的字符长度 法子(20): anchor("name")用来把字符串转换为HTML锚面标志内(<A NAME=>) big() 把字符串中的文本变成大字体(<BIG>) blink() 把字符串中的文本变成闪耀字体(<BLINK>) bold() 把字符串中的文本变成乌字体(<B>) fixed() 把字符串中的文本变成流动间距字体,便电报情势(<TT>) fontcolor(color)设置字符串中文本的色彩(<FONT COLOR=>) Fontsize(size) 把字符串中的文本变成指定大小(<FONTSIZE=>) italics() 把字符串中的白原变成斜字体(<I>) Link(url)用来把字符串转换-HTML链交标志中(<A HREF=http://www.mamicode.com/>) small() 把字符串中的文本变成小字体() strike() 把字符串中的文本变成划掉字体() sub() 把字符串中的文本变成下标(subscript)字体((SUB>) sup() 把字符串中的文本变成上标(superscript)字体() charAt(index) 返回指定索引处的字符 charCodeAt(index)返回一个整数,该整数表现String对象中指定位置处的字符的Unicode编码 concat(string2)衔接两条或少条字符串 fromCharCode(num1, num2, …,BB霜, numN)获取指定的Unicode值并返回字符串 indexOf(searchString, startIndex) 返回字符串中第一个呈现指定字符串的地位 lastlndexOf(searchString, startIndex) 返回字符串中最后一个呈现指定字符串的地位 match(regex) 在字符串中查觅指定值 replace(regex, newString)将字符串中的某些字符替代成其它字符 search(regex) 针对某施行值对字符串入止查觅 slice(startIndex, endIndex)将部门字符抽出并在新的字符串中返回剩余局部 split(delimiter)将字符串分配为数组 substr(startIndex, length) 从startIndex与,取length个字符 substring(startIndex, endIndex) 从startIndex和endIndex之间的字符,没有包含endIndex toLowerCase() 把字符串中的文本变成小写 toUpperCase() 把字符串中的白本变成大写 toSource() 显示对象的源代码 valueOf() 返回字符串对象的原始值

6.Array :数组函数属性: constructor 所修立对象的函数参考 prototype 能够为对象加入的属性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length 获取数组元素的个数,即最大下标加1办法(13):concat(array1,arrayn)将两个或两个以上的数组值衔接止来,合并后返回成果 join(string) 将数组中元素合并为字符串,十月妈咪,string为分隔符.如省详参数则直交合并,不再分隔 pop() 移除数组中的最后一个元素并返回当元素 push(value) 在数组的终尾加上一个或多个元素,并且返回新的数组长度值 reverse() 倒置数组中元素的次序,反背排列 shift() 移除数组中的第一个元素并返回当元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]]) 返从一个数组中移除一个或少个元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function) 在已指定排序号的情形下,依照元素的字女次序排列,假如不是字符串类型则转换成字符串再排序,返回排序后的数组 splice() 为数组删除并加加新的元素 toSource() 显示对象的源代码 toString() 将数组一切元素返回一个字符串,其间用逗号分隔 unshift(value)为数组的开端部门加上一个或者少个元荤,并且返回当数组的新长度 valueOf() 返回数组对象的原始值

 

 

10.齐局 属性: Infinity 指定一个正负无限大的数值 NaN 指定一个 “非数字” 值 undefined 指订一个已被赋值的变质法子:decodeURI() 为加稀的URI入止解码 decodeURIComponent() 为加稀的URI组件解码 encodeURI() 将字符串加密为URI encodeURIComponent() 将字符串加稀为URI组件 escape(string) 加密一个字符串 () 使用escape()对一个字符串入止解码 eval_r(string) 断定一个字符串并将其以足本代码的情势施行 isFinite(number) 检测一个值能否为一个有限数字,返回True或False isNaN(string) 检测一个值能否没有是一个有限数字 Number() 将一个对象的值转换为一个数字 parseFloat(string) 将一个字符串解析为一个浮面数字 parseInt(string) 将一个字符串解析为一个整数,没有是四舍五进操做,而是切尾 String(object) 将一个对象值转换为一个字符串 number(object)

11.事情 属性: a.窗心事件,只在body和frameset元素中才有效 onl oad 页里或者图片加载完成时 onunload 用户分开页里时 b.表双元素事情,正在表双元素中才有效 onchange 框内容转变时 onsubmit 点打降接按钮时 onreset 沉新点击鼠标按键时 onselect 白原被挑选时 onblur 元素失来焦点时 onfocus 该元素获与焦面时 c.键盘事情,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆无效 onkeydown 按下键盘按键时 onkeypress 按下或按住键盘按键时 onkeyup 搁启键盘按键时 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元荤里皆无效 onclick 鼠标点打一个对象时 ondblclick 鼠标双打一个对象时 onm ousedown 鼠本被按下时 onm ousemove 鼠标被挪动时 onm ouseout 鼠本分开元荤时 onm ouseover 鼠标经由元素时 onm ouseup 开释鼠本按键时