jQuery Fundamentals Back to top jQuery is fast becoming a must-have skill for front-end developers. The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study. This is a hands-on class. We will spend a bit of time covering a concept, and then you’ll have the chance to work on an exercise related to the concept. Getting the Code The code we’ll be using in this book is hosted in a repository on Github. Software You'll want to have the following tools to make the most of the class: The Firefox browser The Firebug extension for Firefox A plain text editor For the Ajax portions: A local server (such as MAMP or WAMP), or an FTP or SSH client to access a remote server. Adding JavaScript to Your Page JavaScript Debugging
You Might Not Need jQuery jQuery Tutorial - An Ultimate Guide for Beginners jQuery is a powerful and widely used JavaScript library to simplify common web scripting task. jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle "write less, do more". It's easy-to-use APIs makes the things like HTML document traversal and manipulation, event handling, adding animation effects to a web page much simpler that works seamlessly across all the major browsers like Chrome, Firefox, Safari, Internet Explorer, etc. jQuery also gives you the ability to create an Ajax based application in a quick and simple way. Big companies like Google, Microsoft and IBM are using the jQuery for their applications. So you can easily understand how popular and powerful the jQuery is? jQuery was originally created by John Resig in early 2006. You can save a lot of time and effort with jQuery. What You Can Do with jQuery There are lot more things you can do with jQuery. You can easily select elements to perform manipulation. Advantages of Using jQuery
How to program a calculator with jQuery Previously, I showed you how to use CSS border-radius property to create the following calculator. Now I will show you how to use jQuery to implement the functionality of the calculator. Adding jQuery We will be using jQuery in this project to respond to events when a user clicks on a button. We need to add the jQuery library to our application. At the bottom of my index.html file, I will add the following script tag: Handling operator vs number buttons Before writing my code, I decided to brainstorm how I would handle the functionality behind the calculator. A number button would correspond to the numbers 0–9. Global variables for our operation The next step is to determine how may global variables we will need. Likewise, a user can enter this much longer sequence: When considering global variables initially, we might consider creating a new variable every time the user presses a key. To improve on this, we can simplify things to only need four global variables: num1num2operatortotal Summary
jQuery Cheat Sheet OverAPI.com Resource Online Official Website Download jQuery 1.5 Visual Cheat Sheet [.pdf] Related Selectors Attribute Forms Basics Visibility Filters Basic Filters Child Filters Content Filters Hierarchy Attributes / CSS Attributes Dimensions Offset Data Manipulation Copying .clone() DOM Insertion, Around DOM Insertion, Inside DOM Insertion, Outside DOM Removal DOM Replacement Traversing Filtering Miscellaneous Traversing Tree Traversal Events Event Object Mouse Events Browser Events Document Loading Event Handler Attachment Form Events Keyboard Events Effects Custom Fading Sliding Ajax Global Ajax Event Handlers Helper Functions Low-Level Interface Shorthand Methods Core jQuery Object DOM Element Methods Internals Deferred Object Callbacks Object Utilities Utilities Ad
jQuery GUI Manipulation – HTML5 Hive Basic knowledge of HTML5 and CSS3. Some exposure to JavaScript and jQuery is recommended but not required. In this tutorial, we will build a simple price calculator with HTML5 and CSS3. Then we will use jQuery to streamline the interface by the allowing the calculator’s only button to perform a simple calculation and reset the text fields. We will also use jQuery for the program logic that performs the calculation. To complete this tutorial, you will need a text editor. For simplicity’s sake I recommend creating a simple folder structure for the project. Let’s create the basic HTML5 document structure and the css file for the project. Open Notepad++. Create another new file by clicking on the New File icon in the upper left corner of the Notepad++ window (it looks like a white sheet of paper next to a green circle and a white + symbol inside the circle). Save the new 2 file in the css folder and name this file styles.css. Now we’re ready to start writing our HTML5 page. Source Code:
FlexNav - A jQuery Plugin for Responsive Menus A Device-Agnostic Approach to Complex Site Navigation The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav). Download on GitHub → Basic Usage Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"><li>... Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div> Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" /> Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script> Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav(); Options
Sidr - Berriart You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own. Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN If you want to load the scripts from a CDN to save bandwith or improve the performance you can use jsDelivr. Demos & Usage Here are described differents ways of usage for this plugin, you can read and adapt them to your website’s requeriments. The Simplest Usage Create a div called sidr and place your menu there. Cookbook