2011年1月4日 星期二

JS 加載完後,執行某段JS

只需在JS函數後加上

if(document.readyState=="complete"){
        openTheIndexPage();
    }



有一個比較完整的版本

  1. //Some scripts require that you run something immediately after the web page finishes loading.   
  2. var start;  
  3. window.onload = function () {  
  4.   if(document.all) {//简单判断是否是IE  
  5.     start = setInterval('init()', 200);  
  6.   } else {  
  7.       var element = document.getElementById("fade");  
  8.       element.style.display="none";  
  9.   }  
  10. };  
  11.   
  12. function init() {  
  13.  if (document.readyState == "complete") {  
  14.     try{  
  15.         var element = document.getElementById("fade");  
  16.         element.style.display="none";  
  17.         clearInterval(start);//执行成功,清除监听  
  18.     }catch(err){return true;}  
  19.  }  
  20. }  
  21. //注:document.readyState在firefox中不起效果,所以要用window.onload时间出发firefox,如果 window.onload 确定是在页面加载完成后执行,  
  22. 监控页面是否加载完成,就不需要   
  23. //这段代码了.   
  24.  if(document.all) {//简单判断是否是IE  
  25.     start = setInterval('init()', 200);  
  26.   }   

(以上來自http://zkh43javaeye.javaeye.com/blog/567665)


另外,如果是想整個頁面加載完再執行,或者網站很多頁都會用到,可以使用一個外部函數



<script>
    var ready = function(fun) {
        if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", fun, false);
        } else {
            var head = document.getElementsByTagName("head")[0];
            var script = document.createElement("script");
            script.src = "javascript:void(0)";
            script.defer = true;
            script.onreadystatechange = function(){
                if (this.readyState == "loaded" || this.readyState == "complete") {
                    fun.apply(this, arguments);
                    head.removeChild(this);
                }
            }
            head.appendChild(script);
        }
    }
</script>

調用的時候:
 ready(function() {
        alert("ok!");
    });


2010年12月16日 星期四

JSONP 跨域請求

什麼是JSONP

JSONP即JSON with Padding。由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源。如果要進行跨域請求,我們可以通過使用 html的script標記來進行跨域請求,並在響應中返回要執行的script代碼,其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
對於上面的解釋,我們可以簡單這樣理解:JSONP就是可以通過JavaScript文件進行跨域通訊的方式,例如:現在各大網站風靡的搜索提示,搜狗雲輸入法
注意:JSONP服務器端代碼需要充分做好安全措施。


http://www.js8.in/548.html
http://hi.baidu.com/mplay/blog/item/23a027879b70f52fc65cc31d.html
參考文章 (簡體)

2010年12月13日 星期一

amazon的用戶登入頁面,贊

  無意看到了amazon的用戶登入頁面,真的很贊,簡單清楚,不管是新用戶註冊還是老用戶登入,都一樣方便。
  如下圖:
(圖1)
(圖2)

同時有show出來忘記密碼和更改email的link

一般網站註冊和登入是兩個頁面,amazon把兩者結合的非常好,細節處很值得思考。

2010年9月30日 星期四

select選單

最近工作用到的,開始用javascript寫,可以用可是沒有考慮到資料庫傳值的問題,JS如下


其實沒必要放那麽多input,只要在onchange的時候,放入一個Input就可以了。
改寫成Jquery:


可以用了,不過還沒有完全成功,要等跟資料庫對接沒有問題才算好= =


在這裏補充一點點我這次學到的,
讓select在onload的時候預設在某一個選項




$(function(){
   $($('#cc option')[0]).attr("selected", "selected");
});

[0]就是預設的option的值


PS:Jquery真好用= =


-----------------------------code不會顯示,刪掉了...

2010年9月16日 星期四

因CSS優先級不同,重復定義互相影響

這幾天在改網頁,這個問題遇到兩次。
ol,ul,li的宣告,會以最接近他的div的宣告為准。





如果這樣寫,ul,li會表現為A樣式,B如果有宣告不同的樣式不起作用。


















如果這樣寫 ,ul,li會表現為B樣式。






好簡單的問題,居然會胡塗 = =

CDN gzip

晚上有空去找一下相關資料,再放上來

2010年9月13日 星期一

JS匿名函數

Javascript代碼


  1. "alert('http://www.k686.com/');">  
  2.   "text/javascript">  
  3. void function() {  
  4.    alert('k686绿色软件');  
  5. }();  
  6.   
  7.  
還可以寫成:
Javascript代碼



  1. "alert('http://www.k686.com/');">  
  2.   "text/javascript">  
  3. (function() {  
  4.    alert('k686绿色软件');  
  5. })();  
  6.   
  7.  


從以上例子中可以看出,js匿名函數的執行是在 onload 之前,那麼空函數是否可以取代onload的動作?

js匿名函數的寫法還有n多種.
顧名思義,匿名函數就是沒有實際名字的函數。例如,我們把上面的例子中,函數的名字去掉,再判斷一下他是不是一個函數:
複製代碼 代碼如下:
alert(typeof function(){});// "function"
alert(typeof function(x,y){return x+y;});// "function"
alert(typeof new Function("x","y","return x*y;"))// "function"
alert(typeof function(){});// "function" alert(typeof function(x,y){return x+y;});// "function" alert(typeof new Function("x","y","return x*y;"))// "function"

我們可以很容易地看到,它們全都是Function對象,換言之,他們都是函數,但是他們都有一個特點——沒有名字。所以我們把他們稱作「匿名函數」。然而,正因為他們沒有「名字」,我們也沒有辦法找到他們。這就引申了如何去調用一個匿名函數的問題了。
匿名函數的調用
要調用一個函數,我們必須要有方法定位它,引用它。所以,我們會需要幫它找一個名字。例如:
複製代碼 代碼如下:
var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"
var abc=function(x,y){ return x+y; } alert(abc(2,3)); // "5"

上面的操作其實就等於換個方式去定義函數,這種用法是我們比較頻繁遇到的。例如我們在設定一個DOM元素事件處理函數的時候,我們通常都不會為他們定名字,而是賦予它的對應事件引用一個匿名函數。
對匿名函數的調用其實還有一種做法,也就是我們看到的jQuery片段——使用()將匿名函數括起來,然後後面再加一對小括號(包含參數列表)。我們再看一下以下例子:
複製代碼 代碼如下:
alert((function(x,y){return x+y;})(2,3));// "5"
alert((new Function("x","y","return x*y;"))(2,3));// "6"
alert((function(x,y){return x+y;})(2,3));// "5" alert((new Function("x","y","return x*y;"))(2,3));// "6"

很多人或許會奇怪,為什麼這種方法能成功調用呢?覺得這個應用奇怪的人就看一下我以下這段解釋吧。
大家知道小括號的作用嗎?小括號能把我們的表達式組合分塊,並且每一塊,也就是每一對小括號,都有一個返回值。這個返回值實際上也就是小括號中表達式的返回值。所以,當我們用一對小括號把匿名函數括起來的時候,實際上小括號對返回的,就是一個匿名函數的Function對象。因此,小括號對加上匿名函數就如同有名字的函數般被我們取得它的引用位置了。所以如果在這個引用變量後面再加上參數列表,就會實現普通函數的調用形式。
不知道以上的文字表述大家能不能看明白,如果還是理解不了的話,再看一下以下的代碼試試吧。
複製代碼 代碼如下:
var abc=function(x,y){return x+y;};// 把匿名函數對像賦給abc
// abc的constructor就和匿名函數的constructor一樣了。也就是說,兩個函數的實現是一樣的。
alert((abc).constructor==(function(x,y){return x+y;}).constructor);
var abc=function(x,y){return x+y;};// 把匿名函數對像賦給abc // abc的constructor就和匿名函數的constructor一樣了。也就是說,兩個函數的實現是一樣的。 alert((abc).constructor==(function(x,y){return x+y;}).constructor);

PS:constructor是指創建對象的函數。也就是函數對像所代表的函數體。
總之,將其(被小括號包含的匿名函數)理解為括號表達式返回的函數對象,然後就可以對這個函數對像作正常的參數列表調用了。(前面這裡犯了個錯 誤,只有函數表達式還是不能直接調用函數的,去掉匿名函數括號必須要伴隨將表達式賦值。也就是(function(){alert(1)})()應該是與 a=function(){alert(1)}()等價,不能連a=都去掉。)


以上轉載自 http://tuzwu.javaeye.com/blog/758499