Chapter 7 Murachs Java Script and j Query

  • Slides: 57
Download presentation
Chapter 7 Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach

Chapter 7 Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 1

Objectives Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach &

Objectives Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 2

Objectives (continued) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach

Objectives (continued) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 3

The j. Query web site at www. j. Query. com Murach's Java. Script and

The j. Query web site at www. j. Query. com Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 4

What j. Query offers Murach's Java. Script and j. Query, C 7 © 2012,

What j. Query offers Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 5

The user interface for the FAQs application Murach's Java. Script and j. Query, C

The user interface for the FAQs application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 6

The Java. Script for the FAQs application Murach's Java. Script and j. Query, C

The Java. Script for the FAQs application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 7

The Java. Script for the FAQs application (cont. ) Murach's Java. Script and j.

The Java. Script for the FAQs application (cont. ) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 8

The j. Query for the FAQs application Murach's Java. Script and j. Query, C

The j. Query for the FAQs application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 9

The FAQs application as a j. Query UI accordion Murach's Java. Script and j.

The FAQs application as a j. Query UI accordion Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 10

The HTML for a j. Query UI accordion Murach's Java. Script and j. Query,

The HTML for a j. Query UI accordion Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 11

The Java. Script code for the j. Query UI accordion Murach's Java. Script and

The Java. Script code for the j. Query UI accordion Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 12

Some typical plugin functions Murach's Java. Script and j. Query, C 7 © 2012,

Some typical plugin functions Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 13

Terms Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach &

Terms Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 14

The syntax for a j. Query selector Murach's Java. Script and j. Query, C

The syntax for a j. Query selector Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 15

The HTML for the selected elements Murach's Java. Script and j. Query, C 7

The HTML for the selected elements Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 16

How to select elements by element, id, and class Murach's Java. Script and j.

How to select elements by element, id, and class Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 17

How to select elements by relationship Murach's Java. Script and j. Query, C 7

How to select elements by relationship Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 18

How to code multiple selectors Murach's Java. Script and j. Query, C 7 ©

How to code multiple selectors Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 19

The syntax for calling a j. Query method Murach's Java. Script and j. Query,

The syntax for calling a j. Query method Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 20

Examples that call j. Query methods Murach's Java. Script and j. Query, C 7

Examples that call j. Query methods Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 21

The syntax for a j. Query event method Murach's Java. Script and j. Query,

The syntax for a j. Query event method Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 22

How to code an event handler for the ready event Murach's Java. Script and

How to code an event handler for the ready event Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 23

An event handler for the click event of all h 2 elements Murach's Java.

An event handler for the click event of all h 2 elements Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 24

Terms Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach &

Terms Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 25

The user interface for the Email List application Murach's Java. Script and j. Query,

The user interface for the Email List application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 26

The HTML for the Email List application Murach's Java. Script and j. Query, C

The HTML for the Email List application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 27

The HTML for the Email List application (cont. ) Murach's Java. Script and j.

The HTML for the Email List application (cont. ) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 28

The j. Query for the Email List application Murach's Java. Script and j. Query,

The j. Query for the Email List application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 29

The j. Query for the Email List application (cont. ) Murach's Java. Script and

The j. Query for the Email List application (cont. ) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 30

Some of the most useful j. Query selectors Murach's Java. Script and j. Query,

Some of the most useful j. Query selectors Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 31

Examples that use j. Query selectors Murach's Java. Script and j. Query, C 7

Examples that use j. Query selectors Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 32

A summary of the most useful j. Query methods Murach's Java. Script and j.

A summary of the most useful j. Query methods Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 33

Examples that use j. Query methods Murach's Java. Script and j. Query, C 7

Examples that use j. Query methods Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 34

Some of the most useful j. Query event methods Murach's Java. Script and j.

Some of the most useful j. Query event methods Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 35

Examples that use j. Query event methods Murach's Java. Script and j. Query, C

Examples that use j. Query event methods Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 36

Other event methods that you should be aware of Murach's Java. Script and j.

Other event methods that you should be aware of Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 37

How to store an event handler in a variable Murach's Java. Script and j.

How to store an event handler in a variable Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 38

How to attach an event handler to an event Murach's Java. Script and j.

How to attach an event handler to an event Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 39

How to remove an event handler from an event Murach's Java. Script and j.

How to remove an event handler from an event Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 40

How to trigger an event Murach's Java. Script and j. Query, C 7 ©

How to trigger an event Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 41

The FAQs application in a browser Murach's Java. Script and j. Query, C 7

The FAQs application in a browser Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 42

The HTML for the FAQs application Murach's Java. Script and j. Query, C 7

The HTML for the FAQs application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 43

The HTML for the FAQs application (cont. ) Murach's Java. Script and j. Query,

The HTML for the FAQs application (cont. ) Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 44

The j. Query for the FAQs application Murach's Java. Script and j. Query, C

The j. Query for the FAQs application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 45

The user interface for the Image Swap application Murach's Java. Script and j. Query,

The user interface for the Image Swap application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 46

The HTML for the Image Swap application Murach's Java. Script and j. Query, C

The HTML for the Image Swap application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 47

The CSS for the li elements Murach's Java. Script and j. Query, C 7

The CSS for the li elements Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 48

The Java. Script for the Image Swap application Murach's Java. Script and j. Query,

The Java. Script for the Image Swap application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 49

Three images with the middle image rolled over Murach's Java. Script and j. Query,

Three images with the middle image rolled over Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 50

The HTML for the Image Rollover application Murach's Java. Script and j. Query, C

The HTML for the Image Rollover application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 51

The Java. Script for the Image Rollover application Murach's Java. Script and j. Query,

The Java. Script for the Image Rollover application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 52

Exercise 7 -3: Develop a Book List application Murach's Java. Script and j. Query,

Exercise 7 -3: Develop a Book List application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 53

Extra 7 -1: Develop an Expand/Collapse app Murach's Java. Script and j. Query, C

Extra 7 -1: Develop an Expand/Collapse app Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 54

Extra 7 -2: Develop an Image Gallery application Murach's Java. Script and j. Query,

Extra 7 -2: Develop an Image Gallery application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 55

Short 7 -1: Modify the Future Value application Murach's Java. Script and j. Query,

Short 7 -1: Modify the Future Value application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 56

Short 7 -2: Create a FAQS Rollover application Murach's Java. Script and j. Query,

Short 7 -2: Create a FAQS Rollover application Murach's Java. Script and j. Query, C 7 © 2012, Mike Murach & Associates, Inc. Slide 57