Related Posts Plugin for WordPress, Blogger...

2014年9月3日 星期三

JQuery初體驗,Hello World

jQuery的使用,
可以簡省網頁程式的開發時間,
這裏就來體驗一下jQuery的功能

首先jQuery特點,
維基百科已經介紹的很不錯了,
想要多吸收一點資訊再開工的,
可以先看看維基百科
初體驗jQuery,
介紹大家測試jQuery程式的網站jsbin,
由左邊的程式碼,
就可以顯示結果在右邊的視窗,
非常的好用,
其實HTML程式,
把檔案存成副檔名為html檔,
用瀏覽器直接打開也是可以測試,
不過有工具可以使用,
方便開發及測試,
時間就是金錢啊

使用jQuery有二個重點,

第一部份,在程式中要引用jQuery函數
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
說明:使用jQuery函數可以直接引用網路上的函式庫,
但是如果網站環境是不能對外連線的網路架構,
就需要連自已主機的函式庫檔案了,
HelloWord程式,
引用jQuery網站檔案就可以了

第二部份,呼叫及使用jQuery函數
    <script> $(document).ready(function () {$("body").html("Hello World");});

    </script> 
使用jQuery元件時,$代表的是jQuery元件,
$()可以寫成jQuery(),
$(document).ready(function () {});的內容是指,jQuery的元件,
會在其他網頁元件完成作業後,
再繼續作行作業,
function () {$("body").html("Hello World");}
則是在body這個元作中,
加入"Hello World"字串

HelloWorld.html如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () { $("body").html("Hello World"); });
    </script>
</head>
<body></body>
</html>






沒有留言:

張貼留言

頁次