小Co鬥阿邦兔XII: Javascript、jQuery 學習筆記

2013年9月15日星期日

Javascript、jQuery 學習筆記

剛開始學網頁時，第一個接觸到的 javascript 框架要算是 jQuery 了，雖然近幾年有漸漸被其他框架取代的趨勢，但大部分的專案我還是都先用 jQuery 來解決，所以就在這邊稍微記錄一下自己使用的筆記或心得

1. ready 用法：當網頁上的原素讀取完畢時,會馬上執行 ready 下的 funtion，寫法有以下幾種(我常用第一種)

<script type="text/javascript">

   // 1
   $(document).ready(function() {...});

   // 2
   $(function() {...});

   // 3
   jQuery(document).ready(function($) {...});

</script>

2. submit 用法：

//Html Section
<html>
    <form id="myForm">
        Account: <input type="text" name="myAccount" size="20"><br />
        Password: <input type="password" name="myPassword" size="20"><br />
        <input type="submit" id="myButton" onclick="formSubmit()" value="確定"/>
    </form>
</html>

//JavaScript Section
<script type="text/javascript">

    // 1
    function formSubmit() {
        document.getElementById("myForm").submit();
    }
    
    // 2
    $("#myButton").click(function () {
        $("#myForm").submit();
    });

</script>

3. 取得上傳檔案名稱及檢查檔案副檔名：

//Html Section
<html>
    <input id="fileId" type="file" value="選擇圖片" name="fileName" onchange="checkFileNameExt()" />
</html>

//JavaScript Section
<script type="text/javascript">

    function checkFileNameExt() {
        var filepath = this.value.split('\\');
        var filename = filepath[filepath.length - 1];   // 取得檔名
        var ext = /\.(jpg|gif|bmp|jpeg|png|tif)$/i;        // 設定要篩選出的副檔名
        var result = ext.test(filename);                       // 檔案檢查結果
        return result;
    }

</script>

4. 取得當前網址：

<script type="text/javascript">

    function getCurrentUrl() {
        var url = window.location.href;
        alert(url);
    }

</script>

5. 在 Javascript 裡使用 Razor Page 裡定義的參數：

<script type="text/javascript">

    $(function () {
        var i=0;
        @foreach(var item in Model.Students)
        {
            <text>
                console.log( 'No.' + i + ':' + '@item.Name');    // Ex:顯示 No.1:林小Co、No.2:陳大軒、No.3:梁小芳... 
                i++;
            </text>
        }
    })
</script>

6. Javascript 給 Array 值的方式：

<script type="text/javascript">

    $(function () {
        var datas = [];
        for(var i = 0 ; i < 10 ; i++)
        {
            datas.push(i);          //將 1~10 的數字塞進陣列
        }
    })
</script>

2013年9月15日 星期日

Javascript、jQuery 學習筆記

訪客統計

2013年9月15日星期日