View the S5 presentation: http://www.ViethFamily.com/jQuery
There is absolutely no room in the jQuery session at #heweb09 – we started early because no one else could fit. Overall it’s been quietly exciting – lots of demos, a great introduction – I’d like to hear about the pros, cons vs flash and also some live examples (i.e. a school website)
BTW Our new homepage (launched last week) uses jQuery for its animations: http://www.ivey.uwo.ca
Presentation Notes:
- Goal of jQuery is to make it easier to write Javascript that is compatible with all web browsers
- Works with all modern browsers
- Adds to and improves Javascript
- Developer works for Firefox
- Leverages knowledge of CSS
- Statement chaining
- Makes it easy to work with a collection of elements
- Extensible with an enormous library of third-party plugins
- Extremely well tested and reliable
- Popular with a large community of users
Primary Features
- Selection and traversal
- Manipulation and CSS
- Events (simplifying response to modern DOM events)
- Effects (hide, show, transitions)
- AJAX (loading content from other pages/apps, dealing with JSON data)
- User Interface plugin adds slider controls, progress bars, accordions, etc – out of the box
- Extensibility (third party developers can create their own plug-ins)
Installation
- Download from jQuery.com
- Call external library from your webpages
- Use it
document.ready function
Anything inside this function will happen when the DOM is ready – sooner than onload – therefore working sooner but not too soon.
Allows unlimited functions to run when the document is ready – onload only calls one function.
Can be used multiple times and all code is chained together and run when DOM is ready. Can be abbreviated
What is the dollar sign?
An alias to the word jQuery – main jQuery function – just makes your code shorter
Demo: Selecting, Changing CSS
Selection of paragraphs; Change the value of a css property
Change the colour of two paragraphs with just one line of code. Find all the paragraphs with the class changeme and change background colour (chaining).
Selectors and filters
Selection returns a collection of jQuery objects representing the DOM elements that were selected
You can select by XHTML tag (div), by CSS ID (#myid), by CSS class (.myclass) or by both tag and class (div.MyClass)
$(“div.MyClass”) replaces document.getElementsbytagname (“div”) followed by code to loop through all the results and check their class.
Examples of selectors
Simple, Or, And, Children, Subelements, adjacent, follower – syntax is very css like.
| Type | Example |
|---|---|
| SIMPLE | $(“#MainDiv”) |
| OR | $(“p, ul”) |
| AND | $(“.ClassA.ClassB”) |
| CHILDREN | $(“#MainDiv > p”) |
| SUBELEMENTS | $(“#MainDiv a”) |
| ADJACENT | $(“.NoMargins + p”) |
| FOLLOWER | $(“p.FirstParagraph ~ p) |
Examples of filters
Basic like $(“h2:first”) or $(“table.mytable > tr:even”)
Content filters $(“p:containts(pancake)”)
Documentation on Selectors & Filters: http://docs.jquery.com/Selectors
Demo: Prepend, change and append content
| Function | What It Does |
|---|---|
| html() | Gets or sets the HTML content of matched elements |
| text() | Gets or sets the text content of matched elements |
| attr() | Gets or sets an attribute of matched elements |
| empty() | Removes all child nodes from matched elements |
| remove() | Removes matched elements and any nodes inside those elements |
| clone() | Makes a copy of selected elements that can then be inserted into the DOM elsewhwere |
| append() | Appends content to the inside of matched elements |
| appendTo() | Removes matched elements and appends them to inside of specified target |
| prepend() | Prepends content to the inside of matched elements |
| prependTo() | Removes matched elements and prepends them to inside of specified target |
| Function | What It Does |
|---|---|
| after() | Inserts content after each of the matched elements |
| before() | Inserts content before each of the matched elements |
| insertAfter() | Removes matched elements and inserts them after each of the specified elements |
| insertBefore() | Removes matched elements and inserts them before each of the specified elements |
Demo: Event Handlers (Click, Hover)
Animation & Effects
- Hide
- Show
- Toggle
- Slide
- Fade
- Set speed, provide custom animation function that combines animations
JGFeed – htt://plugins.jquery.com/project/jgfeed – brings in any RSS feed and parses/displays anyway you want to!
Presenter’s Favorite jQuery Plug-ins
- Cycle – http://malsup.com/jquery/cycle/
- jGFeed – http://plugins.jquery.com/project/jgfeed
- Validation – http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- URL Parser – http://projects.allmarkedup.com/jquery_url_parser/
- Cookie – http://plugins.jquery.com/project/cookie
http://www.uwplatt.edu/disted/redesign – slideshow! displaying RSS feeds!
form validation demo: http://www.uwplatt.edu/disted/redesign/update-contact-information.html
Using jQuery for UWP DLC redesign
- Slide show on home page (demo | info)
- Displaying external RSS feeds (demo | info)
- Form validation (demo | info)
- Including content from other pages (demo | info)
- Show/hide FAQ (demo | info)
Not rocket science but saves you a lot of work and does it in a very reliable way.