jQuery
由JavaScript，query（查詢）的意思組成。也就是說，這個工具庫在設計時主要考濾是基於JavaScript的查詢。那麼在JavaScript中查詢主要是依靠DOM（文檔對象模型）結構中的節點。而在網頁中的所有內容我們都可以稱之為節點，比如文檔節點、標籤（元素）節點、文本節點（普通文本）、注釋節點、屬性（標籤中這屬性）節點等。這個工具庫的主要特點就是簡化對頁面節點操作的功能的封裝。使前端人員可以更高效、快速的實現頁面交互功能。
Ajax
Ajax的主要是網頁與後台伺服器之間通過XMLHttpRequest對象建立連接，並將頁面中的請求發送給伺服器，從而將對應的數據傳回頁面。
由於Ajax發送的數據越來多，發現XML封裝數據，由於XML規範比較複雜，就顯的數據越來越龐大，不利於數據的快速傳遞並解析。
JSON
所以就基於JavaScript的數據類型創建了JSON這種數據描述格式，很簡單的就可以封裝很複雜的數據。同時又是獨立於語言，從面使更多的語言都可以使用這種數據格式的傳輸。
為什麼網路上jQuery的範例都不能動？
要使用jQuery必須要先加載jQuery，一般放在<head>裡。如果是WordPress，預設已有使用jQuery，而且放在<body>的最下面，這是一種技巧，讓一般HTML與文字先顯示出來，再讓Javascript或 jQuery 執行。避免因為JavaScript檔案過大而導致網站要等很久才會顯示。也有人在<script>裡面加上async，但是如果直接寫jQuery在 .html 或是用任何inline的方式去寫的話(inline指的就是直接寫在檔案裡，例如寫在rails的.erb檔裡，PHP的.php檔之類的，反正就不是拉出來寫在.js檔裡)，都有可能會得到$ is undefined的結果。這是因為在執行該語法的時候，jQuery檔案還沒下載完成。
jQuery的 html() 方法
$(selector).html(content)
selector可以是<select>、<input>等元素。
content是設定給被選元素(上面的selector)的新内容。该参数可包含 HTML 标签。
JQuery 的方法只有 JQuery 的物件認識它
透過 ID 要撈取 input 這個元素
<input type='text' name='demo' id='demo1' value='1' />
Javascript 的 DOM 撈取方式
var demo = document.getElementById('demo1'); // 得到 DOM 物件
demo.val(); //錯誤，對 DOM 物件沒有 val() 這個方法可以呼叫
demo.value; // 正確，要利用 .value 取得 input 值
JQuery 用 selector 撈取方式
var $demo = $("#demo1"); //得到 JQuery 物件
$demo.value; //錯誤，對 JQuery 物件並沒有 .value 這個屬性
$demo.val(); //正確，利用 .val() 抓到 input 值
this的用法
$("input").each(function(){
this.value; //正確，因為 this 是 DOM 的物件，擁有 value 這個屬性
$(this).val(); //正確，因為 $(this) 是 JQuery 的物件，可使用 val()
});
沒有留言:
張貼留言