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

TECHNIQUE
jQueryRotate first steps
 
 
//step02//
 
//code//
 
 
 
...
 
 
//step03//
 
//code//
 
 
//step04//
  
//code//
 
 
//step05//
 
//code//
$("#image2").rotate({
                      
bind:{
                      
mouseover : function() {
$(this).rotate(45);                      
mouseout : function() {
$(this).rotate(0);
}
});
 
//step06//
//code//
$("#image3").rotate({
                      
bind:{
                      
mouseover : function() {
$(this).rotate({animateTo:210})},
                      
mouseout : function() {
$(this).rotate({animateTo:0})}
}
});
 
//step07//
 
//code//
var angleVal=0;
setInterval(function(){
angleVal+=3;
$("#image4").rotate(angleVal);
},20);
 
//ENDS//
 
Source: Web Designer Mag Issue 212 LIGHTBOX WORKSHOP _ AXEL AUBERT

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)

JavaScript Garden

jQuery Tips Everyone Should Know

jQuery UI Widgets vs. HTML5

Javascript Cheat Sheet

JavaScript pattern and antipattern collection

jQuery Cheat Sheet

Common Javascript Tricks

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

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