我最新既 JavaScript 程式碼就係寫比 Drupal 既 ImageBox,完全用晒 jQuery 既寫法。如果用我自己寫法,長度一定長幾倍!
選取元素
jQuery 用 CSS selector 選取元素(element),下面有好多例子:
- 代碼: 選擇全部
$('#test')
等如
- 代碼: 選擇全部
document.getElementById('test')
係咪方便好多?仲有,
- 代碼: 選擇全部
$('div')
等如
- 代碼: 選擇全部
document.getElementsByTagName('div')
仲可以,睇 class,無 jQuery 寫真係難以想像。
- 代碼: 選擇全部
$('.test')
睇 attribute,如果無 jQuery 寫真係煩到乜咁。
- 代碼: 選擇全部
$('div[rel="xxx"]')
基本特色
- 代碼: 選擇全部
<div id="test">test</div>
照理就會出 "test"
行完
- 代碼: 選擇全部
$('#test').append(' you');
就會出 "test you"。係咪好方便呢?
好過
- 代碼: 選擇全部
document.getElementById('test').innerText = document.getElementById('test').innerText + ' you';
Events
Events 即係嗰啲 onlick、onmouseup 嗰啲,呢樣野無乜特別,只係介紹下。
- 代碼: 選擇全部
$('#test').click(function(e) {
// do something
});
除咗 click,仲有 scroll、keyup、keydown 等等
同 addEventListener(IE 既 addHandler)一樣
效果
- 代碼: 選擇全部
document.getElementById('element').style.display = 'none'
好悶啦,用下 jQuery 既效果玩下,好似 slide 落黎或者 fade in,呢啲都係靠 jQuery 攞返黎
- 代碼: 選擇全部
$('#test').slideDown();
Drupal 既 slideDown
仲可以 set 速度
- 代碼: 選擇全部
$('#test').slideDown('slow');
I-Circle 同埋全部子網既 ImageBox(例子)都用 fade in fade out 效果,就係咁做
又係可以 set 速度
- 代碼: 選擇全部
$('#test').fadeIn();
$('#test').fadeOut();
最傳統!
- 代碼: 選擇全部
$('#test').show();
$('#test').hide();
代碼
呢個雖然方便,不過我唔多鐘意用,咁樣降低可讀度。
$('#test').fadeIn('fast').fadeOut('slow');
範例
我 show 下大約我點樣寫個 ImageBox(例子)
同源碼唔同,因為呢個我係就咁打出黎
- 代碼: 選擇全部
$('a[rel="image"].click = function(e) {
$('#imagebox_image').attr('src', this.href);
$('#imagebox_layer').fadeIn();
$('#imagebox_image').fadeIn();
}
createElement
- 代碼: 選擇全部
var element = document.createElement('div');
/* 會 error
element.click(function() {
// code
});
*/
element = jQuery(element);
element.click(function() {
// code
});
不過要記住,要 jQuery 化個 element,唔係出 error
我搵唔到 jQuery 有乜內置 function 係 create jQuery 化咗既 element
遲啲再介紹下 set CSS
不過我都唔係玩得太深入,未玩過 AJAX
我遲啲再試下