jQuery and forms

Selecting form controls with jQuery selectors

jQuery selector working with forms are not always the fastest option to select elements: when you use them remember to reduce the number of elements jQuery needs to look through. Orthewise, use common CSS selectors

Example of use of jQuery selectors for forms

/* to start, select all form descendants,
   then, use the filter() method on the initial selection */
var $formDescs = $('form *');

/* :input selects all button, input, select and textarea */
var $inputs = $formDescs.filter(':input');
  
/* :text selects input type="text" and input */  
var $text = $inputs.filter(':text'); 

/* :password selects input type="password" */
var $password = $inputs.filter(':password');   

/* :button selects button and input type='button' */
var $button = $inputs.filter(":button");  

/* :checked selects all checked inputs from group of radio and check inputs */
var checked = $inputs.filter(":checked");

/* :selected selects all selected options from drop boxes */
var selected = $inputs.filter(":selected"); 

jQuery Effects

Effects

jQuery effects includes transitions and movements

• show and hide elements
• animate elements with fade in and fade out
• animate elements with slide up and slide down

	jQuery method	method meaning
Basic Effects	$('selector').show()	set the display CSS property to element's default value
	$('selector').hide()	set the display CSS property to none
	$('selector').toggle()	toggle between showing and hiding elements
Fading Effects	$('selector').fadeOut()	make element disappear by changing both opacity and display CSS properties
	$('selector').fadeIn()	make element appear by changing both opacity and display CSS properties
	$('selector').fadeTo()	change the opacity CSS property
	$('selector').fadeToggle()	hide or show the element
Sliding Effects	$('selector').slideUp()	hide the element with sliding movement
	$('selector').slideDown()	show the element with sliding movement
	$('selector').slideToggle()	hide or show the element
Custom Effects	$('selector').delay()	delay the execution of the following method
	$('selector').stop()	stop the animation
	$('selector').animate()	create a custom animation

jQuery Traversing and Filtering

DOM Traversing

The jQuery methods for traversing the DOM allow to access other element nodes relative to the initial selection.

jQuery method	method meaning
$('selector').find('selector2')	all the elements in the current selection matching selector2
$('selector').closest('selector2')	the nearest ancestral element matching selector2
$('selector').parent()	the direct parent element of current selection
$('selector').parents()	all the parents of current selection
$('selector').children()	all the children of current selection
$('selector').next()	next sibling of current element
$('selector').prev()	previous sibling of current element

jQuery and events

Checking When a Page is Ready For Your Code

The ready() method executes its function argument when the page is ready to work

$(document).ready(function(){
  // function body
});

• Behind the scenes, the ready() method add a listener for DOMContentLoaded events or for load events (in browsers that do not support HTML5 events a load event is fired instead)

There is a shorthand code for the ready() method:

$(function(){
  // function body
});

If you do not wish to use jQuery but still run your code when the page is ready to work, place your script before the body closing tag.

Scripting DOM and CSS with jQuery

Getting and Setting Element Content

The .html() and .text() methods retrive and update the content of elements.

How To Retrieve Element Content

jQuery method	method meaning
html = $('selector').html()	get the HTML content of the first element in the jQuery selection
text = $('selector').text()	get the textual content from every element in the jQuery selection and any descendant