WIXLIB

Backreferencesvar str 'The quick brown fox jumps over the lazy dog.';console.log(str.replace(/r(.)/g, ' 1x'));// The quick boxwn fox jumps ove xthe lazy dog.

ReplacementFunctionsvar str 'Kill 5 9 birds with 2 5 stones.';function add(match, first, second) {return parseInt(first, 10) parseInt(second, 10);}str str.replace(/([0-9] )\ ([0-9] )/g, add);console.log(str);// Kill 14 birds with 7 stones.

ExercisesWrite a function that uppercases all the vowels ina string.Write a function that strips the angle bracketsfrom around any HTML tags in a string.

Greediness Repeat operators usually match as much of the string aspossible; they are greedyJavaScript supports reluctant repetition as well Append ? to the repeat operator

And Much More JavaScript supports most Perl regular expressionextensions POSIX character classesUnicode character escapesLook-ahead assertions

Math Object Not a constructor, a singleton Gathers useful methods and properties Math.PIMath.abs(), Math.sin(), Math.pow(),Math.random(),Math.max(), Math.min()Math.round(), Math.floor(), Math.ceil()

CSS Tip Object literal notation looks a lot like CSS style rulenotation!CSS:h3 {font-size: 1.2em;line-height: 1;}JS:var h3 {fontSize: '1.2em','line-height': 1};

Object Literals person is the objectfirstName and lastName are propertieshello is a method (a property that is a function)var person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;}};

Object Literals interests is a property and an objectvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;},interests: {athletic: ['racquetball', 'karate', 'running'],musical: ['rock', 'folk', 'jazz', 'classical']}};

Object Literalsvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;} // notice, no comma here!};

Object Literals“dot” notationvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;}};// "dot" notationperson.firstName; // 'Karl'person.lastName; // 'Swedberg'person.hello() // 'Hello, my name is Karl Swedberg'

Object Literalsarray notationvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;}};// array notationperson['firstName']; // 'Karl'person['lastName']; // 'Swedberg'person['hello']() // 'Hello, my name is Karl Swedberg'

Object Literalsvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;},interests: {athletic: ['racquetball', 'karate', 'running'],musical: ['rock', 'folk', 'jazz', 'classical']}};// person['interests']['musical'][1] ?// person.interests.musical[1]

Object Literalsvar person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;}};person.firstName 'Karl';var prop 'firstName';person[ prop ]; // 'Karl'prop 'lastName';person[ prop ]; // 'Swedberg'

Object Literalsvar blah;var person {firstName: 'Karl',lastName: 'Swedberg',hello: function() {return 'Hello, my name is ' this.firstName ' ' this.lastName;}};for (var el in person) {blah typeof person[el] 'function' ?person[el]() :person[el];console.log( blah );}

Object Literals Great as function argumentssingle argument allows flexibility when calling the functiondoSomething({speed: 'fast',height: 500,width: 200,somethingElse: 'yes'});doSomething({width: 300});

JSONJavaScript Object Notation a data interchange format. In other words, a format forpassing data back and forth“discovered” and popularized by Douglas Crockforda subset of JavaScript Object Literal Notation a tree-like structure of object(s) and/or array(s)no functionsall strings, including object keys, take double quotes

JSON{"firstName": "Karl","lastName": "Swedberg","age": 24,"interests": {"athletic": ["racquetball","karate"]}}

e"]}}

Referencing Scriptsin the HTMLbrowser slides

Selectors &Traversal

At the heart ofjQuery.Find somethingDo something

CSS Selectors element {}#id {}.class {}selector1, selector2 {}ancestor descendant {}parent child {}:nth-child() {}

CSS Selectors(jQuery Equivalents) ('element') ('#id') ('.class') ('selector1, selector2') ('ancestor descendant') ('parent child') (':nth-child(n)')

CSS Selectors(jQuery Equivalents) ('element') ('#id') ('.class') ('selector1, selector2') ('ancestor descendant') ('parent child') (':nth-child(n)') and others ('prev selector') ('prevAll selector') (':nthchild(an b') (':not(selector)') (':checked') (':disabled')

CSS AttributeSelectors ('input[name firstname\\[\\]]') ('[title]')has the attribute ('[attr "val"]')attr equals val ('[attr! "val"]')attr does not equal val ('[attr "val"]')valsattr has val as one of space-sep. ('[attr "val"]')attr begins with val ('[attr "val"]')attr ends with val ('[attr* "val"]')attr has val anywhere within

Custom FormSelectors ('div.myclass :checkbox') (':input') button input , textarea , select , (':text') input type "text" (':radio') input type "radio" (':button') input type "button" , button (':selected') option selected "selected" etc.

Custom Misc.Selectors (':animated') (':has(descendant)') (':eq(n)') (':lt(n)') (':gt(n)') (':even') (':odd') (':visible') (':hidden') (':header') (':contains(string)')

Selectors List of all selectors on the jQuery API sitehttp://api.jquery.com/category/selectors

Traversal Methods Move UpMove SidewaysMove DownFilterContextCheck

Move Upparent() : up one level ('li.bottom').parent();parents() : up multiple levels ('span').parents('ul');parentsUntil() : possibly multiple ul ('span').parentsUntil('ul'); li level 1 ul class "foo" ul 3 /li li level 2 li class "bottom" span level /span /ul /li /ul /li /ul

Move Up .closest(selector) : up 0 or more levels ('span').closest('ul'); ('.bottom').closest('li'); ul li level 1 ul li level 2 li class "bottom" span level /span 3 /li /ul /li /ul /li /ul ul

Move Sideways evAll().prevUntil()

Move Down .children().find()

Filter .filter(selector) .filter('.some-class').filter(function) .filter(function() {return (this).parents('li').length 2; });

Filter .not(selector) .not('.some-class').not(function) .not(function() {return (this).parents('li').length 2; });

Filter .slice() .slice(2).slice(-2).slice(3, 6).slice(2, -1).eq() .eq(2).eq(-2)

Context ('selector', 'context') Different from "or" selector – ('selector1, selector2')Same as ('context').find('selector')Not worth using; too confusing.add().andSelf().end()

Check .hasClass(class).is(selector)** returns a boolean

Traversal Methods List of all traversal methods on the jQuery API sitehttp://api.jquery.com/category/traversing

Chaining JavaScript has chaining built in. 'swap this text'.replace(/w/, -').join('.');jQuery takes advantage of this concept by having almostall methods return the jQuery object.

Chaining Chain traversal methods together ('a').parent('li').siblings().find('a')

Chaining Attach multiple behaviors. ('a').removeClass('old').addClass('new');

Chaining DOM Traversal methods are different from other jQuerychaining methods! New jQuery instance is created with each one. o')

Chaining JavaScript ignores white space, so use it to your advantage.var lis ('.container ).end(); // unnecessary; added for symmetry

Looping Implicit IterationExplicit Iteration (Looping) ('li').removeClass('myclass');//implicit ('li').each(function(index) {//explicit (this).append( ' #' (index 1) );});

this Keyword Refers to the current objectjQuery sets this to matched elements in the jQuery object. ('li').each(function() {console.log( this ); // DOM elementconsole.log( (this) );});

Tips Store selectors used more than once in variablesUse length property to check existence .but often no need for the checkvar listItems ('li');var numItems listItems.length//no need for length check listItems.addClass('pretty');if (numItems) {// do something with other elements}

Tips Concatenate to pass in a variable ('#menu li').each(function(index) { (this).click(function() { ('#footer li:eq(' index ')').addClass('active');});});

Tips Avoid jQuery's custom selectors when possible// bad (':checkbox')// better ('input:checkbox')// best ('input[type "checkbox"]')

Tips Avoid jQuery's custom selectors when possible// uncool ('div:first')// cool ('div').first();

Tips Avoid jQuery's custom selectors when possible// slower ('li:eq(3)') ('li:lt(3)')// faster ('li').eq(3) ('li').slice(0, 3)

Event Handling

Loading Events (document).ready();.load() Typically used with (window)Also helpful with images, but be careful!

Multiple “Ready”Handlers All are executedExecution takes place in order definedCan even be defined after the document is ready!

Low-level methods.bind() add an event listener to elementscan be a native event like "click"can be a custom event, triggered by other code ('button').bind('click', function(event) {// button got clicked});

Method Context The “this” keywordDOM Elements vs. jQuery Objects ('button').bind('click', function(event) {// this is the button DOM element// this.className ' clicked';// (this) returns jQuery object w/ 1 element// (this).addClass('clicked');});

Low-level methods.trigger() Trigger events programmaticallyWorks for native and custom events ('button').trigger('click');

Low-level methods.bind() and .trigger()// this listens for a click on a span ('span').bind('click', function() {/* this stuff happens when a span is clicked */});// maybe the user will click on a span. Or.// this triggers any click event bound to a span ('span').trigger('click');

Low-level methods.unbind() remove an event listener from elementsremove all listeners, or just the specified one ('button').bind('click', clickListener).bind('click', otherListener);// unbind all click listeners ('button').unbind('click');// unbind only the specified listener ('button').unbind('click', clickListener);

Shorthand Syntax ('button').click(clickListener);// ('button').bind('click', clickListener); ('button').click();// ('button').trigger('click');

Shorthand Syntax ut() .mouseover().mouseout().mouseenter() ve().dblclick() .scroll().resize().error()

Event Propagationa.k.a. “event bubbling”http://www.quirksmode.org/js/events order.html

Event Propagationa.k.a. “event bubbling”http://www.quirksmode.org/js/events order.html

Two Event Tutorials How to ensure that new elements added to the DOM haveevents bound to them. by using event delegation:Working with Events, part 1 ( tinyurl.com/eventdelegation )by re-binding:Working with Events, part 2 ( tinyurl.com/eventrebinding )

Event Propagation Sometimes we don't want events to bubble. Responding to hovers on menus(which, maybe, we shouldn't do anyway)mouseover vs. mouseenter demo

Event delegation alternative event handling architecture scales much bettermakes it trivial to add and remove elementsuses event.target rather than this*(but jQuery's delegation methods map this to event.target)don't ask every element for events, ask a parent insteadeffort is moved from binding to handling

Event Delegation .live() binds an event handler to the document.triggered when element acted upon or one of its ancestorsmatches selector.die() unbinds an event handler

Event Delegation .live() and .die() look just like .bind() and .unbind() ('button').live('click', function(event) {// button got clicked});// unbind click on button ('button').die('click');

Event Delegation Stop using .live() and .die() They are deprecated as of jQuery 1.7They don't work as expected in some situations: ('#wrapper').find('a, span').live('click', fn);They require events to bubble all the way up todocument.But, if you're using them successfully with olderjQuery versions, no worries!

Event Delegation .delegate() binds an event handler to jQuery set.triggered when element indicated in first argument isacted upon or one of its ancestors matches the firstargumentmore "optimized" delegation.undelegate() unbinds an event handler

Event Delegation ('#wrapper').delegate('button', 'click',function(event) {// button got clicked});// unbind click on button ('#wrapper').undelegate('button', 'click');

Event Delegation Use .delegate() and .undelegate() for event delegation injQuery before 1.7.

Event Delegation .on() new in jQuery 1.7the future of jQuery event handlingone event handler method to rule them alluse instead of .bind() and .live() and .delegate().off() unbinds event handlers bound by .on()

Direct Event Binding ('button').on('click', clickListener).on('click', otherListener);;// remove all click listeners ('button').off('click');// remove only the specified listener ('button').off('click', clickListener);

Event Delegation ('#wrapper').on('click', 'button',function(event) {// button got clicked});// remove click listeners ('#wrapper').off('click', 'button');

event object normalized by jQuery to provide consistent informationacross browsersevent.target to access the element that triggered the eventevent.pageX/Y for mouse positionevent.preventDefault() to prevent an event's default actionevent.stopPropagation() to prevent an event from bubblingevent.which to identify which key is pressedmore event properties ct/

event object example prevent the default action from occurringstop the event's propagation up the DOM ('a.toggler').on('click', function(event) {event.preventDefault();event.stopPropagation(); (this).parent().next().slideToggle();// or, return false to both// preventDefault and stopPropagation// (but problematic)});

event object example identify the type of event being triggered ('button').on('mouseenter mouseleave', function(event) {var isEntered event.type 'mouseenter'; ('#something').toggleClass('active-related', isEntered);if (isEntered) {// do one thing} else {// do another}});

event object Very useful for key events event.which : key code normalized by jQueryevent.metaKey : command / on Mac, control on Winevent.altKey : alt / option / on Macevent.ctrlKey : control key everywhereevent.shiftKeykey event demo

event object access newer event types through the original eventif (document.createTouch) { ('body').bind('touchstart touchmove touchend', function(event) {// use the original event:event event.originalEvent;}// pass the first touch object as a second argumentvar touch event.targetTouches[0];sideSwipe[ event.type ](event, touch);});

what? sideSwipe[ event.type ](event, touch);// declare some variables up here (startcoords, endcoords, etc.)var sideSwipe {touchstart: function(event, firstTouch) {startcoords {x: firstTouch.pageX, y: firstTouch.pageY};},touchmove: function(event, firstTouch) {if (event.targetTouches.length 1) {event.preventDefault();endcoords {x: firstTouch.pageX, y: firstTouch.pageY};} else {endcoords startcoords;}},touchend: function(event) {// direction of horizontal swipe?// also, far enough horiz, not too far vert.?// if so, do something}};

what? sideSwipe[ event.type ](event, touch);var sideSwipe {touchstart: function(event, firstTouch) { },touchmove: function(event, firstTouch) { },touchend: function(event) { }};// if event.type equals 'touchstart', then:/*sideSwipe.touchstart() sideSwipe['touchstart']()sideSwipe['touchstart']() sideSwipe[event.type]()*/

Wait! There must be a better way.First argument for .on() and .bind() can accept a map of eventtypes and their handler functionsvar myEvents {focus: function() {alert('focused!');},blur: function() {alert('blurry!');}}; ('input').on( myEvents );

event mapvar sideSwipe {'touchstart touchmove': function(event) {event event.originalEvent;var firstTouch event.targetTouches[0];if (even

Aug 12, 2000 · Jquery Tutorial. Outline . Used by plugins to keep jQuery safe. ('p').slideDown('slow', function() {// code in here is not executed // until after the slideDown is finished // jQuery calls the