'Write less, do more!' is the moto of the jQuery JavaScript development team. The free open source development platform is an essential skill for any web site. Leveraging the power of jQuery will teach you how to integrate jQuery into existing sites, understand how it works and send you on your first steps of jQuery application development. Developed as a vendor neutral course it is suitable for existing Javascript developers or experienced web application developers.
The course focuses on understanding and building with jQuery and examining some of the most useful extensions to the core, such as jQueryUI and a variety of plugins allowing a developer to hit the ground running as soon as the course is over.
Önkoşullar
- Delegates for this course require a good understanding of HTML, CSS the DOM and Javacript. Equivalent to the skills obtained by attending HTML for Programmers or Building an Effective Web Site and Web Programming with JavaScript.
Please note: Before attending this class delegates must have a Microsoft account (signing up one is free).
- Delegates for this course require a good understanding of HTML, CSS the DOM and Javacript. Equivalent to the skills obtained by attending HTML for Programmers or Building an Effective Web Site and Web Programming with JavaScript.
Please note: Before attending this class delegates must have a Microsoft account (signing up one is free).
Module 1 - Introducing jQuery
- What is jQuery?
- Selecting elements with jQuery
- Manipulating properties with jQuery
- Events with jQuery
Module 2 - JavaScript and CSS for Developers
- The DOM
- CSS Selectors
- CSS Positioning
- JavaScript types
- JavaScript Functions
- Creating Custom Objects
- Javascript Object Notation (JSON)
Module 3 - Selectors and Events
Unleashing the power of selectors
- The $() factory function
- Basic selectors
- Child selectors
- Attribute selectors
- jQuery selectors
Modifying content
- Adding new elements
- Removing elements
- Modifying element values
Module 4 - Enhancing appearance
From HTML to DOM
- Understanding the DOM
- NodeList objects
The ready() function
Manipulating CSS
- Reading CSS attributes
- Adding CSS attributes
- Removing CSS attributes
Controlling visibility
- The show() function
- The hide() function
Module 5 - Animation
Simple animation
- Fading in and out
- Toggling
- Hide, show and toggle effects
- Effect options
The animate function
- CSS attribute animation
- Animating colour
- Easing
- jQuery UI easing
- The animation queue
Module 6 - Scrolling and Resizing
Scaling
- The scroll event
- Creating a custom scroll box
Resizing
- Calculating position
- Dynamic layouts
- Resizing using jQuery UI
Module 7 - Menus and Tabs
- Building drop down menus
- Designing with a CSS fall back
- jQueryUI menus
- jQueryUI accordions
- jQueryUI tabs
Module 8 - Drag, drop and sorting
- jQueryUI draggable
- Draggable options, events and methods
- jQueryUI droppable
- Droppable options, events and methods
- Droppable tolerance
- jQueryUI sortable
- Sortable options, events and methods
- Sortable portlets
Module 9 - Forms
Form selectors
- Change, blur and focus events
- The submit event
- The validation plugin
- Autocomplete functions
jQuery UI controls
- Date pickers
- Sliders
- Dialog Boxes
Module 10 - AJAX
- What is Ajax?
- Ajax enabling technologies
- XMLHttpRequest object
- Remote HTML using .load()
- Handling future elements
- Getting JSON data
- Global Ajax event handlers
- The jqXHR object
- Defers and Promises
- Combining Promises
Module 11 - jQuery Plugins
- Stages for creating a plugin
- Creating the code and enabling Chaining
- jQuery $.extend
- Creating plugin options
- jQuery Widget Factory
Module 12 - jQuery Mobile Overview
- What is jQuery Mobile?
- How jQuery Mobile Works
- API's and Components
- Basic Page Template
- Links and Dialogs
- Navigation, Tabs and Buttons
- Forms and Listviews
- Popups
- Transitions and Ajax
- Responsive design
Module 13 - jQuery Mobile Theming
Theming
- The Default Theme
- Applying a Theme
- Icons
- Styling Forms
- Styling Selects
- Styling ListViews
Positioning and Layout
- Headers and Footers
- Multi-Column Layouts
- Collapsible Content