几个积累的javascript和css的技巧2

document.createElement()的用法

 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

<div id="board"></div>

 <script type="text/javascript">
            var board = document.getElementById("board");
            var e = document.createElement("input");
            e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

appendChildhild和insertBefore都可以进行插入节点的操作。

<div id="test"><p id="x1">Node</p><p>Node</p></div>

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  //测试从这里开始
  //appendChild方法：
  oTest.appendChild(newNode);
  //insertBefore方法：
  oTest.insertBefore(newNode,null);
</script>

insetbefore的第二个参数可以为可以在子节点列表的任意位置

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

总之， appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

参考文档：http://www.cnblogs.com/penny/archive/2009/01/10/1281293.html

js中的setTimeout的用法

常用的setTimeout的语法有：

var i=0;
setTimeout("i+=1;alert(i)",1000);

var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

var i=0;
function test(){
       i+=1;
       alert(i);
}
setTimeout("test()",1000);

setTimeout(test,1000);

使用setTimeout达成若干秒后再次执行的功能

var i=0;
function xilou(){
        i+=1;
        if(i>10){alert(i);return;}
        setTimeout("xilou()",1000);
        //用这个也可以
        //setTimeout(xilou,1000);
 }
    

setTimeout中的this问题

 function xilou(){

        this.name="xilou";
        this.sex="男";
        this.num=0;
    }
    xilou.prototype.count=function(){
        this.num+=1;
        alert(this.num);
        if(this.num>10){return;}
        //下面用四种方法测试,一个一个轮流测试。
        setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误：对象不支持此属性或方法。
        setTimeout("count()",1000);//B:错误显示：缺少对象
        setTimeout(count,1000);//C:错误显示：'count'未定义
        //下面是第四种 
        var self=this;
        setTimeout(function(){self.count();},1000);//D:正确
        
    }
    
    var x=new xilou();
    x.count();

错误分析：
    A：中的this其实指是window对象，并不是指当前实例对象
    B：和C：中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()

    D：将变量self指向当前实例对象，这样js解析引擎就不会混肴this指的是谁了。

参考文档：http://www.cnblogs.com/zhangzheny/archive/2007/12/03/981200.html

javascript的匿名函数

在Javascript定义一个函数一般有如下三种方式：

函数关键字(function)语句：

function fnMethodName(x){alert(x);}

函数字面量(Function Literals)：

var fnMethodName = function(x){alert(x);}

Function()构造函数：

var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName，第1种就是最常用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。

匿名函数的几种写法

函数字面量：首先声明一个函数对象，然后执行它。

(function(){
  alert(1);
} ) ( );

优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。

( function(){
  alert(2);
} ( ) );

Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

void function(){
  alert(3);
}()

参考文档：http://dancewithnet.com/2008/05/07/javascript-anonymous-function/

ifream用法精析

iframe的使用语法：

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

src：文件的路径，既可是HTML文件，也可以是文本、ASP等； 
width、height："画中画"区域的宽与高； 
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; 
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。  

在父窗体中访问并控制子窗体中的对象 

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。 

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。 

在子窗体中访问并控制父窗体中对象 

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象

参考文档：http://sbiigu.iteye.com/blog/195612

相对路径的理解

forward中"/"相对于web应用.
从http://localhost:8080/Test/gw/page.jsp中转发
  <jsp:forward page="OtherPage.jsp"/>在JSP页面被解析后转换成pageContext.forward("OtherPage.jsp");
  "/OtherPage.jsp"提交到http://localhost:8080/Test/OtherPage.jsp
  "OtherPage.jsp"提交到http://localhost:8080/Test/gw/OtherPage.jsp
  
  <form action="/ddd"> 和 response.sendRedirect("/ddd"); 相对于服务器根路径.
  假设转发代码包含于注册的servlet－url为/ggg/tt;jsp为/ggg/tt.jsp:
  绝对路径：response.sendRedirect("http://www.brainysoftware.com")发送http://www.brainysoftware.com
  根路径：response.sendRedirect("/ooo")发送至http://localhost:8080/ooo
  相对路径：response.sendRedirect("ooo")发送至http://localhost:8080/Test/ggg/ooo,

javascript中的中apply和call方法

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

我们就上面的foo.call(this, arg1, arg2, arg3)展开分析.

foo是一个方法,this是方法执行时上下文相关对象,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.

在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.

举个具体的例子

/创建一个A类
function A(){
//类实例化时将运行以下代码
//此时的执行上下文对象就是this,就是当前实例对象
    this.message = 'message of a';
    this.getMessage = function(){
        return this.message;
    }
}
//创建一个A类实例对象
var a = new A();
//调用类实例getMessage方法获得message值
alert(a.getMessage());
//创建一个B类
function B(){
    this.message = 'message of b';
    this.setMessage = function(msg){
        this.message = msg;
    }
}
//创建一个B类实例对象
var b = new B();
//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call(a, 'a的消息');
//下面将显示”a的消息”
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!

对象的方法可以任意指派,而对象本身一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.

所以 b.setMessage.call(a, “a的消息”); 就等于用a作执行时上下文对象调用b对象的setMessage方法,而这过程中与b一点关系都没有, 作用等效于a.setMessage( “a的消息”);

因为apply与call产生的作用是一样的,可以说

call, apply作用就是借用别人的方法来调用,就像调用自己的一样.

call和apply的使用方法区别如下：

function print(a, b, c, d){
    alert(a + b + c + d);
}
function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
    print.call(this, a, b, c, d);
//用apply方式借用print, 参数作为一个数组传递,
//这里直接用JavaScript方法内本身有的arguments数组
    print.apply(this, arguments);
//或者封装成数组
    print.apply(this, [a, b, c, d]);
}
//下面将显示”背光脚本”
example('背' , '光' , '脚', '本');

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递.所以可以说成

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

当参数明确时可用call, 当参数不明确时可用apply给合arguments

form标签中的name和id的区别

name的作用：

用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。 

用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。 

用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。 

用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。 

用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。 

用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。 

另外，frame和window的名字，用于在其他frame或window指定target。

以下情况要使用id

1. label与form控件的关联，

<label for="MyInput">My Input</label>

<input id="MyInput" type="text">

for属性指定与label关联的元素的id，不可用name替代。

2. CSS的元素选择机制，以#MyId的方式指定应用样式的元素，不能用name替代。

3. 脚本中获得对象：

IE支持在脚本中直接以id（而不是name）引用该id标识的对象。例如上面的input，要在脚本中获得输入的内容，可以直接以MyInput.value来获得。

如果用DOM的话，则用document.getElementById("MyInput").value，如果要用name的话，通常先得到包含控件的form，例如document.forms[0]，然后从form再引用name，注意这样得到的是经过计算后将发送给服务器的值。

参考文档：http://blog.csdn.net/wyy20071210/article/details/3298957

http://www.lantian360.com/blueblog/blog.asp?id=WX5