jQuery for Advanced Front-End Development

jQuery is the most popular JavaScript library used today, and it’s easy to see why: jQuery makes your JavaScript programming tasks easier, by making it easier to select elements, navigate the DOM, create animations, add and remove style from your page, handle events, and create Ajax applications. With the jQuery UI library, you can build interactive web pages with pre-built widgets and interactions that save you hours of coding time.

In this course, you will learn the fundamentals of jQuery and jQuery UI. You’ll build on your existing JavaScript knowledge and see how jQuery makes creating web applications easier and faster. Upon completion of this course, you will be able to:

  • Select, filter, and style elements.
  • Use jQuery’s event-handling structure.
  • Apply effects in your page.
  • Make use of the jQuery UI library’s extensive widget and interaction collection.
  • Use utilities like jQuery Ajax methods.

Throughout the course, you’ll learn by building real projects.  These projects, as well as the final project, will add to your portfolio.  Besides a browser and internet connection, all software is provided online by the O’Reilly School of Technology.

Prerequisites: Introduction to HTML and CSS or equivalent skills, Modern JavaScript: an Introduction and JavaScript: AJAX & JSON or equivalent skills. This course is meant for the intermediate programmer with prior JavaScript programming experience, and a foundation in the language.

90 Clock-hours

$448.00 (plus fees)

Enroll in Course

Course Details and Syllabus

Course: jQuery for Advanced Front-End Development
Tuition: $448.00 (plus fees)
Time Frame: This course is online and self-paced. You can expect to work approximately 90 hours on this course.
Technical Requirements: As long as you have a web browser and internet connection, you can take this course from anywhere.
Software: The Ellipse Learning Sandbox provided for you will contain all your lessons, projects, quizzes, account files, editors, and compiling tools necessary to build your skills from beginning to end, even beyond coursework. No other software is needed.
Instructor: You will have one instructor throughout the course who will evaluate your projects and quizzes, hand them back for improvement when necessary, and coach you throughout your skills advancement.
Book: All required course materials and software are included online within the Learning Sandbox. However, within a few weeks of enrolling, you’ll receive the e-book JavaScript & jQuery: The Missing Manual, Second Edition as a reference resource from O’Reilly.javascriptbook
Certificates: This course is not included in a Certificate series at this time.
Prerequisites: Introduction to HTML and CSS or equivalent skills, Modern JavaScript: an Introduction and JavaScript: AJAX & JSON or equivalent skills. This course is meant for the intermediate programmer with prior JavaScript programming experience, and a foundation in the language.
Topics: Elements, Event Handling, Widgets, Utilites and more.
Syllabus:
  • jQuery for Advanced Front-End Development Lesson 1 — O’Reilly School of Technology, CodeRunner, and jQuery
    • Introduction to jQuery
    • Linking to the jQuery Library
    • Comparing jQuery and JavaScript
    • Why Use jQuery
    • jQuery Features
    • The jQuery.com Web Site
  • jQuery for Advanced Front-End Development Lesson 2 — Selecting and Manipulating Elements
    • Selecing Elements by Tag Name
    • Descendant Selectors
    • Class Selectors
    • jQuery Selectors: Going Beyond the Basics
    • jQuery Objects and JavaScript Objects
    • jQuery Methods and Chaining
    • Manipulating Element Style with css(), addClass(), and removeClass()
  • jQuery for Advanced Front-End Development Lesson 3 — Filtering Elements
    • Filtering jQuery Selector Results
    • The each() Method
    • Filtering Form Elements
    • Selecting Elements by Content
    • Checking and Unchecking Form Elements with jQuery
    • Adding New Elements to Your Page
  • jQuery for Advanced Front-End Development Lesson 4 — Manipulating Element Style
    • Getting Started with the css() Method
    • Viewing Your Style with the Web Inspector Developer Tool
    • The Box Model
    • Units of Measurement and jQuery css()
    • Setting Multiple CSS Properties with css()
    • Sizing Elements with jQuery
    • Adding, Removing, Querying, and Toggling Classes
    • Showing and Hiding Elements with jQuery
  • jQuery for Advanced Front-End Development Lesson 5 — Looping, Functions, and This
    • A Deeper Dive into each()
    • Comparing each() to a JavaScript Loop
    • Using the each() Function Parameters
    • Comparing Wrapped and Unwrapped Objects
    • Pay Attention to This
    • Replacing an Anonymous Function with a Named Function
    • Optimizing jQuery (Just a Bit More)
    • Don’t Use each() Unless It’s Absolutely Necessary
  • jQuery for Advanced Front-End Development Lesson 6 — Events
    • Setting Up Event Handlers with bind()
    • Using Event Shortcuts
    • Binding Multiple Events to One Handler with One bind()
    • Using hover()
    • Using Events to Hide and Show Elements
    • The Event Object
    • Selector Context
    • Keyboard Events
    • Building a Popover with jQuery
  • jQuery for Advanced Front-End Development Lesson 7 — Manipulating and Traversing Elements
    • Adding New Content to a Page
    • Adding Content with Append()
    • Comparing text() and html()
    • More Ways to Add Content
    • Removing Content
    • Traversing the DOM
    • Getting an Element’s Children
    • Getting an Element’s Parent
    • Getting and Element’s Next Sibling
    • Getting the First or Last Element in a Result Set
    • Finding Elements
    • Testing for Elements
  • jQuery for Advanced Front-End Development Lesson 8 — Positioning Elements in the Page
    • Element Metrics
    • Getting Some Elements in Place
    • Accessing Element Metrics with jQuery
    • Using Element Metrics to Create a Bar Chart
    • Adding Labels to the X and Y Axes
    • Adding the Data
  • jQuery for Advanced Front-End Development Lesson 9 — Effects
    • Using show() and hide() to Create a Tabbed Menu
    • Simple Effects with show() and hide()
    • Sliding Up and Down Effects
    • Customizing Effects with animate()
    • Repeating Effects with Timeouts
  • jQuery for Advanced Front-End Development Lesson 10 — jQuery UI Library
    • Using the Accordion Widget
    • Using jQuery UI Themes
    • Adding the Sortable Interaction to the Accordion
    • The Selectable Interaction
    • Using Selected Items
  • jQuery for Advanced Front-End Development Lesson 11 — jQuery and Ajax
    • Loading Data with load()
    • Options with load()
    • Using get()
    • Using getJSON() to Get JSON Data
    • Prevent Caching with ajaxSetup()
    • The Most Flexible Ajax Method: ajax()
  • jQuery for Advanced Front-End Development Lesson 12 — jQuery Utilities
    • jQuery and $
    • Dissecting a jQuery Statement
    • $() and the ready Function
    • Detecting Features with jQuery support
    • Utility Functions
    • Using the Latest and Greatest Version of jQuery