- Accidental Creative
- Adapting to Web Standards: CSS and Ajax for Big Sites
- Art of Non-Conformity
- Art of Readable Code
- Back to the User: Creating User-Focused Web Sites
- Beginning PHP6, Apache, MySQL Web Development
- Books to Read
- Bored and Brilliant
- Born For This
- Complete E-Commerce Book
- Content Inc
- Core PHP Programming
- CSS3: Pushing the Limits
- Dealing with Difficult People
- Defensive Design for the Web
- Deliver First Class Web sites
- Design for Hackers: Reverse-Engineering Beauty
- Designing Web Interfaces
- Designing Web sites that Work: Usability for the Web
- Designing with Progressive Enhancement
- Developing Large Web Applications
- Eat That Frog
- Economics of Software Quality
- Elements of User Experience
- Epic Content Marketing
- Extending Bootstrap
- Flexible Web Design
- Flexible Web Layouts
- Happiness At Work
- Inmates Are Running the Asylum
- jQuery Pocket Reference
- Letting Go of the Words
- Making Every Meeting Matter
- Manage Your Day to Day
- Marketing to Millenials
- Monster Loyalty
- More Eric Meye on CSS
- Official Ubuntu Book
- Organized Home
- Perennial Seller
- PHP In a NutShell
- PHP Refactoring
- PHP5 CMS Framework Development
- PHP6 and MySQL Bible
- Privacy Policy
- Responsive Web Design
- Responsive Web Design with HTML and CSS3
- Rules of Thumb
- Saleable Software
- Securing PHP Web Applications
- Simple and Usable Web, Mobile and Interaction Design
- Smart Organizing
- Submit Now: Designing Persuasive Web sites
- The Life-changing Magic of Tidying up
- This Is Marketing
- UI and UX and Design
- Web site Usability
- Web Site Usability: A Designer's Guide
- Web Word Wizardy
- Well Designed
- Work for Money, Design for Love
- Blogs
- Checklists I Have Collected or Created
- Crafts To Do
- Database and Data Relations Checklist
- Ecommerce Website Checklist
- My Front End UI Checklist
- New Client Needs Analysis
- Newsletters I Read
- Puzzles
- Style Guides
- User Review Questions
- Web Designer's SEO Checklist
- Web site Review
- Website Code Checklist
- Website Final Approval Form
- Writing Content For Your Website
- Writing Styleguide
- Writing Tips
- Complete Book of Potatoes
- Creating Custom Soil Mixes for Healthy, Happy Plants
- Edible Forest Garden
- Garden Design
- Gardening Tips and Tricks
- Gardens and History
- Herbs
- Houseplants
- Light Candle Levels
- My Garden
- My Garden To Plant
- Organic Fertilizers
- Organic Gardening in Alberta
- Plant Nurseries
- Plant Suggestions
- Planting Tips and Ideas
- Root Cellaring
- Things I Planted in My Yard
- Way We Garden Now
- 101 Organic Gardening Hacks
- Beautiful No-Mow Lawns
- Beginner's Guide to Heirloom Vegetables
- Best of Lois Hole
- Eradicate Invasive Plants
- Gardening Books to Read
- Gardens West
- Grow Organic
- Grow Your own Herbs
- Guerilla Gardening
- Heirloom Life Gardener
- Indoor Gardening: The Organic Way
- Real Gardens Grow Natives
- Seed Underground
- Small plot, high yield gardening
- Thrifty Gardening from the Ground Up
- Vegetables
- Veggie Garden Remix
- Weeds
- What Grows Here
- Activities for Kids
- Baking & Cooking Tips
- Bertrand Russell
- Can I Get that on Sale?
- Cleaning Tips and Tricks
- Colour Palettes I Like
- Compound Time
- Cooking Tips
- Crafts
- Crafts for Kids
- Household Tips
- Inspiration
- Interesting
- Interior Design
- Latin Phrases
- Laundry Tips
- Learn Something New
- Links, Information, and Cool Videos - Stuff for My Kids
- My Miscellany
- Organizing
- Quotes
- Reading List
- Renovations
- Silly Sites
- Things that Make Me Laugh
- Videos to Watch
- YouTube Hacks
- Accessibility
- CSS Frameworks
- CSS Reading List
- CSS Sticky Footer
- htaccess files
- HTML Tips and Tricks
- Javascript (and jQuery)
- Landing Page Tips
- Making Better Websites
- More Information on CSS
- MySQL and Databases
- Navigation
- Responsive Design
- Robots.txt File
- Security and Secure Websites
- SVG Images
- Web Design and Development
- Web Design Tools
- Web Error Codes
- Website Testing Checklist
- Writing for the Web
- Writing Ideas for your website
- Animations and Interactions
- Being a Better Designer
- Bootstrap Resources
- Color in Web Design
- Colour
- CSS Preprocessors: Sass and Less
- CSS Tips Tricks
- Design Systems
- Designing User Interfaces
- Font & Typographical Inspiration
- Fonts, Typography, Letters & Symbols
- Icons
- Logo Designs
- Photoshop Tips and Tricks
- Sketch
- UX and UI and Design Reading List
- Web Forms
$("
", {
src: image_url, alt: image_description, className: "translucent_image", click: function() { $(this).css("opacity", "50%"); } });
// Shrink the height of all images to 0
$("img").animate({ height: 0 });
$("#sprite").animate({ opacity: .25, // Animate opacity to .25 font-size: 10 // Animate font size to 10 pixels }, { duration: 500, // Animation lasts 1/2 second complete: function() { // Call this when done this.text("Goodbye"); // Change element text. } });
$("p").animate({ "margin-left": "+=.5in", // Increase indent opacity: "-=.1" // And decrease opacity });
// Hide images, as with the hide() method, but animate // the image size linearly while the opacity is being // animated with the default "swing" easing function. // Use the specialEasing option $("img").animate({ width:"hide", height:"hide", opacity:"hide" },{ specialEasing: { width: "linear", height: "linear" } }); // Or pass [target value, easing function] arrays $("img").animate({ width: ["hide", "linear"], height: ["hide", "linear"], opacity:"hide" });
jQuery Selector Filters & Their Meanings
* | $("*") | All elements |
.class | $(".intro") | All elements with class="intro" |
element | $("p") | All
elements |
:last | $("p:last") | The last
element |
:odd | $("tr:odd") | All oddelements |
:first-child | $("p:first-child") | All
elements that are the first child of their parent |
:last-child | $("p:last-child") | All
elements that are the last child of their parent |
:nth-child(n) | $("p:nth-child(2)") | All
elements that are the 2nd child of their parent |
:nth-of-type(n) | $("p:nth-of-type(2)") | All
elements that are the 2nd element of their parent |
:only-child | $("p:only-child") | All
elements that are the only child of their parent |
parent descendant | $("div p") | All
elements that are descendants of a element
|
element ~ siblings | $("div ~ p") | All
elements that are siblings of a element
|
:eq(index) | $("ul li:eq(3)") | The fourth element in a list (index starts at 0) |
:lt(no) | $("ul li:lt(3)") | List elements with an index less than 3 |
:animated | $(":animated") | All animated elements |
:contains(text) | $(":contains('Hello')") | All elements which contains the text "Hello" |
:empty | $(":empty") | All elements that are empty |
:hidden | $("p:hidden") | All hidden
elements |
:root | $(":root") | The document's root element |
[attribute=value] | $("[href='default.htm']") | All elements with a href attribute value equal to "default.htm" |
[attribute$=value] | $("[href$='.jpg']") | All elements with a href attribute value ending with ".jpg" |
[attribute^=value] | $("[title^='Tom']") | All elements with a title attribute value starting with "Tom" |
[attribute*=value] | $("[title*='hello']") | All elements with a title attribute value containing the word "hello" |
:input | $(":input") | All input elements |
:password | $(":password") | All input elements with type="password" |
:checkbox | $(":checkbox") | All input elements with type="checkbox" |
:reset | $(":reset") | All input elements with type="reset" |
:image | $(":image") | All input elements with type="image" |
:enabled | $(":enabled") | All enabled input elements |
:selected | $(":selected") | All selected input elements |
Here are some example selector combinations:
"blockquote i" // Matches within a
"ol > li" //li as a direct child of ol
"#output + *" // The sibling after the #output
"div.note > h1 + p" //
after
inside a div.note
Note that selector combinations are not limited to combinations of two selectors: three or more selectors are allowed, too.
Selector Grammar
The jQuery selector grammar is very similar to that of CSS3, and it is explained in detail in “jQuery Selectors” on page 89.
The following is a summary:
Simple tag, class, and id selectors
* tagname .classname #id
Selector combinations
A B B as a descendant of A
A > B B as a child of A
A + B B as a sibling following A
A ~ B B as a sibling of A
Bibliographical Information
jQuery Pocket Reference
By: David Flanagan
Publisher: O'Reilly Media, Inc.
Pub. Date: December 28, 2010
Print ISBN-13: 978-1-4493-9722-7
These are notes I made after reading this book. See more book notes
Just to let you know, this page was last updated Friday, Mar 05 21