張貼在使用jQuery核心
CSS, 樣式跟尺寸
jQueryJQuery提供了一個處理方法，可以獲得或設定元素的CSS屬性。
|
1
2
3
4
5
|
// 獲得 CSS 屬性$( "h1" ).css( "fontSize" ); // 傳回一個像是"19px"的字串$( "h1" ).css( "font-size" ); // 同上 |
|
1
2
3
4
5
6
7
8
9
|
// 設定 CSS 屬性$( "h1" ).css( "fontSize", "100px" ); // 設定一個屬性// 設定多個屬性$( "h1" ).css({ fontSize: "100px", color: "red"}); |
需要注意的是，設置多個屬性的時候，參數是一個物件，這個物件包含了多個屬性。JQuery的setter方法接收這樣的物件作為參數可以一次完成多屬性的設定工作。
CSS屬性在JavaScript中一般需要符合駝峰式大小寫的命名規則在單字之間以連接號來連結，例如，CSS 屬性font-size在JavaScript中被用來表示fontSize，然而，這個方式不適用在傳遞CSS屬性名稱字串到.css()方法中 – 在這個案例中不論是駝峰式大小寫的方式或是連接號都可以使用。
不建議在生產就緒的程式碼中使用.css()來設定值，但是在物件中傳遞設定CSS時，CSS屬性要使用駝峰式大小寫而不是使用連接號的方式來進行。
link使用CSS類別來樣式化
作為取質的方法，.css()方法很有用，然而，應該避免在生產就緒的程式碼中使用設定值的方法，因為一般最好是不讓表達的資訊放到JavaScript程式碼中，最好改成撰寫CSS的類別規則來描述不同的視覺狀態，然後在元素上改變其類別。
|
1
2
3
4
5
6
7
8
9
10
11
|
// Working with classes.var h1 = $( "h1" );h1.addClass( "big" );h1.removeClass( "big" );h1.toggleClass( "big" );if ( h1.hasClass( "big" ) ) { ...} |
類別在儲存元素的狀態資訊也是有用的，像是元素是否被選取。
link尺寸
jQuery提供了很多方法來取得跟修改元素的尺寸跟位置資訊。
下面的程式碼顯示jQuery尺寸相關函式的概念，詳細關於jQuery尺寸方法的資訊參閱api.jquery.com上的尺寸文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 基本的尺寸方法// 設定所有<h1>元素的寬度$( "h1" ).width( "50px" );// 取得第一個<h1>元素的寬度$( "h1" ).width();// 設定所有<h1>元素的高度$( "h1" ).height( "50px" );// 取得第一個<h1>元素的高度$( "h1" ).height();// 傳回第一個<h1>相對於它的"父節點偏移"的位置物件資訊$( "h1" ).position(); |