幾個積累的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