码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript

时间:2016-07-13 17:06:19      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

JavaScript 概述

JavaScript基于对象和事件驱动的脚本语言,主要应用在客户端。

特点:

1. 交互性(它可以做的就是信息的动态交互)

2. 安全性(不允许直接访问本地硬盘)

3. 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)


JavaScriptJava不同

1. JSNetscape公司的产品,前身是LiveScript;JavaSun公司的产品,现在是Oracle公司的产品

2. JS是基于对象,Java是面向对象。

3. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。

4. JS是弱类型,Java是强类型。


JavaScript语法

每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易。JS中也一样有变量,语句,函数,数组等常见语言组成元素。

1. 变量

通过关键字var来定义,弱类型既是不用指定具体的数据类型。

例:var x = 3; x = “hello”;

注:JS中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)。

注意:Javascript的语句在结尾处是可以不用分号结束的,非严谨语言的特点。

但为了符合编程规范,需要象java一样定义结束符。

而且有些情况是必须写分号的,如:var x = 3 ; var y =5如果两条语句写在同一行,就需要分号隔开。

1)关键字:几乎跟Java一样

2)标识符,分隔符:和Java一样

3)注释:用了Java当中的这两种:   //  和      /* */

4)数据类型:number类型、string类型、boolean类型、undefined(当变量声明但没有赋值)

5)变量:var (弱类型,类似于Java当中的Object)

6)在js当中,单引号和双引号是一样的,封装的都是字符串(但同时有两个引号封装的,内部的要用单引号)

7)全局变量和局部变量

全局变量----只要不是函数内部声明的,都是。并且不会以大括号来区分,也不会以<script>来区分

a、只要不在函数内部声明,那么一个变量即使在导入的.js文件中声明,在页面脚本中同样是有效的。

b、Java当中的变量的作用域是以大括号来区分,而JS不是。

局部变量----函数内部声明的和形参

函数内部的形参也是局部的,里面更改的值只能在内部有效,函数返回之后就无效了

例:

<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>
	<script type="text/javascript">
		//1 标识符,关键字,分隔符---几乎和Java一样
	    //2 注释:只支持  //单行   和    /*多行*/
	    //3 变量:弱类型 , 所有的变量都是用var来声明---本质上就是Java当中的Object类型
	    var x=3;
	    var y="abc";
	    //alert(x+","+y);
	    x="xyz";
	    //alert(x);
	    x=true;//js当中的布尔类型和C一样,有0 和 非0 的概念
	    x+=1;
	    //alert(x);
	    a=3.14;//因为浏览器有兼容性,所以一个变量不声明类型也可以直接对期赋值(但不要去读),因为是弱类型,都是var,写不写一样
	    //alert(a);
	    //alert(aa);//由于变量aa没有声明也没有赋值,所以这里是出错的,没有输出
	    a='aa';
	    //alert(a);//js当中,单引号和双引号是一样的,对应的变量都是字符串---js当中没有字符类型--包含在字符串当中
	    //a=33223232323232332322323232323456;
	    //alert(a);
	    //alert(typeof(a));//number
	    
	    //由于浏览器有兼容性,一条语句的末尾不加分号,也可以正常执行,但这样写不规范,建议还是加上。
    	//另外,同一行当中的多条语句之间的分号不能省,否则不能正常执行
    	var m=1;
    	var n=2;
    	//alert(m+n);
	</script>
	
	<script type="text/javascript">
		//4 基本数据类型
		//alert( typeof("aaaa") );//string
	    //alert( typeof('0') );//string
	    //alert( typeof(false) );//boolean
	    //alert( typeof(100) );//number
	    //alert( typeof(1.23) );//number
	    
	    //alert( typeof('0')=="string" );//true
	    //alert (typeof(x)=='number');//true --使用单引号和双引号,效果是一样的
	    //alert( typeof('0')=="String" );//false----※※※大小写敏感※※※
	    //alert( typeof(x) ); //前面片段中定义的变量,在这里仍然是有效的
	    //alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x
	</script>
	
</body>
</html>


2. 运算符

Javascript中的运算符和Java大致相同。

只是运算过程中需要注意几点:

1, var x = 3120/1000*1000; x = 3120;而不是3000

2, var x = 2.4+3.6 ; x = 6;而不是6.0

3, var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;

加号对于字符串是连接符

4, &&  || 是逻辑运算符  & |是位运算符。

5, 也支持三元运算符

6, 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。

var x = 3;

var y = “123”;

var z = false;

typeof(x); //number

typeof(y); //string

typeof(z); //boolean

例:

<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>	
	<script type="text/javascript">
		//5 运算符:算术、赋值、比较、位运算、三元运算
    	//5.1算术运算
    	var a=3710;
    	//alert("a="+a/1000);
    	//alert("a="+a/1000*1000);
    	var b=2.3;
    	var c=5.7;
    	//alert(b+c);//8
    	//alert(11+23);//34
    	//alert("23"+11);//2311---string---加号为字符串连接
    	//alert("23"-11);//12 ---字符串遇到减号,自动会转换成数值型进行运算
    	//alert(true);//true  和数值进行运算时,true为1,flase为0
    	//alert(true+1);//2
    	//alert(false+1);//1
    	//alert(100%3);//1
    	//alert(100%-3);//1
    	//alert(-100%3);//-1  如果有负数,结果和前面那个数同符号。---和Java是一样的
    	
    	//5.2 赋值运算: =  +=  -=  *=  /=  %=
    	var n=3,m;
    	m=n++;//用法同Java
    	//alert("m="+m+",n="+n);//m=3,n=4
    	
    	var n=3,m;//和Java不同的是,变量可以重复声明
	    m = ++n;//用法同Java
	    //alert("m="+m+",n="+n);//m=4,n=4
	    
	    var n;
    	//alert(n);//4---这里没有对该变量重新赋值,所以用的还是前面的那个,不重新开内存
    	
    	var i=3;
    	i +=3;//其它的如:-=  *=  /=  %=  ,同理
    	//alert("i="+i);
    	
    	//5.3 比较运算符
    	var j=10;
    	//alert( j>5 ); //其它如 :<  >=  <= == != 等,同理
	    //alert( j==10 );
	    //alert( j!=10 );
	    
	    //5.4 逻辑运算符  && || !
	    var k=4;
    	//alert(k>3 && k<10); //true
    	//alert( !(k>3) ); //false
    	//alert( !k );//k是“非0”,再非一下则是flase---0
    	
    	//5.5 位运算符  & | ^ >> <<  >>>(无符号右移) ---和Java一样
    	var c = 6;   //6: 110
                 //3: 011
	    //alert( c&3 );//   010 --2
	    //alert(c^100^100); //c---6---一个数与两个相同的数进行异或运算结果仍然等于原数
	    //alert(c>>>1);//3
	    
	    //5.6 三元运算符---?号表达式  ----和java一样
	    //alert(3>0?100:300);
	    
	    var xxyy;
    	//alert(xxyy); //undefined---如果一个变量声明之后没有赋值,那么就是该值
    	alert(xxyy==undefined);//true ----这个undefined代表的是和true,false等一样的,是一个值,因此不要用引号
    	alert(xxyy=="undefined");//false
	</script>
</body>
</html>

3. 语句(Java语句格式相同)

1. 判断结构(if语句)

注:var x = 3;

if(x==4)//可以进行比较运算。

if(x=4)//可以进行赋值运算,而且可以同样进行判断。不报错。

因为在Js0或者null就是false

0或者非null就是true(通常用1表示)。

所以if(x=4)结果是true

可以通过if(4==y)来解决该问题。因为4=y不会进行判断,而是会报错。

2. 选择结构(switch语句)

java不同的是:因为弱类型,也可以对字符串进行选择。

3. 循环结构(while语句,do…while语句,for语句)

注:不同的是,没有了具体数据类型的限制,使用时要注意。

例:
<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>
	<script type="text/javascript">
	/*
		//if语句
		var x=3;
		if (x>0){
			alert("yes");
		} else {
			alert("no");
		}
		
		if (x-4) {//非0 即是 true,除了0以外的数都是非零的数,即为true
			alert("yes2");
		} else {
			alert("no2");
		}
		
		if (x=4) {//一个“=”号是赋值,赋的值是4,该值同时也作为整个表达式的值---非0, 即是 true
			alert("yes3");
		} else {
			alert("no3");//如果把上面的4改为0,则输出: no3
		}
		
		//根据上面的结果,建议如果是判断某变量是否等于某值,写成如下方式(把数字放在前面)
		if (4==x) {//这种方式能够避免漏写“=”号的bug
			alert("yes4");
		} else {
			alert("no4");
		}
		
		var b=(3,4+5);//逗号表达式中的最后一个式子的值作为整个的结果
		alert(b);
		
		var c=5;
		if(c>1){
		 alert("a");
		}else if(c>2){
		 alert("b");
		}else if(c>3){
		 alert("c");
		}else{
		 alert("d");
		}
		//结果:a
	*/
	</script>
	
	<script type="text/javascript">
		//Java语言:switch表达式支持的类型:byte,int等整数,char,jdk1.7之后增加了String类型
     	//JavaScript语言:支持所有类型,即所有类型的数据都能用于选择
     	var x="x";
     	switch(x){
     		default:alert("c");
     		case "aa":alert("a");break;
     		case "abc":alert("b");
     	}//常规的写法就不说了,说说这种的,这种的显示结果是c和a,因为在default处进入之后并没有break所以会进入到case "aa"里面去
	</script>
</body>
</html>


九九乘法表例子:

<html>
<head>
	<title>javascript语言学习</title>
	<link rel="stylesheet" href=table.css>
</head>
<body>
	
	<script type="text/javascript">
		a:for (var x=0;x<3;x++){
			for (var y=0;y<4;y++){
				document.write("x="+x+" ");
				break a;
			}
			document.write("<br/>");
		}
	</script>
	<hr/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
		for (var x=1;x<=9;x++){
			for (var y=1;y<=x;y++){
				document.write(y+"*"+x+"="+x*y+" ");
			}
			document.write("<br/>");
		}
	</script>
	<br/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
		document.write("<table>");
		for (var x=1;x<=9;x++){
			document.write("<tr>");
			for (var y=1;y<=x;y++){
				document.write("<td>"+y+"*"+x+"="+x*y+"</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
	</script>
</body>
</html>

想要将其他代码融入到Html中,都是以标签的形式。

1、 JS代码存放在标签对<script> js code...</script>中。

2、当有多个html页面使用到相同的JS脚本时,可以将js代码封装到一个文件中,只要在script标签的src属性引入一个js文件。(方便后期维护,扩展)

注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。

例:<script src=”test.js” type=”text/javascript”></script>

注:规范中script标签早期有一个属性language,而现在使用type属性。


<html>
<head>

</head>
<body>
	<!-- js脚本片段可以写任意个,位置也是任意的,只是要注意浏览器的解析顺序 -->
    <!-- js的写法1 -->
    <script type="text/javascript">
    	alert("HelloWorld");
    </script>
    
    <!-- js的写法2 -->
    <script type="text/javascript" src="a.js">
    </script>
    
    <!-- js的写法3,注意,这种方式不行--包含在标签内的js代码无效 -->
    <script type="text/javascript" src="a.js">
    	alert("kkkk");//无效代码,被上面一行的导入方式屏蔽掉了!!!并且上面一行的a.js的内容也能够显示但是此行不能
    </script>
    
</body>
<script type="text/javascript">
	alert("kkkk2");//这里是可行的
</script>
</html>

1、Js中的数组的长度是可以自动增长的

2、Js中的数组的功能相当于Java中的数组和集合的综合

3、var arr=[3,2,-4,78,10];//正确,注意,Java赋初值用的是大括号,而Js用的是中括号

      var arr[]=[3,2,-4,78,10];//错误的,不能声明成arr[]----声明时不能带中括号

4、遍历数组

5、Js中的数组当中可以存储不同数据类型的数据

<script type="text/javascript">
        //数组定义的方式1: 定义时直接赋初值
        var arr =[12,34,2,-3,90,12];
        //alert(typeof(arr)); //object
        //alert("len:"+arr.length);
        //遍历数组
        for(var x=0;x<arr.length;x++){
        	document.write("arr["+x+"]="+ arr[x]+" ");
        }
        document.write("<br/>");
        
        arr[0]=-1000;
        arr[7]=666;//数组可以自动增长,且arr[6]没有赋值则是undefined
        for(var x=0;x<arr.length;x++){
        	document.write("arr["+x+"]="+ arr[x]+" ");
        }
        document.write("<br/>");
        
        var arr2=[];
        //alert(arr2.length);//0
        arr2[1]=10;
        for(var x=0;x<arr2.length;x++){
        	document.write("arr2["+x+"]="+ arr2[x]+" ");
        }
        document.write("<br/>");
        
        //※※错误的声明方式--数组
        //int[] arr3 ={1,2,3};
        //var[] arr3 = [1,2,3];//错的,[]代表的是数组类型,而js中,所有数据类型只有一个var声明,不存在“var[]”这种类型
        
        var arr4=[1,2,3,100];
        arr4[0]="abc";
        arr4[1]=true;
        for(var x=0;x<arr4.length;x++){
        	document.write("arr4["+x+"]="+ arr4[x]+" ");
        }
        document.write("<br/>");
        
        //※※综上,js数组的两个特点:
        //1,长度是可变的
        //2,元素的类型是任意的
     </script>


注:语法上是可以的,因为它有集合的特性,各种类型的数据都可以赋给它。虽然这样,但我们做项目时,一个数组最好放同一种类型的数据。

6、Js中数组的另一种定义方式:使用js当中的Array对象

注:用Array对象定义数组时,参数为1时,是指数组的长度;若大于1时,直接就是数组中的元素初值

var arr2 = new Array(5); //定义长度为5的数组----参数为1时,是长度

var arr3 = new Array(5, 6, 7); //参数大于1时,就是元素的初值


7、Js中Array对象中的方法

1)concat 方法:返回一个新数组,这个新数组是由两个或更多数组组合而成的。

2)join 方法:返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。

3)reverse 方法:返回一个元素顺序被反转的 Array 对象。

4)shift 方法: 移除数组中的第一个元素并返回该元素。-----removeFirst()

5)slice 方法 (Array): 返回一个数组的一段。-----类似String中的substring()

6)sort 方法: 返回一个元素已经进行了排序的 Array 对象。

7)splice 方法: 替换。从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。

8)unshift 方法:将指定的元素插入数组开始位置。返回值为新数组的长度----addFirst()

例:

<html>
  <head>
    <title>Array对象使用方法演示</title>
  </head>
  
  <body>
    <script type="text/javascript" src="out.js">
    </script>
   <script type="text/javascript">
     var arr=["aaa","bbb","ccc","ddd"];
     println(arr);
     var arr2=["111","222","333","okok"];
     var newArr = arr.concat(arr2);
     println(newArr);
     
     println(newArr.join("-"));
     
     println("<hr/>");
     
     //pop() :  移除数组中的最后一个元素并返回该元素。
     println( newArr.pop() );
     println(newArr);
     //push() : 将新元素添加到一个数组中,并返回数组的新长度值。
     arr.push("x1","x2");
     println(arr);
     //arr.push("y1",arr2,"z1");//注意1,arr2在arr当中是一个元素---即arr变成二维数组。注意2,push方法会改变原来的数组。arr长度为:9
     arr=arr.concat("y1",arr2,"z1");//注意1,该方法会把数组arr2当中的每个元素取出来,分别添加到arr当中---arr还是一维数组。注意2,concat方法不会改变原来的数组,连接结果以新数组的形式返回。旧arr的长度还是6,新arr的长度是12
     println(arr);
     println(arr.length);
     
     arr.sort();
     println(arr);
     
     arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始,删掉3个元素,并且在删除的位置插入:"u1","u2","u3","u4","u5"
     println(arr);
     
     //※※※做栈和队列的提示
     //unshift---addFirst  concat--addLast()  shift---removeFirst()  pop---removeLast()
     //Array.prototype.addFirst=unshift;
   
   </script>
    
    <script type="text/javascript" src="arraytools.js">
    </script>
    <script type="text/javascript">
       var arr=["aaa","bbb","ccc","ddd"];
       var max = arr.getMax();
       println(max);
       println(arr);
       
    </script>
  </body>
</html>

其中用到的工具

arraytools.js

//给原型对象添加一个getMax()方法
Array.prototype.getMax = function() {
	var temp=0;
	for(var x=1;x<this.length;x++){
		if(this[x]>this[temp]){
			temp = x;
		}
	}
	return this[temp];
};
Array.prototype.toString = function() {
	return "["+this.join("")+"]";
};
out.js
function println(param){
	document.write(param+"<br/>");
}
function print(param){
	document.write(param);
}

函数

1、一般函数

格式:

function  函数名(形式参数...)

{

执行语句;

return 返回值;

}

函数是多条执行语句的封装体,只有被调用才会被运行。

注意:调用有参数的函数,但没有给其传值,函数一样可以运行,或者调用没有参数的函数,给其传值,该函数也一样运行。

说的简单点:只要写了函数名后面跟了一对小括号,该函数就会运行。那么传递的参数呢?

其实,在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一

个数组中。

例:

function demo(){<span style="font-family: 宋体;">//定义函数。</span>
	alert(arguments.length);
}
demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3,如果想得到所有的参数值,可以通过for循环遍历该数组。

for(var x=0; x<arguments.length; x++){
	alert(arguments[x]);
}


为了增强阅读性,最好按照规范,按定义好的形式参数传递实际参数。

函数在调用时的其他写法:

var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的,意为show和demo代表同一个函数。
		//那么该函数也可以通过show()的方式运行。

<script type="text/javascript">
  	function getValue(){
  	<span style="white-space:pre">	</span>alert("aa");
  		return 100;
<span style="white-space:pre">	</span>}
//var v = getValue();
//alert("v="+v);
  	var v2=getValue; //相当于getValue把引用值传给v2,因此v2也是一个“function对象”----getValue和v2都是引用变量
  	//alert("v2="+v2 );//其实是输出v2对象的toString()
  	//alert("v2="+v2() ); //调用v2这个函数对象---调用函数
</script>


函数虽然定义时是声明成两个参数,但调用时却是可以传入任意个

<span style="font-weight: normal;"><span style="font-size:12px;">function show(x,y){
  	alert(x+","+y);
}
//show(23,22);//23,22
//show(23); //23,undefined
//show(); //undefined,undefined
//show(23,22,11);//23,22 后面的一个参数函数接收了但没有用</span></span>

每个函数中,存在一个 默认的数组arguments ,里面存储着本次调用时传入的所有实参

//函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的,我们可以访问到这个数组对象
function show2(x,y){
  	arguments[0]=1000;//可以把形参x的值改掉
  	document.write(x+","+y+"<br/>");
  	for(var i=0;i<arguments.length;i++){
  	<span style="white-space:pre">	</span>document.write(arguments[i]+",");
  <span style="white-space:pre">	</span>}
}
show2(11,22,33,44);
  	   
//※综上,函数的技术细节:
//1, js中的函数是没有重载,只以函数名来识别的---其实函数名就是一个function对象的引用的名字
//2, js函数中有一个内部维护的arguments数组来接收与保存形参
技术细节:
1、js中函数没有重载,只以函数名来识别,函数名就是function对象的引用名
2、函数的参数全是js内部用一个arguments的数组来接收与存放的------该对象是js内部隐含帮我们做的,而且我们可以访问,也可以更改值

2、动态函数

通过Js的内置对象Function实现。

例:

<script type="text/javascript">
//把函数的形参用第1个参数传入,函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体,因此非常灵活,该思想类似Java当中的类反射。
<span style="white-space:pre">	</span>var add = new Function("a,b","var s = a+b; return s; ");
//alert( add(12,11));
</script>
如同:
function demo(x,y){
	alert(x+y);
}
demo(4,6);

不同的是,动态函数,参数以及函数体都可以通过参数进行传递,可以动态指定。


3、 匿名函数

格式:function(){...}

例:

var demo = function(){...}
demo();

通常在定义事件属性的行为时较为常用。

例:

function test()
{
	alert(“load ok”);
}
window.onload = test;

可以写成匿名函数的形式:

window.onload = function()
{
	alert(“load ok”);
}

匿名函数就是一种简写格式。


函数定义与调用例子:
<html>
  <head>
    <title>javascript数组与函数练习</title>
  </head>
  
  <body>
  <script type="text/javascript">
    //写一个获取数组中元素最大值的函数
    function getMax(arr){
    	var max=0;//最大值的下标
    	for(var x=1;x<arr.length;x++){
    		if(arr[x]>arr[max]){
    			max = x;
    		}
    	}
    	return arr[max];
    }
    //调用
    var arr=[23,-3,45,0,-100,47,22];
    var v = getMax(arr);
    //alert("v="+v);
    
    //数组排序
    function sortArray(arr){
    	for(var x=0;x<arr.length-1;x++){
    		for( var y=x+1;y<arr.length;y++){
    			if(arr[x]>arr[y]){
    				swap(arr,x,y);
    			}
    		}
    	}
    }
    function swap(arr,x,y){
    	var temp = arr[x];
    	arr[x] = arr[y];
    	arr[y] = temp;
    }
    
    //alert(arr);
    //document.write(arr+"<br/>");
   // sortArray(arr);
    //alert(arr);
    //document.write(arr+"<br/>");
    
    //我们的输出函数---把内容输出到页面且换行
    function println(str){
    	 document.write(str+"<br/>");
    }
    println(arr);
    sortArray(arr);
    println(arr);
    
    //到数组当中查找元素
    function searchElement(arr,key){
    	for(var x=0;x<arr.length;x++){
    		if(arr[x]==key){
    			return x;
    		}
    	}
    	return -1;
    }
    println( searchElement(arr,0) );
    println( searchElement(arr,123) );
    
  </script>
  
  <script type="text/javascript">
    //二分查找
    function binarySearch(arr,key){
    	var max,min,mid;
    	min=0;
    	max=arr.length-1;
    	while(min<=max){
    		mid = (max+min)>>1;
    		if(key>arr[mid]){//落在右边
    			min = mid+1;    			
    		}else if(key<arr[mid]){//落在左边
    			max = mid-1;
    		}else{
    			return mid;
    		}
    	}
    	return -1;
    }
    println( binarySearch(arr,0) );
    println( binarySearch(arr,123) );
    
    //数组反转
    function reverseArray(arr){
    	for(var start=0,end=arr.length-1; start<end; start++,end--){
    		swap(arr,start,end);
    	}
    }
    reverseArray(arr);
    println("反转之后:"+arr);
  </script>

  </body>
</html>

注:下文中用到的println()方法都是另外导入的out.js方法中写的

out.js:
function print(param){
	document.write(param);
}

function println(param){
	document.write(param+"<br/>");
}


在with语句块中,可以省去对象名的引用

[html] view plain copy
 print?
  1. var dd2 = new Date();  
  2.     with(dd2){//在with语句块中,可以省去对象名“dd2”的引用  
  3.       var year = getFullYear(); //dd2.getFullYear()  
  4.       var monthgetMonth(); //从0开始的月份数  
  5.       var day =  getDate();//返回月份中的第几天  
  6.       println(year+"年"+month+"月"+day+"日 ");  
  7.     }  



一、Object对象

<html>
<head>
<title>Object对象的用法演示</title>
</head>
<body>
<script type="text/javascript">
	/*toString()将对象转换成字符串*/
	function show(){
		alert("show......");
	}
	//alert(show);//默认调用toString()
	//alert(show.toLocaleString());
	//alert(show.toString());
	
	var arr=[1,2,3,8];
	//alert(arr.toString());
	//alert(arr);//默认调的toString()
	
	/*valueOf(): 返回指定对象的原始值  */
	//alert(arr.valueOf());//结果和toString()一样
	//alert(show.valueOf());//结果和toString()一样
</script>
</body>
</html>

二、String 对象

1、创建String对象的两种方式

1)var str = new String("abc123");

2)var str2 = "abcd1234";


2、String对象当中的属性

str.length:字符串长度


3、String对象当中的方法

bold():加粗

fontcolor("red"):设置颜色

link("http://www.hncu.net"):设置为超链接

substring(1, 5):取子串[1,5),Java一样,左包含,右不包含

substr(1,5):取子串:从1位置开始,取5个字符


、Date 对象

1、Date对象的构造

[javascript] view plain copy
 print?
  1. var date = new Date();  
  2. println(date); //GMT格式输出  
  3. println(date.toLocaleString());//转成本地系统的日期时间格式输出。  
  4. println(date.toLocaleDateString()); //只有日期,没有时间  


2、从对象中解析出相应的日期元素

[javascript] view plain copy
 print?
  1. //var year = date.getYear();//过时了,尽量不用 。它是返回从1900到当前日期所经过的年份  
  2.       var year = date.getFullYear();  
  3.       println(year);  
  4.       var month= date.getMonth(); //从0开始的月份数  
  5.       println(month);  
  6.       var day1 = date.getDay(); //返回星期中的第几天,0为星期天  
  7.       println(day1);  
  8.       var day2 = date.getDate();//返回月份中的第几天  
  9.       println(day2);  


3、要求显示出某个日期的“星期几”

[html] view plain copy
 print?
  1. function getWeekDay( num ){  
  2.       var weeks = [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘];  
  3.       return weeks[num];  
  4. }  
  5. var weekDay = getWeekDay( date.getDay() );  
  6. println(weekDay);  


4、日期对象和毫秒值之间的转换

[html] view plain copy
 print?
  1. var date2 = new Date();  
  2. var time = date2.getTime();//日期对象-->毫秒值  
  3. println("time:"+time);  
  4. var date3 = new Date(time);  
  5. println(date3.toLocaleDateString());  


5、日期对象和字符串之间进行转换

[html] view plain copy
 print?
  1. //日期对象-->字符串:toLocaleString() 和 toLocaleDateString()  
  2. //字符串-->日期  
  3. //var strDate="9/27/15";//细节:如果年份只给两位有效数字,那是代表19**年。如果是2000年以后的年份,要给4位  
  4. var strDate="9/27/2015 ";//细节:如果年份只给两位有效数字,那是代表19**年。如果是2000年以后的年份,要给4位  
  5. var time = Date.parse(strDate);//返回的是毫秒数  
  6. var d = new Date(time);  
  7. println(d.toLocaleString());  


6、日期解析错误时,抛异常

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.      Date.prototype.parse2 =function(str){  
  3.         throw new Exception();  
  4.      };  
  5.        
  6.      try{  
  7.        var strDate2="9/27/2ewewwe15 ";//细节:如果年份只给两位有效数字,那是代表19**年。如果是2000年以后的年份,要给4位  
  8.        var time2 = Date.parse2(strDate2);//返回的是毫秒数  
  9.          
  10.      }catch(e){  
  11.         alert("日期解析错误....我给的提示....");  
  12.      }  
  13. </script>  


四、Math 对象

Math.ceil(12.34);//向上进位

Math.floor(12.34);//向下进位

Math.round(12.54);//四舍五入

Math.pow(5,6);//5的6次方

//生成10个[0,10]范围内的随机整数
	for (var x=0;x<10;x++){
		//var n=Math.floor(Math.random()*11);//法1
		//var n=Math.round(Math.random()*10);//法2
		var n=parseInt(Math.random()*11);//法3
		println(x+": "+n);
	}


五、Global对象

Global对象中的方法是全局方法,调用时可以省略Global,直接写方法名

1、parseInt()中的基数用法----进制转换

1)将指定进制格式的字符串转换成-->10进制数

[javascript] view plain copy
 print?
  1. //var num = parseInt("110",10); //110  
  2. //var num = parseInt("110",2); //6  
  3. var num = parseInt("0x3c",16); //60  


2)10进制转换成--->非10进制

[javascript] view plain copy
 print?
  1. var num2 = new Number(6);  
  2. println( "num2="+ num2.toString(2) );  
  3. var num3 = 60;  
  4. println( "num3="+ num3.toString(16) );  


2、for(in)语句的用法

1)格式:   
   for(变量 in 对象){
    ...//对对象中的元素进行遍历操作
   }

2)例:

<script type="text/javascript">
	/*
     <span style="white-space:pre">	</span>for( 变量名  in 对象 ){
    	 ...//分别对对象中的元素(属性)进行遍历操作
   <span style="white-space:pre">	</span>}
    <span style="white-space:pre">	</span>*/
    <span style="white-space:pre">	</span>//数组对象
    <span style="white-space:pre">	</span>var arr=[12,13,22,-1,56,0,9];
    <span style="white-space:pre">	</span>for (x in arr){//注意,对于数组,这里的x是下标即是0,1,2,3,...
    	<span style="white-space:pre">	</span>println(x+": "+arr[x]);
<span style="white-space:pre">	</span>}
    
<span style="white-space:pre">	</span>print("<hr/>");
	//用for...in语句操作自定义对象
	for (x in p2){//x是函数中的成员变量与成员方法的名称
		println(x+"------"+p2[x]);// p2[x]就是valeOf(x)
	}
</script>


六、自定义对象

对js来描述对象--Person

1、方法1:本质上,有点类似于Java当中的直接new一个空参对象,然后往里面直接添加变量

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        function Person(){  
  3.            //alert("Person...");  
  4.            println("Person...");  
  5.        }  
  6.        var p = new Person();  
  7.        //要为Person对象p添加变量,直接使用:p.对象名=...  
  8.        p.name = "Jack";  
  9.        p.age = 24;  
  10.        //alert(p.name+"---"+p.age);  
  11.        //要为Person对象p添加方法,直接使用:p.方法名=...  
  12.        p.show = function(){  
  13.            println(p.name+"---"+p.age);  
  14.        };  
  15.        p.show();//调方法  
  16.          
  17.        var obj = new Object();  
  18.        obj.name = "God";  
  19.        obj.age =10000;  
  20.        obj.show = function(){  
  21.            println(obj.name+"::::"+obj.age);  
  22.        };  
  23.        obj.show();  
  24.          
  25.     </script>  


2、方法2:更接近于Java当中的面向对象的方式----类的封装

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        //方式2:更接近于Java当中的面向对象的方式----类的封装  
  3.        function Person(name,age){  
  4.            this.name = name; //这里的this.表示给当前对象添加一个变量  
  5.            this.age = age;  
  6.            this.setName= function(name){  
  7.                this.name = name;  
  8.            };  
  9.            this.getName= function(){  
  10.                return this.name;  
  11.            };  
  12.            this.show= function(){  
  13.                return "name:"+this.name+",age:"+this.age;  
  14.            };  
  15.        }  
  16.        var p = new Person("Tom",22);  
  17.        println(p.name+"==="+p.age);  
  18.        p.setName("Rose");  
  19.        println(p.show());  
  20.          
  21.        for(x in p){ //x为自定义对象当中的变量名  
  22.            println(x+":"+p[x]); //p[x]为自定义对象当中的变量值(如果是函数,为它的字节码)  
  23.        }  
  24.          
  25. </script>  


3、方式3: map方式, key:value   ----类似于java当中的数据封装,把数据封装到Map集合当中
<span style="font-weight: normal;"><script type="text/javascript">  
       //对象调用成员有两种方式:对象.属性名  和  对象["属性名"]  
       //1) 对象.属性名的方式应该注意: 如果属性名不符合标识符的命名规则,那么不能采用这种方式调用,如下面例子当中的不能采用map[8]的方式  
       //2)  对象["属性名"]的方式应该注意:如果属性名符合标识符的命名规则,那么访问时属性名应该要加引号,如下面例子当中的map[name]要写成pp["name"]的形式才行  
       var pp = {  
           //"name":"张三","age":"23", //key:value
	   name:"张三",age:"23",  //这句和上面一句等效---key的名称可以省略引号   
           "getName": function(){  
               return this.name;  
            }  
       };  
       println(pp.name+"===" + pp.age);     
       println(pp.getName());  
       println( pp["name"] ); //用 pp[name]是不行的  
         
       //map集合的定义  
       var map={  
            8:"张三" , 3:"李四", 5:"Jack"  
       };  
       var val = map[8];//8是数字,不是变量名,因此引号省略照样能解析出来
       println("val:"+val);  
       //var val2 = map.8; //不行,因为8不是变量的形式  
       //println(val2);  
         
</script> </span>


4、map数据封装的进一步扩展

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        //属性值是数组  
  3.        var myMap = {  
  4.                names:["Jack1","Jack2","Jack4"],  
  5.                ages:[25,22,18]  
  6.        };  
  7.        //取出Jack2的姓名和年龄  
  8.        println("name:"+ myMap.names[1]);  
  9.        println("age:"+ myMap.ages[1]);  
  10.          
  11.        var myMap2 = {  
  12.                names:[{name:"Jack1"},{name:"Jack2"},{name:"Jack4"}]  
  13.        };  
  14.        //取出Jack1  
  15.        println("name:"+ myMap2.names[0].name);//或者println( myMap2.names[0]["name"]); 
  16. </script>  


5、对象的prototype属性

要给对象添加新功能时,直接采用“对象.prototype.新内容”的形式就可以。这内容可以是变量,也可以是函数。

1)为String对象添加一个自定义函数trim:剪去字符串两端的空格

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        function trim(str){  
  3.            var start, end;  
  4.            start=0;  
  5.            end=str.length-1;  
  6.            while(start<=end && str.charAt(start)==‘ ‘){  
  7.                start++;  
  8.            }  
  9.            while(start<=end && str.charAt(end)==‘ ‘){  
  10.                end--;  
  11.            }  
  12.            return str.substring(start,end+1);  
  13.        }  
  14.        //测试  
  15.        var s="   dsk dsds   ";  
  16.        //alert("#"+s+"#");  
  17.        //alert("#"+ trim(s) + "#" );  
  18.          
  19. </script>  


2)添加变量

[javascript] view plain copy
 print?
  1. String.prototype.aa = 200;  
  2.       println("abc123".aa);  


3)添加函数

[javascript] view plain copy
 print?
  1. String.prototype.trim = trim;  
  2.       println("<hr>");  
  3.       println("aa3".trim("   abc123   "));  

(这里的trim就是上面(1)里面自定义属性中的trim)

注:这里通过“aa3”.trim("   abc123   ")处理的是别的字符串并不是自己


4)通过对象直接调用的函数(注意,一定要把前一版本当中的参数str改成this)

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.       String.prototype.trim = function(){  
  3.            var start, end;  
  4.            start=0;  
  5.            end=this.length-1;  
  6.            while(start<=end && this.charAt(start)==‘ ‘){  
  7.                start++;  
  8.            }  
  9.            while(start<=end && this.charAt(end)==‘ ‘){  
  10.                end--;  
  11.            }  
  12.            return this.substring(start,end+1);  
  13.       };  
  14.       println("   aa3   ".trim() );  
  15.       var str2 ="    76jh dssdds   ";  
  16.       println( str2.trim() );  
  17.         
  18.  </script>  

注:这里是对自己进行处理


6、对象原型修改练习

1)给String对象添加一个toCharArray()方法

2)给String对象添加一个reverse方法:将字符串反转

3)JS当中,函数内部是可以写函数的,而Java是做不到的。但Java有内部类

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        String.prototype.toCharArray= function(){  
  3.            var chs=[];  
  4.            for(var x=0; x<this.length; x++){  
  5.                chs[x] = this.charAt(x);  
  6.            }  
  7.            return chs;  
  8.        };  
  9.   
  10.      //给String对象添加一个reverse方法:将字符串反转  
  11.      String.prototype.reverse=function(){  
  12.         //JS当中,函数内部是可以写函数的,而Java是做不到的。但Java有内部类  
  13.          //辅助函数,用于交换数组中的两个元素  
  14.          function swap(arr,x,y){  
  15.           var temp = arr[x];  
  16.           arr[x] = arr[y];  
  17.           arr[y] = temp;  
  18.          }  
  19.            
  20.          var arr = this.toCharArray();  
  21.          for(var x=0,y=arr.length-1; x<y; x++,y--){  
  22.              swap(arr,x,y);  
  23.          }  
  24.          return arr.join("-");  
  25.      };  
  26.     /* 
  27.      //辅助函数,用于交换数组中的两个元素 
  28.      function swap(arr,x,y){ 
  29.       var temp = arr[x]; 
  30.       arr[x] = arr[y]; 
  31.       arr[y] = temp; 
  32.      } 
  33.     */  
  34.      //测试  
  35.      var str = "dsjk2323jkjkewio";  
  36.      println( str.reverse() );  
  37.        
  38.      //测试:在外部能否调用函数reverse内部的swap函数  
  39.      //测试结果:不行的。其实它和局部变量是一个道理。  
  40.      //因此,以后在写某个函数内部的辅助功能函数时,最好写在内部  
  41.      /* 
  42.      var arr =[23,45,7,9]; 
  43.      swap(arr,1,2); 
  44.      println("kkk"); 
  45.      println(arr); 
  46.      */  
  47. </script> 

BOM------浏览器对象模型

主要讲window对象:代表浏览器中一个打开的窗口

一、BOM功能

提供了访问浏览器各个功能部件,如浏览器窗口本身、浏览历史等的操作方法


二、window中的事件

3个load事件( 浏览器的生命周期):onload, onunload, onbeforeunload(但从字面也能看出意思吧,还有其他的事件,自己可以查看帮助文档)

[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>bom_window_event.html</title>  
  5.   </head>  
  6.     
  7.   <body>  
  8.           
  9.     <script type="text/javascript">  
  10.         //事件注册  
  11.         onload=function(){  
  12.             //alert("onload...");  
  13.             window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");  
  14.         }  
  15.         /*  
  16.         onunload=function(){  
  17.             alert("onunload...");  
  18.         }  
  19.         onbeforeunload=function(){  
  20.             alert("onbeforeunload...");  
  21.         }  
  22.         */  
  23.     </script>  
  24.       
  25.   </body>  
  26. </html>  

三、window中的方法

[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>bom_window_method.html</title>  
  5.   </head>  
  6.     
  7.   <body>  
  8.       
  9.     <script type="text/javascript" src="print.js">  
  10.     </script>  
  11.           
  12.     <script type="text/javascript">  
  13.         //window中的方法  
  14.         function f1(){  
  15.             var b = confirm("你确定要执行吗?");  
  16.             alert("b="+b);  
  17.         }  
  18.           
  19.         var id1,id2;  
  20.         function f2(){  
  21.             // id1 = setTimeout("alert(‘time out...‘)" , 3000);//经过指定毫秒值后计算一个表达式----定时器  
  22.             id2 = setInterval("alert(‘time out...‘)" , 3000);//每经过指定毫秒值后计算一个表达式----定时器  
  23.         }  
  24.           
  25.         function f3(){  
  26.             //clearTimeout(id1);  
  27.             clearInterval(id2);//清除定时器  
  28.         }  
  29.           
  30.         function f4(){  
  31.             //moveBy(10,10);//浏览器窗口----相对移动,向右下角移动(水平与垂直方向分别移动10像素)  
  32.             //moveTo(40,40);  
  33.             //窗口抖动  
  34.             for(var x=0;x<10;x++){  
  35.                 moveBy(20,0);  
  36.                 moveBy(0,20);  
  37.                 moveBy(-20,0);  
  38.                 moveBy(0,-20);  
  39.             }  
  40.         }  
  41.           
  42.     </script>  
  43.   
  44.     <input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/>  
  45.     <input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/>  
  46.     <input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/>  
  47.     <input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/>  
  48.       
  49.       
  50.   </body>  
  51. </html>  


四、window中的对象

1、window中的navigator对象----浏览器信息

[javascript] view plain copy
 print?
  1. function windowNavigatorShow(){  
  2.             var name = window.navigator.appName;  
  3.             //var version = window.navigator.appVersion;  
  4.             var version = navigator.appVersion;//window对象是默认的,可以省略不写  
  5.             println("name:"+name+",version:"+version);  
  6. }  

2、window中的location对象----浏览器地址栏
<span style="font-weight: normal;">function windowObj4(){  
            //获取属性  
            var pro = window.location.protocol; //window可省略  
            //alert(pro);  
            var text = location.href;  
            alert(text);  
              
            location.href="http://www.baidu.com.cn";//1
	    location.href ="5a.html";//2
	    //上两句1和2处可以对目前所处的地址进行更改,这就是在浏览器中浏览到某些东西时突然会跳到其他页面去的原理,如1会自动跳转到百度
}</span>
5a.html

<html>
  <head>
    <title>aa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  
  <body>
  	<script type="text/javascript">
  		function windowObjDemo(){
			history.back();
		}  	
  	</script>
    <input type="button" value="演示window中的对象" onclick="windowObjDemo()" />
  </body>
</html>

3、window中的history对象----浏览器已浏览的url信息

其中的方法:

back 从历史列表中装入前一个 URL。
forward 从历史列表中装入下一个 URL。
go 从历史列表中装入 URL。

[html] view plain copy
 print?
  1. <input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />  

DOM -----Document Object Model

文档对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台, 提供了标准的 HTML 和 XML 对象集, 并有一个标准的接口来访问并操

作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件,如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前,创建前端 Web 应用程序都必须使用

Java Applet 或 ActiveX 等复杂的组件, 现在基于 DOM 规范, 在支持 DOM 的浏览器环境中,Web开发人员可以很快捷、 安全地创建多样化、 功能强大的Web应用程序。 这里只讨论

HTML DOM。


一、DOM概述

1、文档对象模型定义了 JavaScript 可以进行操作的浏览器,描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面:

1)核心 JavaScript 语言参考(数据类型、运算符、基本语句、函数等)

2)与数据类型相关的核心对象(String、Array、Math、Date 等数据类型)

3)浏览器对象(window、location、history、navigator 等)

4)文档对象(document、images、form 等)


2、JavaScript 中两种主要的对象模型

1)浏览器对象模型 (BOM) 

提供了访问浏览器各个功能部件,如浏览器窗口本身、浏览历史等的操作方法。(见前一篇)

2)文档对象模型 (DOM)

提供了访问浏览器窗口内容,如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。

在早期的浏览器版本中,浏览器对象模型和文档对象模型之间没有很大的区别。


二、主要作用

主要用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。

文档:标记型文档----标签、文本、属性等

对象:  封装了属性和方法,可以调用里面的属性和方法。

模型:所有标记型文档都具备一些共性特征的体现。


三、一些重要的概念(主要DOM树)

1、DOM树模型:

DOM解析将按照标签的层次体现出标签的所属,形成一个树状结构---DOM树。

         标签、属性和文本内容称为节点(node),节点也称为对象,标签通常也称为页面中的元素(element)
1)DOM技术的核心内容:

把标记文档变成对象树,通过对树中的对象进行操作,实现对文档内容的操纵。
2)DOM解析的方式:

将标记文档解析成一棵DOM对象树,并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成
3)DOM解析的好处:

可以对树中的节点进行任意的操作:增删改查
4)DOM解析的弊端:

这种解析需要将整个标记型文档加载进内存,因此,如果标记型文档很,耗内存。
        

2、DHTML:动态的HTML,它不是一门语言,是多项技术综合体的简称。

         以HTML+CSS的方式做的是静态网页,要想变成动态的,必须在此基础上加入JS和DOM技术。因此,DHTML包含:HTML+CSS+JS+DOM

3、HTML:提供标签,封装数据

4、CSS:提供样式属性,对数据的显示样式进行定义

5、DOM: 把标记型文档封装成对象,供JS操纵

6、JS: 提供程序设计语言,通过DOM来操纵文档内容和显示样式


四、 DOM中获取节点的方法

节点都具备三个必备属性:节点名称(nodeName)、节点类型(nodeType)、节点值(nodeValue)。

节点的类型: 标签节点的类型值为1,属性节点的类型值为2,文本节点的类型值为3

节点值:标签型节点是null,没有值的。只有属性和文本节点才可以有值。

1、getElementById()  :通过节点的id获取该节点对象

[javascript] view plain copy
 print?
  1. function getNodeDemo1(){  
  2.             //获取id为divid1的节点  
  3.             //var divNode= document.getElementById("divid1");  
  4.             var divNode= document.getElementById("divid2");  
  5.             //alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);  
  6.               
  7.             //获取div节点中的文本  innerHTML innerText 属性  
  8.             var txtHTML = divNode.innerHTML;  
  9.             var txt = divNode.innerText;  
  10.             alert(txtHTML+","+txt);  
  11.               
  12.             //更改div节点中的文本内容  
  13.             //divNode.innerHTML="我把它改成湖南城市学院了....";  
  14.             divNode.innerHTML="我把它改成湖南城市学院了....".fontcolor("red");  
  15.               
  16. }  


2、getElementsByName()  :通过节点的name属性获取节点集合----注意,是集合

[javascript] view plain copy
 print?
  1. function getNodeDemo2(){  
  2.             var node = document.getElementsByName("userName");  
  3.             //alert(node.nodeName);//undefined  
  4.             //alert(node);//因为是数组,所以是集合  
  5.             //alert(node[0].nodeName);//INPUT  
  6.             //alert(node.length);//1  
  7.               
  8.             //alert(node[0].nodeType);//1  
  9.             alert(node[0].nodeValue);//标签型节点的value都是null  
  10.             //alert(node[0].getAttribute("value"));  
  11. }  


3、getElementsByTagName() :通过节点的标签名字获取节点集合

1)获取document下的所有

[javascript] view plain copy
 print?
  1. function getNodeDemo3(){  
  2.             var nodes = document.getElementsByTagName("a");  
  3.             //alert(nodes.length);//5  
  4.             //alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容:城市首页  
  5.               
  6.             //给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时,若属性不存在则是添加,若存在则是修改  
  7.               
  8.             for(var x=0; x<nodes.length; x++){  
  9.                 //alert(nodes[x].innerHTML);  
  10.                 nodes[x].target = "_blank";  
  11.             }  
  12. }  
2)获取<div>标签下的所有<a>节点

[javascript] view plain copy
 print?
  1. function getNodeDemo4(){  
  2.             var divNode = document.getElementById("mylink");  
  3.             var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点  
  4.             for(var x=0; x<nodes.length; x++){  
  5.                 nodes[x].target = "_blank";  
  6.             }  
  7. }  


五、利用节点的层次关系(level)获取节点的方法

父节点:parentNode属性

子节点:childNodes集合,  firstChild() , lastChild()

上一个兄弟节点:previousSibling属性

下一个兄弟节点:nextSibling属性

1、获取父节点

[javascript] view plain copy
 print?
  1. var tabNode = document.getElementById("tableid1");  
  2. var node = tabNode.parentNode;  

2、获取子节点

获取到的子节点是集合

[javascript] view plain copy
 print?
  1. var nodes = tabNode.childNodes;  

注意:1)如果<table>后面有回车符,高版本的IE和火狐会识别成 “空白文本”#text,而低版本IE会直接越过-----不光是<table>节点,其它节点也一样

    2)表格的,<table>标签和<tr>标签中间,其实还隐藏着一个<tbody>标签----表格体

3、获取兄弟节点

[javascript] view plain copy
 print?
  1. var node = tabNode.previousSibling.previousSibling;//上一个兄弟  
  2. alert(node.nodeName);//div  
  3. var node = tabNode.nextSibling.nextSibling;//上一个兄弟  
  4. alert(node.nodeName);//dl  


六、DOM中的一些操作

1、创建文本对象

[javascript] view plain copy
 print?
  1. function createAndAdd1(){  
  2.             //1利用createTextNode()创建一个文本对象  
  3.             var oTextNode = document.createTextNode("新的文本!");  
  4.             //2获取div对象  
  5.             var divNode = document.getElementById("div1");  
  6.             //3把oTextNode添加成div对象的孩子  
  7.             divNode.appendChild(oTextNode);  
  8. }  

2、创建标签对象

[javascript] view plain copy
 print?
  1. function createAndAdd2(){  
  2.             //1利用createElement()创建一个标签对象  
  3.             var oBtnNode = document.createElement("input");  
  4.             oBtnNode.type="button";  
  5.             oBtnNode.value="新建的按钮";  
  6.               
  7.             //2获取div对象  
  8.             var divNode = document.getElementById("div1");  
  9.             //3把oTextNode添加成div对象的孩子  
  10.             divNode.appendChild(oBtnNode);  
  11. }  

3、直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作
<span style="font-weight: normal;">function createAndAdd3(){
		//获取div1节点
		var oDivNode1=document.getElementById("div1");
			
		//添加按钮
		oDivNode1.innerHTML="<input type='button' value='按钮a'>";
		//oDivNode1.innerHTML+="<input type='button' value='按钮a'>";
		oDivNode1.innerHTML+="<a href='http://www.baidu.com' target='_blank'>百度一下</a>";
}</span>
使用innerHTML属性时若不使用“+”号,原来的文本内容会被覆盖


4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点,后者删自己----不建议使用

[javascript] view plain copy
 print?
  1. function deleteNode(){  
  2.             var oDivNode = document.getElementById("div2");  
  3.             //自杀式----不建议  
  4.             //oDivNode.removeNode();//默认false,不删除子节点集合  
  5.             //oDivNode.removeNode(true);//true,删除子节点集合  
  6.               
  7.             //通过父节点去删除它的孩子  
  8.             oDivNode.parentNode.removeChild(oDivNode);  //建议使用父节点这种方法
  9. }  

5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点,后者替换自己----不建议使用

[javascript] view plain copy
 print?
  1. function updateNode(){  
  2.             var oDivNode = document.getElementById("div2");  
  3.             var oDivNode4 = document.getElementById("div4");  
  4.             //自杀式----不建议  
  5.             //oDivNode.replaceNode(oDivNode4);  
  6.               
  7.             //通过父节点去替换它的孩子:用oDivNode4去替换oDivNode  
  8.             oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);  
  9.         }  

6、替换节点(克隆替换)

[javascript] view plain copy
 print?
  1. function updateNode2(){  
  2.             var oDivNode = document.getElementById("div2");  
  3.             var oDivNode4 = document.getElementById("div4");  
  4.               
  5.             var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时,连子节点一起克隆  
  6.               
  7.             //通过父节点去替换它的孩子:用oDivNode4_2去替换oDivNode  
  8.             oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);  


JavaScript

标签:

原文地址:http://blog.csdn.net/x121850182/article/details/51702327

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!