JavaScript基础 – HTML DOM元素

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

1.查找 HTML 元素

(1)通过 id 查找 HTML 元素

document.getElementById(“id”);

(2)通过标签名查找 HTML 元素

document.getElementsByTagName(“p”);  注意这里是Elements,跟id不同

(3)通过类名查找 HTML 元素

document.getElementByClassName(“class”);

注意:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
//通过ID查找元素
var x = document.getElementById("id1");
x.style.color = "blue";
//通过class查找元素,注意得到的是一个数组,即使只找到一个元素也是数组
var y = document.getElementsByClassName("c");
var z = y[0].getElementsByTagName("p");	//通过标签名查找元素,得到的也是个数组
z[0].style.color = "red";
</script>

2.改变 HTML 输出流

使用 document.write() 直接向 HTML 输出流写内容

3.改变 HTML 内容

最简单的办法使用 innerHTML 属性。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
var x = document.getElementById("id1");
x.innerHTML = "<p>更换新内容</p>";
</script>

4.改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value
<img id="image" src="abc.jpg">
		
<script type="text/javascript">
var x = document.getElementById("image");
x.src = "123.jpg";
</script>

5.改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

相关的style属性可以参考 http://www.w3school.com.cn/jsref/dom_obj_style.asp

6.HTML 事件属性

<button onclick="displayDate()">点击这里</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

7.使用 HTML DOM 来分配事件

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

8.onload 和 onunload事件

<body onload="test()">

<script>
function test(){
alert("测试");
}
</script>
</body>

onunload貌似不起作用,可能跟浏览器兼容问题有关

9.onchange 事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

</body>
</html>

10.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

11.onmousedown、onmouseup 以及 onclick 事件

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

12.onfocus

13.onmouseover 和 onmouseout

<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上
</h1>

 

JavaScript基础 – 异常处理try catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

与PHP类似

try
{
	aaaa("12243");
}catch(err){
	document.write(err.message);	//输出 aaaa is not defined
}

可以使用throw抛出异常

try
{
	var a = 10;
	if(a<100) throw "var erro";
}catch(err){
	document.write(err);	//输出 var erro
}

 

JavaScript基础 – 流程控制if switch

一、if语句

if 语句 – 只有当指定条件为 true 时,使用该语句来执行代码

if…else 语句 – 当条件为 true 时执行代码,当条件为 false 时执行其他代码

if…else if….else 语句 – 使用该语句来选择多个代码块之一来执行

特别注意:else if 之间要空开,这点与PHP不同。

二、switch语句

switch 语句 – 使用该语句来选择多个代码块之一来执行

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

用法与PHP中的一致。

三、for循环

1.for循环

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

用法与PHP一致

2.for/in循环

遍历数组或对象的属性

var person={fname:"John",lname:"Doe",age:25};
var txt = new String();
for (x in person)
{
txt=txt + person[x];
}
document.write(txt);

3.while 和 do..while循环

与PHP类似

4.break 和 continue

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

 

JavaScript基础 – 函数和运算符

一、函数

使用function定义函数,函数参数不能设置默认值。

function myfun(var1,var2){
	$str = "My name is "+var1+", my age is "+var2;
	console.log($str);
}
myfun("zhangsan",12);

可以使用return 返回值

function myfun(var1,var2){
	var str = "My name is "+var1+", my age is "+var2;
	return str;
}
var result = myfun("zhangsan",12);
alert(result);

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

二、运算符

1.算术运算符

+ 加  – 减  * 乘  / 除  % 求余数  ++ 递增  — 递减

2.赋值运算符

= += -= *= /= %=

3.字符串运算符

+ 运算符是将两个字符串连接起来。

var str1 = "China";
var str2 = "BeiJing";
var str = str1+str2;
document.write(str);  //输出ChinaBeiJing

4.对字符串和数字进行加法运算

x=5+5;  结果是10

x=5+”5″;  结果是55

字符串和数字相加,会直接当做字符串连接起来。

如果向让5+”5″的结果是10,需要对字符串进行转数字。

字符串转数字有两种方法:

(1)使用转换函数:parseInt()转为整数  parseFloat()转为浮点数

(2)强制类型转换:Number()转为数字(可以是整数或浮点数),还有其他两种强制类型转换 Boolean()转为boolean值  String()转为字符串。

5.比较运算符

== 等于   === 全等于(值和类型都相等)  != 不等于  > 大于  < 小于  >= 大于等于  <= 小于等于

6.逻辑运算符

&& 逻辑与   || 逻辑或  ! 逻辑非

7.条件运算符

variablename=(condition)?value1:value2

var a = 5;
var b = 8;
var d = a>b ? "a大于b" : "a小于b";
document.write(d);

类似于PHP的三元运算符。

 

JavaScript基础 – 变量和数据类型

一、变量

1.声明变量

变量必须以字母开头,也能以 $ 或 _ 符号开头;

变量名称对大小写敏感;

使用 var 关键字声明变量;

可以在一条语句中声明多个变量;

var a=1,b=2,c=3;  //可以一次声明多个变量

未使用值来声明的变量,值是 undefined;

如果重新声明 javascript 变量,该变量的值不会丢失;

var a = 12;
var a;
alert(a);  //值仍是12

2.全局变量和局部变量

函数内部声明的变量(使用var)是局部变量,只在函数内有效

在函数外部声明的变量是全局变量,所有脚本和函数都能访问它。(与php不同)

注意:如果函数内的变量与全局变量重名,函数内使用全局变量需要用 this

var a = 100;
function fun(){
	var a = 200;
	alert(this.a); //输出 100
}
fun();

二、数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

1.字符串

字符串可以是引号中的任意文本,可以用单引号或双引号

var a = "aaaa";
var b = 'bbbbb';
var c = "this is 'c'";
var d = 'this is "d"';
var e = "this is \"e\"";
var f = 'this is \'f\'';

双引号与单引号的区别:

(1)只使用字符的字符串,单引号和双引号没有区别

(2)在单引号包括的字符串中可以直接用双引号,在双引号包括的字符串中可以直接用单引号

(3)如果在双引号包括的字符串中用双引号,需要用反斜杠转义,注意是”\”   ;同样在单引号包括的字符串中用单引号,也需要转义

(4)如果要用反斜杠,则输入‘\\’

2.数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

var a = 3.14;
var b = 5;

3.布尔

布尔(逻辑)只能有两个值:true 或 false。

var a = true;
var b = false;

4.数组

数组有两种定义方式:[]、Array()

//使用[]定义数组
var arr1 = ["car","house","money"];
//使用Array,注意区分大小写
var arr2 = new Array();
arr2[0] = "car";
arr2[1] = "house";
arr2[2] = "money";	//特别注意不能用arr2[]定义,它不会自动分配下标
var arr3 = new Array("car","house","money");
//获取某个值用arr[1],下标从0开始
alert(arr3[1]);

可以定义关联数组,由于js的一切都是对象,因此关联数组本质上是给数组增加了属性,因此使用关联数组并不是一个好习惯,我们可以使用对象,其实对象也就是关联数组。

var arr = new Array();
arr["a"] = "aaaa";
arr["b"] = "bbbb";

注意:常规数组是可以通过数组的length属性获得数组长度,比如 arr.length。但是关联数组无法使用length获取长度。

5.对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

var person={firstname:"Bill", lastname:"Gates", id:5566};
alert(person.lastname);
alert(person['lastname']);

注意:虽然关联数组和对象非常相似,但是关联数组不能使用 person.lastname 这种方式获取其值。

也可以使用下面的方式定义

var student = new Object();
student.name = "zhangsan";
student.age = 12;
student.sex = "boy";
alert(student.name);

6.Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

var a = 12;
a = null;

7.声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:

var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;