JavaScript/JQuery筆記(2)

2013-03-07

摘要:JavaScript/JQuery筆記(2)

JQuery方法

<新增移除修改元件>

//範例 : 原本程式碼

<h4>ERROR</h4>

</div>

※ .html() / .text()

// .html()

// 取得HTML Code

alter ( $ (#errors).html ()); //會彈出 <h4>ERROR</h4>視窗

// 取換掉原本的 HTML Code

$ ( '#errors').html('<p>錯誤訊息</p>');

//程式碼會變成以下

</div>

但有時候只想改內文不想改到htmlcode的話,使用.text() 以上一個例子來看

// .text()

//程式碼

</div>

//改變內容

$( ' #errors' ).text('錯誤錯誤')

//程式會變成如下

</div>

※ .prepend() / .append() 可以在選中的元件中在子元件前(後)面加入一段HTML Code

// .prepend() 放在被選取元件的後面

$ ('#errors').prepend('<h3>你好嗎?</h3>')

//程式會變如下

</div>

// .append() 放最後一組子元件的後面

$ ('#errors').append('<h2>我很好</h2>')

//程式會變如下

</div>

※ .before() / .after() 在被選取元件外面(前/後)新增一段HTML

// .before

$( '#errors' ).before('<input type="text" name="userName" id="userName">')

//程式會變如下

'<input type="text" name="userName" id="userName">

</div>

// .after()

$( '#errors' ).after('<p>goodbye</p>')

//程式會變如下

</div>

<p>goodbye</p>

</div>

@ 更換/移除

假設當使用者按下關閉可以把彈出式對話框移除

此對畫框ID="popup"

$ ( '#popup' ),remove();

亦不侷限於只移出單個元件

$('span.error' ).remove(); //刪除所有ID="error"的<span>元件

______________________________________________________________

<設定、讀取和移除元件屬性>

Class屬性

※ .addClass() / .removeClass() 為元件新增/刪除一組特定的class

如果要讓這功能發揮還是要先寫好一組css並加入網頁樣式中這樣瀏覽器能快速使用

$ ( 'a [herf]^="http://"] ' ).addClass( ' extralink ' ); //把所有外部聯結的元件新增class="extralink"

$ ( ' #alertBox ' ).removeClass( 'highlight' ); //找出所有ID="alterBox"的div 並移除class="highlight"

輪替切換(toggle) on/off

假設希望每當有人點擊網站上某個按鈕時,改變<body> 的class的屬性讓網頁更變版行(可透過class子孫選取項來做更改)。

同時希望再點擊相同按鈕時可以回復原本外觀。

先假設此按鈕的ID為changeStyle，每當有人點擊按鈕時會輪替新增/移除<body>標籤的class="altStyle"

程式:

$( ' #changeStyle ' ).click(function() {

$( ' body ' ).toggleClass( 'altStyle' );

});

※ .css() 讀取和修改Css屬性

.css 三種用途 :

讀取元件目前的CSS屬性
設定元件的某一組CSS屬性值
一次設定元件的多組CSS屬性值

＋讀取元件目前的CSS屬性: 想讀取元件目前某個CSS屬性值，可以把屬性值名稱傳進CSS()

//讀取ID="main"的<div>的background-color值

var bgColor = $( '#main' ).css('background-color');

(PS.

有時css回傳值會跟想像的有落差,舉例來說以顏色類的屬性為例：

css會回傳RGB格式 ( rgb(255,0,0) )，如果有設定透明度就會回傳RGBA格式 ( rgba(255,10,10,.5) )

就算是原本設定十六進位表示法或著用RGB百分比表示法都會回傳RGB格式。

另外，JQuery看不懂CSS屬性名稱簡寫 如:font、margin、padding、border...這類等。

一定要用font-size、margin-top、padding-bottom或border-bottom-width...等

JQuery回傳數值單位一律會是像素。因此即使你把font-size="150%" 也會檢查完font-size屬性後把單位換算成像素給你 )

＋設定元件的某一組CSS屬性值: 傳兩組引數給css()，css屬性名稱和屬性值

//把<body>標籤的字體大小改為200%

$ ( ' body ' ).css( ' font-size ' , ' 200%' );

傳入的屬性值可以是字串也可為數值 (JQuery 會自動把數值視為像素)

$ ( ' .pullquote ' ).css('padding',100); //JQuery 把 padding =100px

把所有class="highlight"的文字外圍加上邊框

$ ( 'p.highlight' ).css( ' border ', '1px solid black ');

有時後會根據CSS現在屬性值去做變更 Ex:當使用者按下"放大字體" 要依據現在字體大小做變動設定

var basefont = $ ( 'body' ).css( ' font-size' ); //取得現在的font-size

basefont=parseInt('basefont',10); //因為JQuery會回傳像素(100px) 需要用pareInt把數值以外的字元刪除

$( 'body ' ).css( 'font-size' ,basefont *2); //把原本font-size放大兩倍

注意:

只有在網頁中的其他標籤(文字段落.標題...等)都是採用相對值(ems或百分比)的方式來設定font size的屬性值才能用此方法

如果標籤為絕對值(指定像素)的方式來設定font size 那麼修改<body>的字體大小是無法影響的

＋一次設定元件的多組CSS屬性值(想修改元件裡一組以上的CSS屬性)

舉例來說,如果想動態的突顯某組div標籤(做互動),可以修改<div>標籤的背景顏色並加上框線

$ ( ' highlightedDiv ' ).css( ' backgroud-color ' , '#FF0000 ' );

$ ( ' highlightedDiv ' ).css( ' border ' , '2px soild #FE0012 ' );

另一種做法傳一組物件實字(objectliteral)給css()

物體實字: 一群屬性[名稱/值]的集合。在每一組屬性名稱後面加冒號( : )在加上屬性值在用大括號( { } )包起來。

$ ( ' highlightedDiv ' ).css( { ' backgroud-color ' : ' #FF0000 ' , ' border ' : '2px soild #FE0012 ' }

$ ( ' highlightedDiv ' ).css(

{

' backgroud-color ' : ' #FF0000 ' ,

' border ' : ' 2px soild #FE0012 '

} ) ;

But 最好的方法是鍊結

$ ( ' highlightedDiv ' ).css( ' backgroud-color ' , '#FF0000 ' ).css( ' border ' , '2px soild #FE0012 ' );

HTML屬性

※ .attr() / .removeAtter() : 處理HTML屬性值

// .attr()

可讓你讀取標籤某個特定屬性值

var imageFile = $ ( '#banner img' ).attr( ' src ' ); //會回傳ID="banner" 標籤裡出現的第一組src屬性值

修改標籤某特定屬性值

$( ' banner img ' ).attr( 'src' , 'www.yahoo.com.tw' );

// .removeAtter() 完全移除特定屬性

$ ( 'body' ).removeAttr( 'bgColor ' );

______________________________________________

JQuery

回首頁