座標

Mouse is at coordinates: .

append

This is a paragraph.

This is another paragraph.

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

chaining

jQuery is fun!!

toggle

This is a paragraph.

slideToggle

This is a paragraph.

slide

This is a paragraph.

finish

Toggle

Demonstrate fadeToggle() with different speed parameters.

fadeTo

This is a paragraph.

fade

This is a paragraph.

delay

This example sets different speed values for the delay() method.

clearQueue

animate

alert

This is a paragraph.

speed

This is a paragraph.

show,hide

This is a paragraph.

mousedown2

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.

mousedown

Press down and release the mouse button over this div element.

has

This is a span element inside a p element.

This is a p element with no span element.

contains

Welcome to My Homepage

My name is Donald.

I live in Duckburg.

My best friend is Mickey.

明天

Who is your favourite:

• Goofy
• Mickey
• Pluto

focus

animate

Div 1

Div 2

Div 3

not

Welcome to My Homepage

My name is Donald.

I live in Duckburg.

My best friend is Mickey.

Who is your favourite:

• Goofy
• Mickey
• Pluto

lt

Welcome to My Web Page

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbk鞿	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
K霵iglich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK

gt

Welcome to My Web Page

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbk鞿	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
K霵iglich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK

eq

Welcome to My Homepage

My name is Donald.

I live in Duckburg.

My best friend is Mickey.

Who is your favourite:

• Goofy
• Mickey
• Pluto

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!