How to select form input elements in jQuery
jQuery can select HTML DOM elements easily. For instance, if you have a form input element you can use the jQuery selector$('input[name="username"]') to interact with the element.
jQuery Date Picker for Birthdays
jQuery datePicker that will show a proper date of birth. In this case it ends on the current year and starts 90 years prior.
$().ready(function() { initMenus(); $('.datepicker').datepicker({ altFormat: 'yyyy-mm-dd', changeMonth: true, changeYear: true, yearRange: new Date().getFullYear()-90 + ":" + new Date().getFullYear() }); });
Open PopUp Window
$("a.myPopup").open({ width: 750, height: 500, scrollbars: true });
Prompt Visitor to Save Form before leaving a page
var isDirty = false;
var msg = 'If you leave, your information will NOT be saved.';
$(document).ready(function(){
$(':input').change(function(){
if(!isDirty){
isDirty = true;
}
});
$(':input').change(function(){isDirty = true;});
// BUT submitting the form should not prompt the warning.
$('#adult').submit(function(){isDirty = false;});
window.onbeforeunload = function(){
if(isDirty){
return msg;
}
};
});
Script Tag
The script tag always requires a matching close tag.
The scripting language is specified by the “type” attribute. Do not use the “language” attribute. HTML5 defaults to “text/javascript”.
XHTML files should use external script files or CDATA sections to allow special characters.
Dynamic script tag injections allow cross-site resource requests.
The “async” attribute causes a script to execute asynchronously from the rest of the page. It can also preserve order for dynamically inserted scripts.
The “defer” attribute can postpone script execution until the document is ready.
Move the script tags to the end of the body tag when possible.
Use external script files which can be cached and shared among pages.
Set Focus on First Input Field
$(':input:first').focus();
Swap Image using jQuery and CSS Class
$(function() {
$(".hoverswap").hover(
function () {
$(this).attr("src", $(this).attr("src").replace(/.png/, "_over.png"));
},
function () {
$(this).attr("src", $(this).attr("src").replace(/_over.png/, ".png"));
}
);
});
Swap a CSS Class with jQuery
$(function() {
$('.searchButton').hover(function() {
$(this).removeClass('searchButton');
$(this).addClass('searchButtonOver');
}, function() {
$(this).removeClass('searchButtonOver');
$(this).addClass('searchButton');
});
});
Tilt Images with jQuery
Plugins
Every javascript project you should be looking into
List.js: Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
watermark.js - watermarks in the browser
Select 2 The jQuery replacement for select boxes
Foresight-js | A js plugin to serve High Resolution images
Odometer — Transition numbers with ease
Clusterize.js: Display large data sets easily
Moment.js - A lightweight javascript date library
Stretchy: Form element autosizing, the way it should be.
gmaps.js — the easiest way to use Google Maps
Loud Links - A simple tiny Javascript library to add interaction sounds to your website
Retina.js | Retina graphics for your website
jQuery plugin that converts Alt-texts into simple image labels
Further Reading
Looking for a good tutorial on Javascript? Check out this JavaScript Tutorial where you can learn about:
- JavaScript Basics like Introduction, Variables, Arrays, Loops, Conditional Statements.
- Functions, Cookies, DOM, and Events in JavaScript.
- advanced topics like Object Oriented JavaScript, Internal & External JavaScript, and JavaScript Examples.
The Best JavaScript Courses - check out this summary of the best courses based on over 2000 real user reviews.
Here is a collection of articles to read to help you with your coding:
Introduction to JavaScript (by Guru99)
jQuery Tips Everyone Should Know
JavaScript pattern and antipattern collection
JavaScript’s this: how it works, where it can trip you up
24 ways: Your jQuery: Now With 67% Less Suck
Learning JavaScript Design Patterns
How Javascript Loading Works - DOMContentLoaded and OnLoad
1 Way To Avoid the Flash of Unstyled Content
Learn jQuery with practical examples that you can use every day!
Seven JavaScript Quirks I Wish I’d Known About
Everything you wanted to know about JavaScript scope
Articles To Read
- 10 Best jQuery and HTML5 WYSIWYG Plugins
- 10 Great Layout jQuery Plugins - eWebDesign
- 10 jQuery Plugins for Social Sharing Buttons | jQuery By Example
- 10 jQuery Tagging and Tag Clouds | jQuery4u
- 20 Awesome jQuery Sliders - Vandelay Design
- 20+ Uniquely Cool jQuery Plugins and Tutorials
- 240 plugins jquery | sastgroup.com
- 5 Things You Should Stop Doing With jQuery | Flippin' Awesome
- 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding | Smashing Coding
- A Cool Login System With PHP MySQL & jQuery | Tutorialzine demo
- A Guide to the jQuery animate() Method
- A jQuery responsive images plugin to help ease the transition | Jquery Picture
- Ajax Image Upload and Resize with jQuery and PHP
- Animated background image with jQuery | CatsWhoCode.com
- Animated Text and Icon Menu with jQuery
- Awkward Showcase – A jQuery Plugin | Awkward Group - Digital Production Agency
- Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page
- Beautiful Background Image Navigation with jQuery | Codrops
- Best of jQuery Image Gallery and Slideshow Plugins | ResourcesMix.info
- boedesign – canadian based web developer eh » Blog Archive » Gritter for jQuery (Growl)
- Bootstrap Filestyle - jQuery Customization of input html file for Bootstrap Twitter
- Building a better web forms: Context highlighting using jQuery
- Chained Selects jQuery Plugin
- Checking Numbers and File Extensions with jQuery`s Validator Plug-in
- Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better
- Chosen - a JavaScript plugin for jQuery Select Boxes
- Circliful – jQuery Circle Statistics Plugin | jQuery Plugins
- Colorbox - a jQuery lightbox
- ColorBox - customizable lightbox plugin for jQuery
- Commonly Confused Bits Of jQuery - Smashing Magazine
- CompareNetworks jQuery'd Bread Crumb - jBreadCrumb
- Cool Dropdown Login Form with jQuery | login and signup form,form
- Create a Slick and Accessible Slideshow Using jQuery
- Create astonishing iCal-like calendars with jQuery | Stefano Verna
- Creating Multipage Websites in jQuery Mobile | Multipage Template | Peachpit
- Creating Nice Notifications with jQuery
- Cute File Browser with jQuery and PHP | Tutorialzine
- DataTables (table plug-in for jQuery)
- DataTables (table plug-in for jQuery)
- DataTables (table plug-in for jQuery)
- DesignModo20 Useful jQuery Plugins for Responsive Web Design - DesignModo
- Diapo | a free jQuery slideshow by Pixedelic
- Don’t let jQuery’s $(document).ready() slow you down | Encosia
- Drag & Drop with PHP & jQuery | Papermashup.com
- Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more
- Elegant Code » Playing with JQuery Validation library
- Essential jQuery Plugin Patterns - Smashing Coding
- fancyBox - Fancy jQuery Lightbox Alternative
- Flexigrid - Web 2.0 Javscript Grid for jQuery
- FlexSlider - The Best Responsive jQuery Slider
- Flip! A jQuery plugin v0.9.9
- Flow Slider - Home - Flow Slider - jQuery plugin
- Fly-To-Basket Effect With jQuery
- Form Validation using jQuery
- Freewall - jQuery plugin for creating grid layouts
- Gecko CMS 2.2 - Gecko CMS (PHP, MySQL, jQuery, Bootstrap3)
- gMap - Google Maps Plugin For jQuery | About
- Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript
- Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript
- HeatColor, a jQuery plugin
- Hello jQuery Mobile » BuildMobile
- Home - Tooltip your images - iPicture jQuery Plugin
- HoverAccordion jQuery Plugin
- HoverAttribute jQuery plugin « afEkenholm Web Design
- How to Create a Showcase with jQuery » JavaScript, jQuery » Design Festival
- How to Use jQuery's $.ajax() Function
- http://www.gmarwaha.com/jquery/jcarousellite/?#download
- I know jQuery. Now what?
- Image Gallery and jQuery Slideshow – TN3 Gallery
- Image Zoom Tour with jQuery | Codrops
- Improve your jQuery - 25 excellent tips
- In the Woods – 7 Things I Wish I Had Known About jQuery
- Ingrid, the jQuery Datagrid.
- Input & Textarea Character Limit Display with jQuery - Web Development Blog
- Introduction to jCanvas: jQuery Meets HTML5 Canvas
- Introduction to jQuery basic 2 - Hungred Dot Com
- Is jQuery Too Big For Mobile? | Flippin' Awesome
- Janko At Warp Speed | Fade colors using jQuery
- jdMenu Hierarchical Menu Plugin for jQuery » jdsharp.us
- Jendro Design » Reusable Jquery Toggle
- jMosaic - jQuery plugin for align elements
- jPhotoGrid - A Beautify jQuery Image Gallery
- jQSlickWrap - Slick text wrapping for jQuery
- jQuery 1.4.x’s Greatest Hits: Earle’s Picks
- jQuery 1.6 Cheatsheet by Future Colors
- jQuery BlockUI Plugin
- jQuery Bootstrap Plugins | jQuery Script
- jQuery Builder
- jQuery Cards - A hand selected repository of cool jQuery Plugins
- jQuery CollagePlus - an image gallery plugin by Ed Lea
- jQuery Contact Form with PHP & jQuery Validation
- JQuery Corner Demo
- jQuery Credit Card Format Valiation Plugin: Smart Validate | EGrappler
- jQuery DivCorners
- jQuery Drop Down Menu - Simple JavaScript Plugin « Scripts and Tricks « JavaScript DHTML Tutorials
- JQuery File Upload Plugin Script - JQuery File Upload Script - Uploadify
- JQuery Form Wizard
- jQuery From Scratch: jQuery Rollovers Using “this” » ShopDev Website Design Blog
- jQuery Fundamentals :: A guide to the basics of jQuery
- jQuery Grab-Bag: 10 New Plugins
- jQuery HighchartsTable plugin, from PMSIpilot
- jQuery Impromptu
- jQuery Inline Edit tutorial | Yelotofu
- Jquery Inline Form Validation Engine
- jQuery lightbox for images, videos, YouTube, iframes | Stéphane Caron – No Margin For Errors
- jQuery lightBox plugin
- JQuery lightSlider
- jQuery liScroll - a jQuery News Ticker
- jQuery listmenu plugin - javascript list navigation menu control
- jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready | Filament Group, Inc., Boston, MA
- jQuery Notebook Demo
- jQuery Photoset Grid - Style Hatch
- jQuery plugin for Avgrund concept popin
- jQuery plugin for FileAPI
- jquery plugin gifplayer play and stop animated gifs.
- JQuery Plugin: imBookFlip. Page Turning without Flash | GrasshopperPebbles.com
- jQuery plugin: Tablesorter 2.0
- jQuery plugins · Bootstrap Form Helpers
- jQuery Plugins | Treehouse Blog
- jQuery PointPoint – A Plugin For Pointing To Things | Tutorialzine
- jQuery Resizable Columns
- jQuery Scratchie Plugin » alexweber.com.br
- jQuery Select Box Components - Chosen vs Select2
- jQuery Shadow Plugin
- jQuery Simple Slider
- jQuery Slider Evolution: JavaScript Image Sliders - Unheap
- jQuery Sparklines
- jQuery Star Rating Plugin v4.11 (2013-03-14)
- jQuery Tips and Tricks - Hungred Dot Com
- jQuery TOOLS - The missing UI library for the Web
- jQuery UI 1.7.2 Themes List at Google Code
- jQuery UI Touch Punch - Touch Event Support for jQuery UI
- jquery-frontier-calendar - Project Hosting on Google Code
- jquery-transmit - jQuery Multi-file Uploader with Flash - Google Project Hosting
- jquery.hovergrid
- jQuery.Shapeshift
- jQuery.Shapeshift Demo
- jQuery.sheet - The Web's Spreadsheet
- jTable.org - A JQuery plugin to create AJAX based CRUD tables - jTable Demos and Examples
- Kwicks for jQuery
- Lightbox_me - Stupidly Simple Lightboxing - The jQuery lightbox plugin for people who know what they're doing.
- Link to open jQuery Accordion - Stack Overflow
- List of Useful jQuery Plugins: jQuery, JavaScript
- markItUp! Universal Markup jQuery Editor
- MediaTable | Responsive Table | Plugin jQuery | www.consulenza-web.com
- Mobile Photo Album JQuery Plugin | Digicrafts Flash Components for Carousel Menu, Cover Flow Gallery, Slideshow, FLV Player, Banner Rotator
- More Top jQuery Plugins for Menus
- Mosaic - Sliding Boxes and Captions jQuery Plugin
- myphpetc: jQuery - inline editing/ add new row with tablesorter plugin
- nestedSortable jQuery Plugin
- Nivo Slider - The Most Awesome jQuery Image Slider
- Opensource - AJAX - Jqtransform - jQuery form plugin
- Pajinate – A jQuery Pagination Plugin « The Silver Lining
- Plugins/Validation/validate - jQuery JavaScript Library
- Redactor WYSIWYG editor on jQuery
- Responsive Img - a jQuery Plugin for Responsive Images
- Responsive Lazy Loading plugin for JQuery | BttrLazyLoading
- ResponsiveSlides.js · Responsive jQuery slideshow
- Sequence.js - The jQuery Slider Plugin with Infinite Style
- Seven jQuery Plugins That Let You Do Cool Stuff With Images
- Shadow animation jQuery-plugin
- Sidr - A jQuery plugin for creating side menus
- Skippr. A jQuery plugin for creating tasteful slideshows.
- Smooth scroller based on mouse position (Jquery) - Stack Overflow
- Snipt - public - jquery | Share and store code or command snippets.
- SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets | Filament Group, Inc., Boston, MA
- Sort & Vote – A jQuery Poll – Tutorialzine
- Star Rating Control with jQuery
- stickUp - a free jQuery Plugin
- stickyMojo contained fixed position sticky sidebar jquery plugin
- Supersized - Full Screen Background Slideshow jQuery Plugin
- Tags Manager jQuery plugin which work nicely with Bootstrap from Twitter
- The 50 Most Useful jQuery Plugins from 2013
- The jFlip plugin - jQuery.info
- The Total Newbie’s Guide to jQuery, Part II: Progressive Enhancement and the DOM
- These Days Labs » jQuery » clearField
- timer - Jquery image fadein delay by X - Stack Overflow
- Tiny Inline Edit Plugin For jQuery
- Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
- Tutorials:Wrapping Images With A Drop Shadow - jQuery JavaScript Library
- Unheap - A tidy repository of jQuery plugins
- Uniform - Sexy forms with jQuery
- Uploadify Demo - Try Out Our Multiple File Upload Jquery Script
- Using jQuery for Background Image Animations - Snook.ca
- Validating Digits and Dates with jQuery`s Validator Plug-in
- Web Dev .NET: Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()
- Web Dev .NET: Don't Initialize All the Things in jQuery.ready()
- Web Developer Blog: jQuery Documentation
- X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
- You Might Not Need jQuery
- DevTools Snippets
- Why You Need a JavaScript Project Checklist
This page contains information I gathered and thought were very useful. See more notes on the web.
Just to let you know, this page was last updated Sunday, Nov 03 24