img-circle

Circle

The .img-circle class shapes the image to a circle (not available in IE8):

調整DIV

DIV的顯示尺寸

innerWidth() - returns the width of an element (includes padding).

innerHeight() - returns the height of an element (includes padding).

傳回長,寬

width() - returns the width of an element.

height() - returns the height of an element.

set css

This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

設置背景色

This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

alert傳回背景色

This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

toggleClass

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

removeClass

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

addClass-2

This is some text.

This is some text.

addClass

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

This is some important text!

remove-2

This is a paragraph.

This is another paragraph.

This is another paragraph.

empty清空

This is some text in the div.

This is a paragraph in the div.

This is another paragraph in the div.

remove

This is some text in the div.

This is a paragraph in the div.

This is another paragraph in the div.

Insert several new elements

Click the button to insert text after the image.

after() and before()

前置列表項

This is a paragraph.

This is another paragraph.

1. List item 1
2. List item 2
3. List item 3

添加列表項

This is a paragraph.

This is another paragraph.

1. List item 1
2. List item 2
3. List item 3

Set multiple attribute values設置多個屬性值

W3Schools.com

Mouse over the link to see that the href attribute has changed and a title attribute is set.

Set attribute value設置屬性值

W3Schools.com

Mouse over the link (or click on it) to see that the value of the href attribute has changed.

Set content設置文本

This is a paragraph.

This is another paragraph.

Input field:

Get attribute value 顯示href的值

W3Schools.com

Get content獲取內容

Name:

Stop sliding停止滑動

Click to slide down panel

Hello world!

Animation-7

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

HELLO

Animation-6

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

Animation.toggle

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

Animation-3

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

123

Animation動畫-2

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

animate動畫

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

slideToggle切換

Click to slide the panel down or up

Hello world!

slideUp收起

Click to slide up panel

Hello world!

slideDown滑下

Click to slide down panel

Hello world!

fadeTo

Demonstrate fadeTo() with different parameters.

fadeToggle切換

Demonstrate fadeToggle() with different speed parameters.

fadeOut淡出

Demonstrate fadeOut() with different parameters.

fadeIn淡入

Demonstrate fadeIn() with different parameters.

hide parts

Island Trading

Contact: Helen Bennett
Garden House Crowther Way
London

Paris sp嶰ialit廥

Contact: Marie Bertrand
265, Boulevard Charonne
Paris

toggle切換

This is a paragraph with little content.

This is another small paragraph.

hide and show

If you click on the "Hide" button, I will disappear.

focus and blur

Name:
Email:

hover徘徊

This is a paragraph.

mouseup

This is a paragraph.

mousedown

This is a paragraph.

mouseleave.alert

This is a paragraph.

mouseenter.alert

Enter this paragraph.

this.hide

This is a heading

This is a paragraph.

This is another paragraph.

p.hide

This is a heading

This is a paragraph.

This is another paragraph.

class.hide

This is a heading

This is a paragraph.

This is another paragraph.

id.hide

This is a heading

This is a paragraph.

This is another paragraph.

dblclick.hide

If you double-click on me, I will disappear.

Click me away!

Click me too!

123

click.hide

If you click on me, I will disappear.

Click me away!

Click me too!