Y 分鐘速成 jquery 詳情 - jquery,javascript,入門,語法,ajax 小X學技術博客

源代碼下載： jquery-cn.js

jQuery是JavaScript的一個函數庫，它可以幫你“寫更少，做更多”。它集成了很多常見的JavaScript任務並且很容易調用。jQuery被世界各地的很多的大公司和開發者使用。它包括了AJAX，事件處理，文檔操作以及很多其它功能，並且更加簡單和快速。

正因為jQuery是JavaScript的一個函數庫，所以你需要首先學習JavaScript



///////////////////////////////////
// 1. 選擇器

// jQuery中的選擇器被用來選擇一個元素
var page = $(window); // 選擇整個視窗

// 選擇器可以作為CSS選擇器使用
var paragraph = $('p'); // 選擇所有段落元素
var table1 = $('#table1'); // 選擇id為table1的元素
var squares = $('.square'); // 選擇所有類是square的元素
var square_p = $('p.square') // 選擇具有square類的所有段落


///////////////////////////////////
// 2. 事件和效果
// jQuery非常善於處理當事件觸發的時候應該做什麼
// 一個非常常見的事件就是文檔的就緒事件
// 你可以用ready方法，在所有元素完成加載的時候執行
$(document).ready(function(){
  // 只有文檔加載完成以後代碼才會執行
});
// 你也可以用定義了的函數
function onAction() {
  // 本函數在事件觸發的時候被執行
}
$('#btn').click(onAction); // 當點擊的時候調用onAction函數

// 其它常見的事件：
$('#btn').dblclick(onAction); // 雙擊
$('#btn').hover(onAction); // 劃過
$('#btn').focus(onAction); // 聚焦
$('#btn').blur(onAction); // 失焦
$('#btn').submit(onAction); // 提交
$('#btn').select(onAction); // 當元素被選中
$('#btn').keydown(onAction); // 當一個按鍵被按下
$('#btn').keyup(onAction); // 當一個按鍵被抬起
$('#btn').keypress(onAction); // 當一個按鍵被按住
$('#btn').mousemove(onAction); // 當鼠標在移動
$('#btn').mouseenter(onAction); // 鼠標移入元素
$('#btn').mouseleave(onAction); // 鼠標離開元素


// 如果不提供任何參數的話，那麼這些方法可以觸發事件
// 而不是定義處理事件的方法
$('#btn').dblclick(); // 觸發元素上的雙擊

// 你可以只用選擇器一次而處理多個事件
$('#btn').on(
  {dblclick: myFunction1} // 雙擊的時候觸發
  {blur: myFunction1} // 失焦的時候觸發
);

// 你可以用一些效果函數來移動或隱藏元素
$('.table').hide(); // 隱藏元素

// 注意：在這些方法中調用函數會仍然隱藏元素
$('.table').hide(function(){
    // 元素先隱藏然後函數被執行
});

// 你可以在變量中儲存選擇器
var tables = $('.table');

// 一些基本的文檔操作方法有：
tables.hide(); // 隱藏元素
tables.show(); // 顯示元素
tables.toggle(); // 對被選元素進行隱藏和顯示的切換
tables.fadeOut(); // 淡出
tables.fadeIn(); // 淡入
tables.fadeToggle(); // 對被選元素進行淡入和淡出顯示的切換
tables.fadeTo(0.5); // 把被選元素逐漸改變至給定的不透明度（0和1之間）
tables.slideUp(); // 通過調整高度來滑動隱藏被選元素
tables.slideDown(); // 對被選元素進行滑動隱藏和滑動顯示的切換
tables.slideToggle(); // 對被選元素進行滑動隱藏和滑動顯示的切換

// 上面所有的方法接受速度參數（毫秒）和一個回調函數
tables.hide(1000, myFunction); // 持續一秒的隱藏動畫然後執行函數

// fadeTo要求提供透明度參數作為第二個參數
tables.fadeTo(2000, 0.1, myFunction); // 通過2秒鐘將透明度變為0.1然後執行函數

// 你可以用animate方法實現一些略微高級的效果
tables.animate({margin-top:"+=50", height: "100px"}, 500, myFunction);
// animate方法接受一個包含CSS和值的對象作為目標，
// 其次是可選的速度參數，
// 以及最後的回調函數

///////////////////////////////////
// 3. 操作

// 這些類似效果函數但是可以做更多
$('div').addClass('taming-slim-20'); // 給所有div添加類taming-slim-20

// 常見操作方法
$('p').append('Hello world'); // 添加到元素末尾
$('p').attr('class'); // 獲取屬性
$('p').attr('class', 'content'); // 設置屬性
$('p').hasClass('taming-slim-20'); // 如果有類則為真
$('p').height(); // 獲取和設置元素的高度


// 對於很多的操作函數來説，獲取元素的信息
// 僅僅是第一個符合元素的
$('p').height(); // 僅僅獲取第一個p標籤的高度

// 你可以用each來迭代所有元素
var heights = [];
$('p').each(function() {
  heights.push($(this).height()); // 把所有p標籤的高度加入數組
});

有建議？或者發現什麼錯誤？在 Github上開一個issue，或者發起pull request！