Checklists > Javascript (and jQuery)

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');
});
});

Further Reading

Here is a collection of articles to read to help you with your coding:

JavaScript Garden

Javascript Cheat Sheet

JavaScript pattern and antipattern collection

jQuery Cheat Sheet

Common Javascript Tricks

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

Articles I Should Read  Further