12、JS动态创建网页对象.pptVIP

JS动态创建网页对象 制作：潘院明 一、js中创建对象 对象的三种基本构造法 1：new Object var a = new Object(); var b = new Object(); a.x=1,a.y=2; b.x=1,b.y=4,b.z=5; 2.对象之间量 var b = {x:1,y:2}; 3.定义类型 function point(x,y){ this.x=x; this.y=y; } var p = new point(1,2); var m = new point(3,4); js中创建对象 通过new关键字生成一个对象，然后根据JS是动态语言的特性添加属性和方法，构造一个对象。其中的this是表示调用该方法的对象。 var obj = new Object(); = Koji; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 alert(); } obj.showAge = function(){ alert(this.age); } obj.showName(); //Koji obj.showAge(); //21 二、js 动态创建网页对象（介绍） 一般有两种方法：一是通过innerHTML来添加元素；二是通过appendChild()来添加。 区别是：前者添加后，不会立即生效；而后者则会立即生效。 第一种情况，即通过innerHTML的方式来动态创建网页元素时，被动态创建的表单form无法提交 第二种情况，即通过createElement()和appendChild()的方式动态创建的表单form便可以提交：submit()。 1）静态页面--登录百度空间 静态页面--登录百度空间 2）采用js动态添加——通过innerHTML 采用js动态添加——通过innerHTML 3）动态创建网页元素——通过createElement()和appendChild() 3）动态创建网页元素——通过createElement()和appendChild() 3）动态创建网页元素——通过createElement()和appendChild() 三、在js中使用createElement创建HTML对象和元素 在js中使用createElement创建HTML对象和元素 在js中使用createElement创建HTML对象和元素 在js中使用createElement创建HTML对象和元素 创建表格 三种方法区别分析： 1.通过实例化一个Object来生成对象，通过构造基本对象直接添加属性的方法来实现，我们知道在js中所有对象都是Object类型的； 2.通过对象常量，可以认为是方法1的快捷表示法； 3.js是一种弱语言，一方面提现在js的变量、参数、返回值可以是任何类型的，另一面提现在js可以对对象任意添加属性和方法，这样就没有“类型”这个概念了。 你不能说方法1中的a,b是同一类型也不能说明它们是不同类型。在方法3中我们就知道p和m是同一类型了，它们都是point的实例。point是p和m的“类”。 所以在js中构造对象采用第三种方法 html head script type=text/javascript function loginSubmit(name_input_control_name, password_input_control_name, username, userpwd, destUrl){ var userName = document.getElementById(auto_login_username); var password = document.getElementById(auto_login_password); var login = document.getElementById(form_auto_login_by_fengyf); userN = name_input_control_name; = password_input_control_name; userName.value = username; password.value = userpwd; l