有時候我們會用在網址後面帶參數的做法來在網頁間傳遞一些簡單的資料(QueryString),例如:index.aspx?id=U001&name=GQSM,而JavaScript目前沒有Function可以直接取到後方的資料,所以就得使用一些方式。

//先取得網址字串,假設此頁網址為「index.aspx?id=U001&name=GQSM」
var url = location.href;

//再來用去尋找網址列中是否有資料傳遞(QueryString)
if(url.indexOf('?')!=-1)
{
    //之後去分割字串把分割後的字串放進陣列中
    var ary1 = url.split('?');
    //此時ary1裡的內容為:
    //ary1[0] = 'index.aspx',ary2[1] = 'id=U001&name=GQSM'

    //下一步把後方傳遞的每組資料各自分割
    var ary2 = ary1[1].split('&');
    //此時ary2裡的內容為:
    //ary2[0] = 'id=U001',ary2[1] = 'name=GQSM'

    //最後如果我們要找id的資料就直接取ary[0]下手,name的話就是ary[1]
    var ary3 = ary2[0].split('=');
    //此時ary3裡的內容為:
    //ary3[0] = 'id',ary3[1] = 'U001'

    //取得id值
    var id = ary3[1];

}
Add a comment

serialize()方法使用標準URL編碼表示法創建文本字符串。它可以充當已經選擇個別表單控件,諸如jQuery對象上<input>,<textarea>和<select>:$( "input, textarea, select" ).serialize();通常更容易選擇<form>自身進行序列化:

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

在這種情況下,jQuery序列化表單中的成功控件。form檢查元素是否包含它們包含的輸入,在所有其他情況下,要序列化的輸入元素應該是傳遞給.serialize()方法的集合的一部分。在集合中選擇表單及其子項將導致序列化字符串中出現重複。

Add a comment

canvas實現刮刮卡

這個刮刮卡用HTML5 canvas繪製。刮刮卡主要由兩層canvas繪製,底層放置隨機數,頂層放置圖片,限制每天只能刮三次,主要利用globalCompositeOperation我們可以將新圖形繪製在舊圖形之下、遮蓋部分區域、清除畫布部分區域 (不同於 clearRect() 函式只能清除矩形區域)。

ctx.globalCompositeOperation = 'destination-out';
Add a comment

Mike Cheng直播Webpack前端課程,內容包含Webpack基本應用操作,在一個小時內帶你認識Webpack,值得一看。

Add a comment

Javascript filter函式,可以幫助我們過濾一個陣列中符合條件的元素,若不符合則刪除。不更改原陣列,而回傳新陣列。

filter 函式,接受一個 callback 函式,callback 可以有三個參數(element, index, array),

  • element:陣列元素的值。
  • index:陣列元素的所在位置。
  • arr:已經過 filter 處理的陣列

過濾陣列中值小於10的元素

var numbers = [20, 10, 9, 25, 1, 3, 8, 11];
var result = numbers.filter(function(element, index, arr){
    return element<=10;
});
console.log(result);
// [20, 10, 25, 11]

callback 中,回傳 false 的元素將會被移除,但注意元陣列並未改變,而是回傳新陣列。

Add a comment