Скачать презентацию Java Script Sixth Edition Chapter 12 Introduction to Скачать презентацию Java Script Sixth Edition Chapter 12 Introduction to

816c920e215640a737e26650874b0f5a.ppt

  • Количество слайдов: 21

Java. Script, Sixth Edition Chapter 12 Introduction to j. Query Java. Script, Sixth Edition Chapter 12 Introduction to j. Query

Objectives When you complete this chapter, you will be able to: • Select elements Objectives When you complete this chapter, you will be able to: • Select elements using j. Query syntax • Use built-in j. Query functions Java. Script, Sixth Edition 2

Introduction to j. Query • j. Query – Commonly used library – Enables developers Introduction to j. Query • j. Query – Commonly used library – Enables developers to implement common Java. Script tasks with minimal code Java. Script, Sixth Edition 3

Implementing j. Query • Cross-browser library – j. Query 1. x supports IE 6, Implementing j. Query • Cross-browser library – j. Query 1. x supports IE 6, 7, and 8 – j. Query 2. x supports only IE 9 and later • Requires less extra code, so smaller file Java. Script, Sixth Edition 4

Including the Library • Link. js file containing library to HTML document – Can Including the Library • Link. js file containing library to HTML document – Can download from jquery. com – Can specify public location on CDN Java. Script, Sixth Edition 5

Starting a j. Query Statement with $ • All j. Query code conforms to Starting a j. Query Statement with $ • All j. Query code conforms to Java. Script rules – Uses shortcuts that can look like different language • Every j. Query statement begins with $ – Specifies that any code that follows should be interpreted using j. Query library Java. Script, Sixth Edition 6

Selecting Elements with j. Query • $ followed by reference to elements on which Selecting Elements with j. Query • $ followed by reference to elements on which statement operates – Reference contained in parentheses • Use CSS selector in quotes to select elements • Example–to operate on h 1 elements: $("h 1") • Example—to select elements in odd class: $(". odd") • Concise version of query. Selector. All() method: document. query. Selector. All(". odd") Java. Script, Sixth Edition 7

Traversing the DOM with j. Query Methods • Can select other elements in relation Traversing the DOM with j. Query Methods • Can select other elements in relation to selection – Use j. Query DOM traversal methods Table 12 -1 j. Query methods for DOM traversal Java. Script, Sixth Edition 8

Traversing the DOM with j. Query Methods (cont'd. ) • Select children of original Traversing the DOM with j. Query Methods (cont'd. ) • Select children of original selection: $("ul. mainmenu li"). children() • Narrow selected items with selector in method's parentheses: $("ul. mainmenu li"). children("ul") Java. Script, Sixth Edition 9

Manipulating the DOM with j. Query Methods • Plain Java. Script – Java. Script Manipulating the DOM with j. Query Methods • Plain Java. Script – Java. Script without j. Query • j. Query API includes methods for performing actions on selected elements Java. Script, Sixth Edition 10

Manipulating the DOM with j. Query Methods (cont'd. ) Table 12 -2 j. Query Manipulating the DOM with j. Query Methods (cont'd. ) Table 12 -2 j. Query methods for manipulation Java. Script, Sixth Edition 11

Manipulating the DOM with j. Query Methods (cont'd. ) • Many j. Query methods Manipulating the DOM with j. Query Methods (cont'd. ) • Many j. Query methods serve dual function – Look up a value – Set that value 1 $(". odd"). width(); 2 /* returns the computed width value for the first 3 element with the class name "odd" */ 4 $(". odd"). width("5 em"); 5 /* sets the width of all elements with the class name 6 "odd" to 5 em */ Java. Script, Sixth Edition 12

Specifying an Event Handler • Can group j. Query statements into functions – Standard Specifying an Event Handler • Can group j. Query statements into functions – Standard Java. Script syntax function display() { $("ul. mainmenu li"). children("ul"). add. Class("show"); } Java. Script, Sixth Edition 13

Specifying an Event Handler (cont'd. ) • Backward-compatible event listener easier in j. Query Specifying an Event Handler (cont'd. ) • Backward-compatible event listener easier in j. Query – Start with $ – Specify selector for element(s) associated with event – Finish with method that specifies event and action(s) Java. Script, Sixth Edition 14

Specifying an Event Handler (cont'd. ) Table 12 -3 j. Query methods for common Specifying an Event Handler (cont'd. ) Table 12 -3 j. Query methods for common events • Performs as described with function in () • Empty () instead fires indicated event Java. Script, Sixth Edition 15

Specifying an Event Handler (cont'd. ) 1 $( Specifying an Event Handler (cont'd. ) 1 $("form. order"). submit(validate. Form); 2 /* specifies validate. Form() as event handler when form 3 is submitted */ 4 $("form. order"). submit(); 5 /* fires submit event on form */ Java. Script, Sixth Edition 16

Specifying an Event Handler (cont'd. ) Table 12 -4 j. Query event properties Java. Specifying an Event Handler (cont'd. ) Table 12 -4 j. Query event properties Java. Script, Sixth Edition 17

Using j. Query Built-in Effects • j. Query includes visual animation methods Table 12 Using j. Query Built-in Effects • j. Query includes visual animation methods Table 12 -4 j. Query animation methods Java. Script, Sixth Edition 18

Using j. Query Built-in Effects (cont'd. ) • All methods take value in milliseconds Using j. Query Built-in Effects (cont'd. ) • All methods take value in milliseconds as argument – Animation occurs in specified time frame • Some also support slow and fast keywords Java. Script, Sixth Edition 19

Summary • j. Query enables developers to implement common tasks with minimal code • Summary • j. Query enables developers to implement common tasks with minimal code • Must link. js file containing library to HTML document • Every j. Query statement starts with $ • Select elements in j. Query with CSS selector in quotes • Can modify a selection – Append DOM traversal method to selection code Java. Script, Sixth Edition 20

Summary (cont'd. ) • j. Query API includes methods for performing actions on elements Summary (cont'd. ) • j. Query API includes methods for performing actions on elements • Many methods allow you to look up or set value • Event listener consists of –$ – selector – method • j. Query includes visual animation methods Java. Script, Sixth Edition 21