如何使用jQuery

引用一個js進入jQuery的世界

jQuery的使用只需要在網頁中引用jQuery.js檔即可,該檔案可以到jQuery官方網站下載,或者直接連結官方網站的js網址使用.
官方網站: http://jquery.com/
直接連結:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery的核心符號'$'

jQuery以$符號開頭使用核心功能,因此在jquery開發中,不管是呼叫jQuery的核心function或是使用第三方的plugin,都會是依賴$當開頭.

JavaScript的hello world

<html>
<head>
    <title>
        using javascript
    </title>
    <script type="text/javascript">
        function MyFunction() {
            alert('hello world!');
        }
    </script>
</head>
<body onload="MyFunction"> // 網頁完整讀取完畢後才執行.
</body>
</html>

jQuery的hello world

<html>
<head>
    <title>
        using jQuery
    </title>
    <!--載入jQuery.js -->
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>        
    <script type="text/javascript">
        $(function () { // 網頁完整讀取完畢後執行
            MyFunction();
        });
        $(function () { 
            // 網頁完整讀取完畢後執行,jQuery允許重複定義$(function(){});
            alert('hello world,again!');
        });
        // 顯示hello world!
        function MyFunction() {
            alert('hello world!');
        }
    </script>
</head>
<body>
</body>
</html>

說明:

$(function()({ });表示整個網頁讀取完畢後才開始執行,可以避免JavaScript在存取Html DOM的時候,因為尚未載入發生Exception,並且$(function(){});是允許多次定義,因此可以在方便閱讀位置多次使用,不需像傳統javascript只能定義一個onload事件.
Posted by

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

橫式廣告