jQuery for Designers : Beginners Guide

398 Pages·2014·7.462 MB·English

by  Natalie MacLees

jQuery for Designers
Beginner's Guide
Second Edition
Design interactive websites to improve user experience
by using the popular JavaScript library
Natalie MacLees
BIRMINGHAM - MUMBAI
jQuery for Designers Beginner's Guide
Second Edition
Copyright © 2014 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its
dealers and distributors will be held liable for any damages caused or alleged to be
caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2012
Second edition: July 2014
Production reference: 1220714
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78328-453-5
www.packtpub.com
Cover image by Suresh Mogre ([email protected])
Credits
Author Project Coordinators
Natalie MacLees Priyanka Goel
Danuta Jones
Reviewers
Olivier Pons
Proofreaders
M. Ali Qureshi Simran Bhogal
Dan Wellman Maria Gould
Ameesha Green
Acquisition Editor
Vinay Argekar
Indexers
Hemangini Bari
Content Development Editor
Mehreen Deshmukh
Neeshma Ramakrishnan
Rekha Nair
Tejal Soni
Technical Editors
Priya Subramani
Pramod Kumavat
Pooja Nair
Graphics
Mukul Pawar
Valentina D'silva
Copy Editors
Production Coordinators
Janbal Dharmaraj
Pooja Chiplunkar
Deepa Nambiar
Manu Joseph
Alfida Paiva
Cover Work
Pooja Chiplunkar
About the Author
Natalie MacLees is a frontend web developer and UI designer, and the founder and
principal of the interactive agency Purple Pen Productions. She founded and runs the jQuery
LA users' group and together with Noel Saw, she heads the Southern California WordPress
user's group, organizing WordPress meetups, help sessions, and workshops. She was the lead
organizer for WordCamp Los Angeles 2013 and 2014 and organized the first annual Website
Weekend LA. She's also the founder of the Los Angeles chapter of Girl Develop It, bringing
affordable and accessible coding classes to the community.
She makes periodic appearances on the WPwatercooler podcast and co-hosts the WP Unicorn
Project podcast with Suzette Franck. She makes her online home at nataliemac.com.
Her obsession with the Web began when she bought her first computer in 1996 and promptly
used it to build her first website. She spends the few moments she manages to be offline each
day watching baseball, crafting, reading, baking, belly dancing, collecting Hello Kitty items,
and avoiding avocados and olives at all costs.
Acknowledgments
Gracious thanks first and foremost to John Resig and the rest of the jQuery team for creating
and sharing such a useful and elegant library with the rest of us.
A big thank you to Marlene Angel, Ninno DePatrick, Ed Doolittle, Crystal Ehrlich, Suzette Franck,
Teresina Goheen, LeHang Huynh, Michelle Kempner, Mark Tapio Kines, Chloë Nguyễn, Mario
Noble, Joss Rogers, Noel Saw, Kimberly Wilkinson, and Tammy Wilson for their support, advice,
and cheerleading—I couldn't ask for better friends.
Thank you to Beebe Lee and Brittany Brooks, my Purple Pen support team.
Thank you to my sisters, Stefanie Elder and Bethany MacLees, for being properly impressed
that somebody wanted me to write a book. Thank you to my mom, Patricia Demby, and
stepfather, John Demby, for being proud of me no matter what.
Thank you to all members of our local WordPress and jQuery communities including Dre
Armeda, Lucy Beer, Andrew Behla, Glenn Bennett, Stephen Carnam, Jason Cosper, Ryan
Cowles, Joe Chellman, Gregory Dahl, Greg Douglas, Brandon Dove, Chris Ford, Gregg Franklin,
Megan Gray, Lane Halley, John Hawkins, Susie Karasic, Chris Lema, Paul Lumsdaine, Kari Leigh
Marucchi, Karim Marucchi, Karen McCamy, Andrei Mignea, Troy Miles, Konstantin Obenland,
Joseph Karr O'Connor, David Oshima, Sé Reed, Andy Roberts, Mike Schroder, Adam Silver,
Verious Smith, Jason Tucker, Nathan Tyler, Alex Vasquez, Sarah Wefald, Steve Zehngut, Jeffery
Zinn, and too many others to count or mention.
And finally, thank you to Diane Colella Jones for believing in me, even before I did.
About the Reviewers
Olivier Pons is a developer who's been building websites since 1997. He's a teacher
at IngeSup (École Supérieure d'Ingénierie Informatique; for more information visit
http://www.ingesup.com/ and http://www.y-nov.com), at the University
of Sciences (IUT) in Aix-en-Provence/France, and École d'Ingénieurs des Mines de
Gardanne, where he teaches HTML, CSS, jQuery/jQuery Mobile, PHP, MVC fundamentals,
WordPress, Symfony, Linux basics, and advanced VIM techniques. He has already done
some technical reviews, including the books Ext JS 4 First Look, Packt Publishing and
jQuery Mobile Web Development Essentials Second Edition, Packt Publishing, among others.
In 2011, he left a full-time job as a Delphi and PHP developer to concentrate on his own
company, HQF Development (http://hqf.fr). He currently runs a number of websites,
including http://www.benativo.fr, http://www.inesushi.com, http://www.
papdevis.fr, and http://olivierpons.fr, his own web development blog. He works
as a consultant, teacher, project manager, and sometimes a developer.
M. Ali Qureshi, who is a web developer based in Lahore, Pakistan, has been involved
in web development in 2001. Having worked in a number of companies in different
capacities, he is aware of how project goals are achieved efficiently. Ali founded PI Media
(http://parorrey.com) in 2002 and has developed creative, interactive, and usable web
solutions, making them a successful technology investment for clients. He has also worked
on a number of successful products and authored WordPress plugins and themes and
osCommerce and PrestaShop add-ons.
Apart from PI Media, Ali currently works as a software architect for E2ESP (http://e2esp.
com)and ConvoSpark (http://convospark.com). He regularly makes contributions to the
latest tips and trends in web design, PHP, WordPress and CMS development, Flash ActionScript,
and Facebook App Development on his blog http://parorrey.com/blog/.
Ali has previously reviewed jQuery Mobile Web Development Essentials, Packt Publishing.
When not working, he spends his time blogging and exploring new technologies. He is an avid
sports fan and especially likes watching cricket. Pakistan and Australia are his favorite teams.
Dan Wellman is an author and software engineer based in the south coast of the UK.
By day, he works for the Skype division at Microsoft bringing web-based audio and video
calling to the world. By night, he writes books and tutorials for many online digital media
outlets including Nettuts, Infinite Skills, and many others. He has written seven books
so far, mostly centered on jQuery and jQuery UI.
www.PacktPub.com
Support files, eBooks, discount offers, and more
You might want to visit www.PacktPub.com for support files and downloads related to
your book.
Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at www.PacktPub.com and
as a print book customer, you are entitled to a discount on the eBook copy. Get in touch
with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters and receive exclusive discounts and offers on Packt books
and eBooks.
TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why subscribe?
‹ Fully searchable across every book published by Packt
‹ Copy and paste, print and bookmark content
‹ On demand and accessible via web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents
Preface 1
Chapter 1: Designer, Meet jQuery 7
What is jQuery? 7
Why is jQuery awesome for designers? 8
It uses CSS selectors you already know 8
It uses HTML markup you already know 8
Impressive effects in just a few lines of code 9
Huge plugin library available 9
Great community support 10
JavaScript basics 10
Progressive enhancement and graceful degradation 10
Gotta keep 'em separated 11
Content 11
Presentation 11
Behavior 11
Designer, Meet JavaScript 12
Variables 12
Objects 12
Functions 14
Downloading jQuery and getting set up 15
Time for action – downloading and attaching jQuery 15
Another option for using jQuery 19
Your first jQuery script 20
Time for action – getting ready for jQuery 20
Adding a paragraph 21
Time for action – adding a new paragraph 22
Summary 23