JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1)

Size: px

Start display at page:

Download "JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1)"

Johnathan Clark
6 years ago
Views:

1 Technology & Information Management Instructor: Michael Kremer, Ph.D. Class 8 Professional Program: Data Administration and Management JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1)

2 AGENDA 20. Specific Events 21. Overview of jquery

3 Specific Events 20.

20.1 DOCUMENT LOAD EVENTS 303 Web applications need notification from the web browser to tell them when the document has been loaded and is ready

4 20.1 DOCUMENT LOAD EVENTS 303 Web applications need notification from the web browser to tell them when the document has been loaded and is ready to be manipulated Load Event Manipulating html elements in JS before loading is finished will silently fail Readystatechange event different states:

5 20.1 DOCUMENT LOAD EVENTS 304 To improve loading a page DOMContentLoaded event is fired when the document has been loaded, parsed and any deferred scripts have been executed (but not images and async scripts) Despite its name, it is not part of DOM specification, but of HTML5 spec

6 20.2 MOUSE/MOUSEWHEEL EVENTS 305 All mouse events except mouseenter and mouseleave bubble Click events on links and Submit buttons have default actions that can be prevented

7 20.2 MOUSE/MOUSEWHEEL EVENTS 306 Basic Mouse Events

8 20.2 MOUSE/MOUSEWHEEL EVENTS 307 Mouse Events Object passed to mouse event handlers has clientx and clienty properties that specify the coordinates of the mouse pointer relative to the containing window Keyboard modifier used in conjunction with mouse (shift..) are detected to perform special actions (multi-select!) Most browsers only fire click events for left button clicks You should use mousedown and mouseup if you need to detect clicks of other mouse buttons Mouse Wheel Events New event name, simply named wheel 1-dimensional and 2-dimensional hardware differences Object passed to a wheel event handler will have deltax, deltay, and deltaz properties to specify rotation in three dimensions

9 20.2 MOUSE/MOUSEWHEEL EVENTS 308 Drag and Drop Events Simple drag N drop within one web page True drag N drop (DnD) defines drag source and drag target in different applications DnD is a complex process: DnD is always event based (two events) Any document element that has the HTML draggable attribute is a drag source fires a dragstart event datatransfer.setdata() to specify data

10 20.2 MOUSE/MOUSEWHEEL EVENTS 309 datatransfer.effectallowed to specify which of the move, copy, and link transfer operations are supported When a drop occurs, the dragend event is fired Check datatransfer.dropeffect for transfer operation(move, copy)

11 20.3 INPUT EVENTS 310 Three legacy events: DOM Level 3 Events specification defines a more general input event triggered whenever the user inputs text regardless of the source, such as: keypress and textinput events are triggered before the newly input text is actually inserted cancellable Browsers also implement an input event type that is fired after text is inserted into an element not cancellable

12 20.4 KEYBOARD EVENTS 311 Keydown/keyup events are fired when a key is pressed/released on the keyboard (modifier, function, and alphanumeric keys) Event object associated with these events has a numeric keycode property that specifies which key was pressed: Printable characters: keycode is Unicode encoding (Upper case letter) Numeric characters: keycode contains actual number Nonprinting characters: some other value Keycode was not standardized in DOM Level 3, instead new key property was designed string of keyname Pressing a key on the keyboard generates following sequence:

13 Overview of jquery 21.

14 21.1 INTRODUCTION TO JQUERY 312 Open-source JavaScript library that organizes many typical operations into a simple and clear syntax Also takes care of cross-browser incompatibility issues jquery makes it easy to: find the elements of a document that you care about manipulate those elements by adding content, editing HTML attributes and CSS properties, defining event handlers, and performing animations jquery library is focused on queries Typical query uses a CSS selector to identify a set of document elements and returns an object that represents those elements

15 21.2 JQUERY BASICS 313 jquery library defines a single global function named jquery() Global symbol $ as a shortcut Value returned by this function represents a set of zero or more DOM elements and is known as a jquery object jquery objects define many methods for operating on the sets of elements they represent This is code that finds, highlights, and quickly displays all hidden <p> elements that have a class of details Chaining multiple functions is very common( css().show()) Find all elements in the document with CSS class clicktohide and registers event handler on each one Event handler is invoked when user clicks on the element (element slowly slides up and then disappears)

16 21.2 JQUERY BASICS 314 Obtaining and Referencing jquery jquery library is free software and is downloadable from Once you have the code, you can include it in your web pages with a <script> element min in the filename above indicates that this is the minimized version of the library, with unnecessary comments and whitespace removed, and internal identifiers replaced with shorter ones Content distribution network (CDN): Use version 3 in this course

21.2 JQUERY BASICS 315 The jquery Function jquery() or $ is heavily overloaded: Passing CSS Selector Pass a CSS selector string to return a set of elements matching the CSS selector string

17 21.2 JQUERY BASICS 315 The jquery Function jquery() or $ is heavily overloaded: Passing CSS Selector Pass a CSS selector string to return a set of elements matching the CSS selector string jquery supports most of the CSS3 selector syntax, plus some extensions of its own Optional second argument value defines the starting point (or points) for the query and is often called the context

18 21.2 JQUERY BASICS 316 Passing Element, Document, Window Object Simply wraps passed object into a jquery object: Allows you to use jquery methods to manipulate the element rather than using raw DOM methods Common to see $(document) or $(this) Passing String of HTML jquery creates the HTML element or elements described by that text and then returns a jquery object representing those elements jquery does not automatically insert the newly created elements into the document use jquery methods (see later) Cannot pass plain text CSS selector. Must include one html tag Optional second argument: Pass a Document object to specify the document with which the elements are to be associated (important for iframes) Pass an object as the second argument for additional attributes

19 21.2 JQUERY BASICS 317 Passing a Function Pass a function into it, the function is invoked when the document is finished loading jquery triggers functions registered through $() when the DOMContentLoaded event is fired or, in browsers that do not support that event, when the load event is fired Common to see jquery programs written as anonymous functions defined within a call to jquery() or $() jquery Namespace jquery library also uses the jquery() function as its namespace and defines a number of utility functions and properties under it:

20 21.2 JQUERY BASICS 318 jquery Terminology The jquery Function: creates jquery objects, registers handlers to be invoked when the DOM is ready, and that also serves as the jquery namespace jquery Object: represents a set of document elements and can also be called jquery result, jquery set, wrapped set Selected Elements: Match elements returned in jquery object A jquery Function: Function like jquery.noconflict() that is defined in the namespace of the jquery function

21 21.2 JQUERY BASICS 319 jquery Terminology(continued) jquery Method: Method of a jquery object returned by the jquery function Names like $.each refer to jquery functions and names like.each(with a period but without a dollar sign) refer to jquery methods Call jquery function each() to invoke function f once for each element of the array a: Call jquery() function to obtain a jquery object containing all <a> elements, then call the each() method of that jquery object to invoke the function f once for each selected element

21.2 JQUERY BASICS 320 Querying using jquery Basically pass CSS selectors to $() Returned object is jquery object (=array-like): it has a length property and numeric properties

22 21.2 JQUERY BASICS 320 Querying using jquery Basically pass CSS selectors to $() Returned object is jquery object (=array-like): it has a length property and numeric properties from 0 to length-1 Alternatively, use size() method instead of the length property and the get() method instead of indexing with square brackets Besides length three other properties:

23 21.2 JQUERY BASICS 321 $() function is similar to the document method queryselectorall(), however, there are good reasons to use jquery s implementation: To loop over all elements in a jquery object, you can call the each() method instead of writing a for loop Expects a callback function as its sole argument, and it invokes that callback function once for each element in the jquery object (in document order) Within the callback the this keyword refers to an Element object each() also passes the index and the element as the first and second arguments to the callback each() returns the jquery object on which it is called, so that it can be used in method chains

21.2 JQUERY BASICS 322 Usually you do not need each since jquery methods usually iterate implicitly over the set of matched elements and operate on them all

24 21.2 JQUERY BASICS 322 Usually you do not need each since jquery methods usually iterate implicitly over the set of matched elements and operate on them all You typically only need to use each() if you need to manipulate the matched elements in different ways jquery method map() works much like the Array.map() method

25 21.2 JQUERY BASICS 323 Another fundamental jquery method is index() This method expects an element as its argument and returns the index of that element in the jquery object, or 1 if it is not found Final general-purpose jquery method is is() It takes a selector as its argument and returns true if at least one of the selected elements also matches the specified selector

26 21.3 JQUERY GETTERS AND SETTERS 324 Most common operations on jquery objects are those that get or set the value of HTML attributes, CSS styles, element content, or element geometry General information about getters and setters:

21.3 JQUERY GETTERS AND SETTERS 325 Getting/Setting HTML Attributes attr() method is the jquery getter/setter for HTML attributes attr() handles browser incompatibilities and special cases

27 21.3 JQUERY GETTERS AND SETTERS 325 Getting/Setting HTML Attributes attr() method is the jquery getter/setter for HTML attributes attr() handles browser incompatibilities and special cases removeattr() is a related function that completely removes an attribute from all selected elements Getting/Setting CSS Attributes css() method is very much like the attr() method, but it works with the CSS styles of an element Returns the current (or computed ) style of the element

28 21.3 JQUERY GETTERS AND SETTERS 326 Getting/Setting CSS Classes Class attribute is interpreted as a space-separated list of CSS class names Usually to add, remove, or test for the presence of a single name in the list rather than replacing one list of classes with another addclass() and removeclass() add and remove classes from the selected elements toggleclass() adds classes to elements that do not already have them and removes classes from those that do hasclass() tests for the presence of a specified class

21.3 JQUERY GETTERS AND SETTERS 327 Getting/Setting HTML Form Values val() is a method for setting and querying the value attribute of HTML form elements Also for querying and setting the selection

29 21.3 JQUERY GETTERS AND SETTERS 327 Getting/Setting HTML Form Values val() is a method for setting and querying the value attribute of HTML form elements Also for querying and setting the selection state of checkboxes, radio buttons, and <select> elements Getting/Setting Element Content text() and html() methods query and set the plain-text or HTML content of an element or elements When invoked with no arguments, text() returns the plain-text content of all descendant text nodes of all matched elements Pass a function, which will be used to compute the new content string

30 21.3 JQUERY GETTERS AND SETTERS 328 Getting/Setting Element Data jquery defines a getter/setter method named data() that sets or queries data associated with any document element or with the Document or Window objects Basis for jquery s event handler registration and effects queuing mechanisms Call data() method as a setter and pass an element name and a value as the two arguments Call data() method as a getter with no arguments, it returns an object containing all name/value pairs associated with the first element in the jquery object When you invoke data() with a single string argument, it returns the value associated with that string for the first element

21.3 JQUERY GETTERS AND SETTERS 329 Getting/Setting Element Data Use removedata() to remove data from an element or elements If passing a string, it deletes any value associated with that string

31 21.3 JQUERY GETTERS AND SETTERS 329 Getting/Setting Element Data Use removedata() to remove data from an element or elements If passing a string, it deletes any value associated with that string for an element or elements If calling removedata() with no arguments, it deletes all data for selected element or elements jquery also defines utility function forms of data() and removedata() methods

32 21.4 ALTERING DOCUMENT STRUCTURE 330 Methods for making more complex changes to a document Inserting and Replacing Elements Each of the methods below takes an argument that specifies the content that is to be inserted into the document append(), prepend(), before(), after(), replacewith() Content can be: String of plain text or HTML, a jquery object, an Element or text Node, or a function that will be invoked to compute the value to be inserted These methods: Are all invoked on target elements and are passed the content that is to be inserted as an argument Can be paired with another method that works the other way around: invoked on the content and passed the target elements as the argument

33 21.4 ALTERING DOCUMENT STRUCTURE 331 Important things to understand about these pairs of methods:

21.4 ALTERING DOCUMENT STRUCTURE 332 Copying Elements If you insert elements that are already part of the document, those elements will simply be moved, not copied, to new location If you are

34 21.4 ALTERING DOCUMENT STRUCTURE 332 Copying Elements If you insert elements that are already part of the document, those elements will simply be moved, not copied, to new location If you are inserting the elements in more than one place, jquery will make copies as needed If you want to copy elements to a new location instead of moving them, you must first make a copy with the clone() method clone() returns jquery object, need to insert using methods above

35 21.4 ALTERING DOCUMENT STRUCTURE 333 Wrapping Elements Another type of HTML insertion: Wrapping a new element (or elements) around one or more elements 3 wrapping methods:

36 21.4 ALTERING DOCUMENT STRUCTURE 334 Deleting Elements Methods for deleting elements: remove() method removes any event handlers and other data you may have bound to the removed elements detach() method works just like remove() but does not remove event handlers and data unwrap() method performs element removal in a way that is the opposite of the wrap() or wrapall() method: it removes the parent element of each selected element without affecting the selected elements or their siblings

Index. Boolean value, 282

Index. Boolean value, 282 Index A AJAX events global level ajaxcomplete, 317 ajaxerror, 316 ajaxsend, 316 ajaxstart, 316 ajaxstop, 317 ajaxsuccess, 316 order of triggering code implementation, 317 display list, 321 flowchart, 322