WordPress.com



2. Objects in Javascript2.1 Introduction to Objects:JavaScript is a prototype-based Object Oriented Programming Language, instead of class-based.Objects are variables too. But objects can contain many values. The values are written as name : value pairs (name and value separated by a colon).Examplevar person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; A JavaScript object is a collection of named values Object MethodsMethods are actions that can be performed on objects.Object properties can be both primitive values, other objects, and functions.An object method is an object property containing a function definition. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue",fullName :function{ return this.firstName+this.lastName}};2.1 Creating a JavaScript ObjectWith JavaScript, you can define and create your own objects.There are different ways to create new objects:Define and create a single object, using an object literal.Define and create a single object, with the keyword new.Define an object constructor, and then create objects of the constructed type(i) Using object literals:Literals are smaller and simpler ways to define objects.Using an object literal, you both define and create an object in one statement.An object literal is a list of name:value pairs inside curly braces {}.var person = {??firstName: "John",??lastName: "Doe",??age: 50,??eyeColor: "blue",fullName : function(){return this.firstName+this.lastName ;}};console.log(person.firstName);console.log(person.fullName());(ii) Using the Object() Constructor:The object can also be created using a new JavaScript object.Examplevar person = new Object();person.firstName = "John";person.lastName = "Doe";person.age = 50;person.eyeColor = "blue"; person.fullName= function(){ return this.firstName+lastName;}(iii) Using function and constructor(Prototype):Sometimes we need a "blueprint" for creating many objects of the same "type".The way to create an "object type", is to use an object constructor function.function Person(first, last, age, eye) {??this.firstName = first;??this.lastName = last;??this.age = age;??this.eyeColor = eye;}var obj =new Person(“Ram”,”babu”,40,”black”)The value of this, when used in an object, is the object itself.In a constructor function this does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created.You cannot add a new property to an object constructor the same way you add a new property to an existing object: To add a new property to a constructor, you must add it to the constructor function.function Person(first, last, age, eyecolor) {? this.firstName = first;? this.lastName = last;? this.age = age;??this.eyeColor = eyecolor;??this.nationality = "English";}Constructor function can also define methods:Using the prototype PropertyThe JavaScript prototype property allows you to add new properties to object constructors:Examplefunction Person(first, last, age, eyecolor) {? this.firstName = first;? this.lastName = last;? this.age = age;? this.eyeColor = eyecolor;}Person.prototype.nationality = "English";2.2 Prototypical InheritanceAlmost all objects in JavaScript have the prototype property. By using it and more specifically the prototype chain we can mimic inheritance. The prototype is a reference to another object and it is used whenever JS can’t find the property you’re looking for on the current object. Simply put, whenever you call a property on an object and it doesn’t exist, JavaScript will go to the prototype object and look for it there. If it finds it it will use it, if not it will go to that object’s property and look there. This can bubble up all the way to Object.prototype before returning undefined.In JavaScript, objects have a special hidden property [[Prototype]] , that is either null or references another object. That object is called “a prototype”:lefttop00When we want to read a property from object, and it’s missing, JavaScript automatically takes it from the prototype. In programming, such thing is called “prototypal inheritance”.The property [[Prototype]] is internal and hidden, but there are many ways to set it.One of them is to use __proto__, like this:let animal = { eats: true};let rabbit = { jumps: true};rabbit.__proto__ = animal;If we look for a property in rabbit, and it’s missing, JavaScript automatically takes it from animal.For instance:let animal = { eats: true};let rabbit = { jumps: true};rabbit.__proto__ = animal; // (*)// we can find both properties in rabbit now:alert( rabbit.eats ); // true (**)alert( rabbit.jumps ); // trueHere the line (*) sets animal to be a prototype of rabbit.Then, when alert tries to read property rabbit.eats (**), it’s not in rabbit, so JavaScript follows the [[Prototype]] reference and finds it in animal (look from the bottom up):Here w f we look for a property in rabbit, and it’s missing, JavaScript automatically takes it from animal.For instance:let animal = { eats: true};let rabbit = { jumps: true};rabbit.__proto__ = animal; // (*)// we can find both properties in rabbit now:alert( rabbit.eats ); // true (**)alert( rabbit.jumps ); // trueHere the line (*) sets animal to be a prototype of rabbit.Then, when alert tries to read property rabbit.eats (**), it’s not in rabbit, so JavaScript follows the [[Prototype]] reference and finds it in animal (look from the bottom up):Here we can say that "animal is the prototype of rabbit" or "rabbit prototypally inherits from animal".So if animal has a lot of useful properties and methods, then they become automatically available in rabbit. Such properties are called “inherited”.If we have a method in animal, it can be called on rabbit:let animal = { eats: true, walk() { alert("Animal walk"); }};let rabbit = { jumps: true, __proto__: animal};// walk is taken from the prototypeThe method is automatically taken from the prototype, like this:2.3.Asynchronous Task in JavascriptOperations in JavaScript are traditionally synchronous and execute from top to bottom. JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time. What if you have to make an expensive database request?Asynchrony in computer programming refers to the occurrence of events independently of the main program flow and ways to deal with such events.In programming languages like e.g Java ,the “main program flow” happens on the main thread or process and “the occurrence of events independently of the main program flow” is the spawning of new threads or processes that runs code in parallel to the “main program flow”.Since ,a JavaScript program is single threaded and all code is executed in a sequence, not in parallel. In JavaScript this is handled by using what is called an “asynchronous non-blocking I/O model”.In Javascript , asynchronous task are handled by using(i) Callback functions(ii) Promises(iii) Async/Await 2.4 Callback functions:In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”.Def: A callback function, also known as a higher-order function, is a function that is passed to another function as a parameter, and the callback function is called (or executed) inside the otherFunction.A callback function is a function which is:passed as an argument to another functionis invoked after some kind of eventonce its parent function completes, the function passed as an argument is then calledFor JavaScript to know when an asynchronous operation has a result (a result being either returned data or an error that occurred during the operation), it points to a function that will be executed once that result is ready.console.log("first");setTimeout(function() { console.log("second")},3000);console.log("third");Example:var friends = ["Mike", "Stacy", "Andy", "Rick"];friends.forEach(function (eachName, index){console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick});Normally code is synchronous - one statement executes and there is a guarantee that the next statement will execute immediately afterwards With asynchronous operations, you should assume that you have no idea when the operation will complete. You can't even assume that just because you send out one request first, and another request second, that they will return in that order Callbacks are the standard way of handling asynchrnous code in JavaScript, but promises are the best way to handle asynchronous code. This is because callbacks make error handling difficult, and lead to ugly nested codeCallback hell: Multiple functions can be created independently and used as callback functions. These create multi-level functions. When this function tree created becomes too large, the code becomes incomprehensible sometimes and is not easily refactored. This is known as callback hell. In some cases you may have a callback in a callback in a callback or even a callback in a callback in a callback in a callback.2.5. PromisesCallbacks are not interchangeable with Promises. This means that callback-based APIs cannot be used as Promises. The main difference with callback-based APIs is it does not return a value, it just executes the callback with the result. A Promise-based API, on the other hand, immediately returns a Promise that wraps the asynchronous operation, and then the caller uses the returned Promise object and calls?.then() and?.catch() on it to declare what will happen when the operations has finished. The creation of a Promise object is done via the Promise constructor by calling “new Promise()”. It takes a function as an argument and that function gets passed two callbacks: one for notifying when the operation is successful (resolve) and one for notifying when the operation has failed (reject). What you pass as an argument when calling resolve will be passed to the next then() in the promise chain. The argument passed when calling reject will end up in the next catch().Promises have three states:Pending: This is the initial state of the Promise before an operation beginsFulfilled: This means the specified operation was completedRejected: The operation did not complete; an error value is usually thrownGeneral form of Promise:var p = new Promise(function(resolve, reject) {// Do an async task async task and then...if(/* good condition */) {resolve('Success!');}else {reject('Failure!');}});p.then(function() { /* do something with the result */}).catch(function() {/* error :( */ })Promise chain :Promise chain is a sequence of promises chained together to execute multiple asynchronous operations. It’s sometimes desirable to chain promises together. For instance, you might have multiple asynchronous operations to be performed. When one operation gives you data, you’ll start doing some other operation on that piece of data and so on.Example:new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*)}).then(function(result) { // (**) alert(result); // 1 return result * 2;}).then(function(result) { // (***) alert(result); // 2 return result * 2;}).then(function(result) { alert(result); // 4 return result * 2;});ExplanationThe idea is that the result is passed through the chain of .then handlers.Here the flow is:The initial promise resolves in 1 second (*),Then the .then handler is called (**).The value that it returns is passed to the next .then handler (***)…and so on.As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.The whole thing works, because a call to promise.then returns a promise, so that we can call the next .then on it.2.6. ClosuresIn JavaScript, if you use the function keyword inside another function, you are creating a closure A regular function created in the global scope can also close over variablesA closure is an inner function that has access to the outer (enclosing) function's variablesThe closure has three scopes, all part of the same chain: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variablesThe inner function has access not only to the outer function’s variables, but also to the outer function's parametersExample:function showName (firstName, lastName) {?var nameIntro = "Your name is "; // this inner function has access to the outer function's variables, including the parameterfunction makeFullName () {? return nameIntro + firstName + " " + lastName;? }return makeFullName ();?}?showName ("Ram", "Raj"); // Your name is Ram Raj2.7. XHR request responseXMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design. Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML, but also JSON, HTML or plain text.XMLHttpRequest(): The constructor initializes an XMLHttpRequest. It must be called before any other method calls ES6 Features?2.8. Arrow Functions (Fat Arrows)Arrow functions, introduced in ES6, provides a concise way to write functions in JavaScript.Unlike other functions, the value of this inside arrow functions is not dependent on how they are invoked or how they are defined. It depends only on its enclosing contextBy using arrow functions, we avoid having to type the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets.Arrow functions do not have their own this. They are not well suited for defining object methods.Arrow functions are not hoisted. They must be defined before they are used.You can only omit the return keyword and the curly brackets if the function is a single statement. Example:Function with ES5 syntax:function timesTwo(params) { return params * 2}timesTwo(4); // 8Now, here is the same function expressed as an arrow function:var timesTwo = params => params * 2timesTwo(4); // 8The variety of syntaxes available in arrow functions:1. No parametersIf there are no parameters, you can place an empty parentheses before =>.() => 42In fact, you don’t even need the parentheses!_ => 422. Single parameterWith these functions, parentheses are optional:x => 42 || (x) => 423. Multiple parametersParentheses are required for these functions:(x, y) => 424. Statements (as opposed to expressions)In its most basic form, a function expression produces a value, while a function statement performs an action. With the arrow function, it is important to remember that statements need to have curly braces. Once the curly braces are present, you always need to write return as well.Here is an example of the arrow function used with an if statement:var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; }}5. “Block?body”If your function is in a block, you must also use the explicit return statement:var addValues = (x, y) => { return x + y}6. Object?literalsIf you are returning an object literal, it needs to be wrapped in parentheses. This forces the interpreter to evaluate what is inside the parentheses, and the object literal is returned.x => ({ y: x })Limitations:Arrow functions are anonymous, which means that they are not named.This anonymity creates some issues:Harder to debug : When you get an error, you will not be able to trace the name of the function or the exact line number where it occurred.No self-referencing : If your function needs to have a self-reference at any point (e.g. recursion, event handler that needs to unbind), it will not work.Advantage: No binding of ‘this’In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions however, this is lexically bound. It means that it uses this from the code that contains the arrow function. let People = function(person, age) { this.person = person; this.age = age; = function() { // logs People console.log(this); // Normal Function binding this setTimeout(function() { // here this!=People console.log(this.person + " is " + this.age + " years old"); }.bind(this), 3000); //Arrow Function without binding this setTimeout(() => { // arrow function to make lexical "this" binding // here this=People."this" has been inherited Console.log(this.person + " is " + this.age + " years old"); }, 3000); } } let person1 = new People('John', 21); ();2.9. Destructuring AssignmentThe two most used data structures in JavaScript are Object and Array.Objects allow us to pack many pieces of information into a single entity and arrays allow us to store ordered collections. So we can make an object or an array and handle it as a single entity, or maybe pass it to a function call.Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, HYPERLINK "" \l "array-destructuring" Array destructuring : An example of how the array is destructured into variables:// we have an array with the name and surnamelet arr = ["Ram", "Raj"]// destructuring assignmentlet [firstName, surname] = arr;alert(firstName); // Ramalert(surname); // RajIgnore the first elements: Unwanted elements of the array can also be thrown away via an extra comma:// first and second elements are not neededlet [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; alert( title ); // ConsulWorks with any iterable object: Actually, we can use it with any iterable, not only arrays:let [a, b, c] = "abc"; // ["a", "b", "c"]let [one, two, three] = new Set([1, 2, 3]);The rest ‘…’ : If we want not just to get first values, but also to gather all that follows – we can add one more parameter that gets “the rest” using three dots "...":let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];alert(name1); // Juliusalert(name2); // Caesar alert(rest[0]); // Consulalert(rest[1]); // of the Roman RepublicThe value of rest is the array of the remaining array elements. We can use any other variable name in place of rest, just make sure it has three dots before it and goes last in the destructuring assignment.Default Values : there are fewer values in the array than variables in the assignment, there will be no error. Absent values are considered undefined:let [firstName, surname] = [];alert(firstName); // undefinedIf we want a “default” value to replace the missing one, we can provide it using =:// default valueslet [name = "Guest", surname = "Anonymous"] = ["Julius"];alert(name); // Julius (from array)alert(surname); // Anonymous (default used)Object destructuringThe destructuring assignment also works with objects.The basic syntax is:let {var1, var2} = {var1:…, var2…}We have an existing object at the right side, that we want to split into variables. The left side contains a “pattern” for corresponding properties. In the simple case, that’s a list of variable names in {...}.Example:let options = { title: "Menu", width: 100, height: 200};let {title, width, height} = options;alert(title); // Menualert(width); // 100alert(height); // 2002. 10. JavaScript Variable ScopeThe scope of a variable is the region of your program in which it is defined. Traditionally, JavaScript defines only two scopes-global and local.Global Scope?? A variable with global scope can be accessed from within any part of the JavaScript code.Local Scope?? A variable with a local scope can be accessed from within a function where it is declared.ES6 defines a new variable scope - The Block scope.The block scope restricts a variable’s access to the block in which it is declaredvar num = 10 function test() { var num = 100 console.log("value of num in test() "+num) } console.log("value of num outside test() "+num) test()2.10.1. Variable declarations with var, let and const :(i) varThe JavaScript var statement is used to declare a variable and, optionally, we can initialize the value of that variable.Example: var a =10;Variable?declarations are processed before the execution of the code.The scope of a JavaScript variable declared with?var?is its current?execution context.The scope of a?JavaScript variable declared outside the function is global.function nodeSimplified(){var a =10;console.log(a); // output 10if(true){var a=20;console.log(a); // output 20}console.log(a); // output 20}(ii) let The let?statement declares a local variable in a block scope. It is similar to?var,?in?that we can optionally initialize the variable.Example: let a =10;The let statement allows you to create a variable with the scope limited to the block on which it is used.Example: function nodeSimplified(){ let a =10; console.log(a); // output 10 if(true){ let a=20; console.log(a); // output 20 } console.log(a); // output 10}Example:function nodeSimplified(){ let a =10; let a =20; //throws syntax error console.log(a); }Error Message:?Uncaught SyntaxError: Identifier 'a' has already been declared.However if we declare the variables with var ,it works fine.(iii) constconst statement values can be assigned once and they cannot be reassigned. The scope of const statement works similar to let statements.The?const?declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can't be re-declared.The following rules hold true for a variable declared using the?const?keyword ?Constants cannot be reassigned a value.A constant cannot be re-declared.A constant requires an initializer. This means constants must be initialized during its declaration.The value assigned to a?const?variable is immutable.Example: const a =10;function nodeSimplified(){ const MY_VARIABLE =10; console.log(MY_VARIABLE); //output 10 }2.10.2. Variable hoisting:The JavaScript engine treats all variable declarations using “var” as if they are declared at the top of a functional scope(if declared inside a function) or global scope(if declared outside of a function) regardless of where the actual declaration occurs. This essentially is “hoisting”.So variables might actually be available before their declaration.JavaScript interpreter looks ahead and “hoists” all variable declarations to the top, and the initialization remains in the same spot.console.log(x) //output undefinedvar x=10;2.11. ES6 Modules:A module is nothing more than a chunk of JavaScript code written in a file. It’s a way to include functionality declared in one file within another. Typically, a developer creates an encapsulated library of code responsible for handling related tasks. That library can be referenced by applications or other modules. The functions or variables in a module are not available for use, unless the module file exports them.The benefits:Code can be split into smaller files of self-contained functionality.The same modules can be shared across any number of applications.Ideally, modules need never be examined by another developer, because they’ve has been proven to work.Code referencing a module understands it’s a dependency. If the module file is changed or moved, the problem is immediately obvious.Module code (usually) helps eradicate naming conflicts. Function x() in module1 cannot clash with function x() in module2. Options such as namespacing are employed so calls become module1.x() and module2.x().Everything inside an ES6 module is private by default, and runs in strict mode. Public variables, functions and classes are exposed using export.Exporting a Module: To make available certain parts of the module, use the export keyword. Following is the syntax to export a module.(i) Export a single value or element - Use export defaultexport default element_name(ii) Export multiple values or elementsexport {element_name1,element_name2,…}Importing a Module : To be able to consume a module, use the import keyword. (i)Import a single value or element import element name from module_name(ii) Import multiple values or elementsimport {element_name1,element_name2,....} from module_nameExample: mylib.jsconst pi=3.14;function calcarea(rad){ return pi *rad * rad;}export {calcarea};myprog.jsimport {calcarea} from './mylib.js';var rad=10;console.log(calcarea(rad));2.12. jQuery2.12.1. Introduction to jQuery:jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.The jQuery library contains the following features:HTML/DOM manipulationCSS manipulationHTML event methodsEffects and animationsAJAXUtilities2.12.2. Adding jQuery to Your Web PagesThere are two ways to use jQuery.Download the jQuery library from Include jQuery from a CDN, like Google(i) Downloading jQueryYou can download jQuery library on your local machine and include it in your HTML code. There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and compressedDevelopment version - this is for testing and development (uncompressed and readable code)Both versions can be downloaded from .The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):<head><script src="jquery-3.3.1.min.js"></script></head> (ii) jQuery CDNYou can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Both Google and Microsoft host jQuery.To use jQuery from Google or Microsoft, use one of the following:Google CDN:<head><script src=""></script></head> Microsoft CDN:<head><script src=""></script></head> 2.12.3. jQuery syntaxWith jQuery you select (query) HTML elements and perform "actions" on them.The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).Basic syntax is: $(selector).action()A $ sign to define/access jQueryA (selector) to "query (or find)" HTML elementsA jQuery action() to be performed on the element(s)Examples:$(this).hide() - hides the current element.$("p").hide() - hides all <p> elements.$(".test").hide() - hides all elements with class="test".$("#test").hide() - hides the element with id="test".jQuery uses CSS syntax to select elements.The Document Ready Event$(document).ready(function(){ // jQuery methods go here...}); This is to prevent any jQuery code from running before the document is finished loading (is ready).It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. Here are some examples of actions that can fail if methods are run before the document is fully loaded:Trying to hide an element that is not created yetTrying to get the size of an image that is not loaded yet$(function(){? // jQuery methods go here...}); Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.2.12.4. jQuery SelectorsjQuery selectors allow you to select and manipulate HTML element(s).jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.All selectors in jQuery start with the dollar sign and parentheses: $().Types of jQuery selectors:- (i) element selector The jQuery element selector selects elements based on the element name. To select all <p> elements on a page :$("p") (ii) #id selector The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.To find an element with a specific id, write a hash character, followed by the id of the HTML element:$("#test") (iii) class selectorThe jQuery .class selector finds elements with a specific class.To find elements with a specific class, write a period character, followed by the name of the class:$(".test") 2.12.4 jQuery EventsAll the different visitors' actions that a web page can respond to are called events.An event represents the precise moment when something happens.Examples:moving a mouse over an elementselecting a radio buttonclicking on an elementThe term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".Here are some common DOM events:Mouse EventsKeyboard EventsForm EventsDocument/Window Eventsclickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave?blurunloadjQuery Syntax For Event MethodsIn jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, you can do this: $("p").click(); The next step is to define what should happen when the event fires. You must pass a function to the event:$("p").click(function(){? // action goes here!!}); jQuery Event MethodsEvent methods trigger or attach a function to an event handler for the selected elements.The following table lists all the jQuery methods used to handle events.Method / PropertyDescriptionblur()Attaches/Triggers the blur eventchange()Attaches/Triggers the change eventclick()Attaches/Triggers the click eventdblclick()Attaches/Triggers the double click eventfocus()Attaches/Triggers the focus eventfocusin()Attaches an event handler to the focusin eventfocusout()Attaches an event handler to the focusout eventhover()Attaches two event handlers to the hover eventkeydown()Attaches/Triggers the keydown eventkeypress()Attaches/Triggers the keypress eventkeyup()Attaches/Triggers the keyup eventlive()Removed in version 1.9. Adds one or more event handlers to current, or future, selected elementsload()Removed in version 3.0. Attaches an event handler to the load eventmousedown()Attaches/Triggers the mousedown eventmouseenter()Attaches/Triggers the mouseenter eventmouseleave()Attaches/Triggers the mouseleave eventmousemove()Attaches/Triggers the mousemove eventmouseout()Attaches/Triggers the mouseout eventmouseover()Attaches/Triggers the mouseover eventmouseup()Attaches/Triggers the mouseup eventoff()Removes event handlers attached with the on() methodon()Attaches event handlers to elementsone()Adds one or more event handlers to selected elements. This handler can only be triggered once per elementready()Specifies a function to execute when the DOM is fully loadedresize()Attaches/Triggers the resize eventscroll()Attaches/Triggers the scroll eventselect()Attaches/Triggers the select eventsubmit()Attaches/Triggers the submit eventunload()Removed in version 3.0. Attaches an event handler to the unload event ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download