Blog for Coding Learner: [jQuery] jQuery入門

　　jQuery是一套 JavaScript的函示庫，其主要特色是有著強大的選擇器、跨瀏覽器、Ajax(非同步的 JavaScript 與 XML 技術)、事件等。也因為是 JavaScript的函示庫，所以若要學會使用 jQuery必須要有一點 JavaScript的基礎，在接下來的教學中會簡單介紹放置位置、import、selector、modify、action、ajax等項目。

一、寫在哪？
　　由於它是一套 JavaScript的函示庫，所以放置的地點跟 JavaScript是一樣的，需要放在SCRIPT標籤內。

二、匯入(import)

　　你可以透過官網下載其檔案並進行匯入，或者直接填入官網的檔案位置，其語法如下：

　　但是一般為了避免因官方出問題或者你想離線時寫 jQuery，一般建議將它下載下來以方便使用。

官方連結：點我

三、錢字號(Dollar sign)的意義

$代表的就是 jQuery的意思，因此若你在寫作中把 $換成 jQuery也是相通的(Q要大寫)。以下這兩種寫方是一樣的：

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

jQuery(document).ready(function()...});

四、甚麼時候開始執行？
　　有三種開始情況：

body：在讀取完 body標籤後開始執行。
document：在讀取完所有文件(.css、.js、.html)後開始執行。一般情況下都是使用這種。
window：當所有畫面都載入完畢後開始執行。若你希望文字內容優先載入，圖片晚一點在載入可以使用這種。

寫法如下：

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

接下來我們展示第一個範例：

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
    var pageOnLoad = function pageOnLoad() {
  alert("Hello World")
 }
 $(document).ready(pageOnLoad);!
</script>
</head><body></body>
</html>

若成功了，會在讀入畫面後立即跳出一個彈跳視窗：

五、選擇器(selector)
　　一般會用的有三種，我們也使用範例來了解：

$("body").html(); //選取 body標籤內的所有內容
$("#id_name").html(); //"#" 選取 id名稱為 id_name的所有內容
$(".class_name").html(); //"." 選取 class名稱為class_name的所有內容。

　　為什麼'上述都要強調所有呢？因為選擇器所選到的，其實都是陣列型態。所以取到的物件都可以加上陣列索引，若沒加的話預設就是 0開始。

var jsObj = $(".class")[0];

範例如下：

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
 var pageOnLoad = function pageOnLoad() {
  alert($("body").html());
  alert($(".title").html());
  alert($("#subtitle").html());
 }
 $(document).ready(pageOnLoad);
</script>
</head>
<body>
 <h1 class="title">Title</h1>
 <h2 id="subtitle">subtitle</h2>
</body>
</html>

六、修飾(modify)

$(".class").append('…');//在所匹配的元素內加入內容
$(".class").before('…');//在所匹配的元素之後加入內容
$(".class").after('…'); //在所匹配的元素之前加入內容

七、動作(action)

$(".class").click();
$(".class").onclick(function() {…}); //按一下並觸發function()內的事件
//下列兩種要 jQuery 1.7版後才能使用
$(".class").on("click", function() {…}); //按一下並觸發function()內的事件
$(".class").on("click", "sel", function() {…}) //按一下觸發function()內的事件，並且將sel(自訂的)事件繼承給它

八、Ajax (按我看wiki簡介)
　　這邊要注意一下，由於一般可能會預設不同意不同網域載入(不是所有瀏覽器都有此問題，例如IE8則沒此限制)，因此會產生 Access-Control-Allow-Origin' header 的問題，解決方法是在提供 Ajax 服務的 response 加上 header (Access-Control-Allow-Origin:*) 即可，但若只是想單純測試，Chrome瀏覽器可以使用 Allow-Control-Allow-Origin套件(按我進入下載安裝頁面)。安裝完後，Chrome瀏覽器右上方會出現CORS按鈕，綠色代表已啟動，紅色則反之。

使用 webservice取得資料，其範例如下：
$.ajax({
  type: "POST", //使用POST方式
url: "填入webservice網址",
  dataType: 'text',
  data: {input:"若需要輸入甚麼，可以寫在這裡"},
  success: function(data){ //成功取得資料時
alert(data);
var result = jQuery.parseJSON(data); //取回資料後轉換成 JSON格式
  },
  error: function() { //發生錯誤時
      alert(“無法連線至伺服器");
  }
});

上述寫法沒有順序性，並且可依照需求填寫。

OK，今天就簡單介紹到這裡吧~

Blog for Coding Learner

2014年6月23日星期一

[jQuery] jQuery入門

沒有留言:

張貼留言

2014年6月23日 星期一

[jQuery] jQuery入門

沒有留言:

張貼留言

2014年6月23日星期一