jQuery Snippets & Examples

jQuery snippets for DOM manipulation, cloning, delays, and form behavior. Assumes jQuery is loaded on the page.

jQuery is still widely used in legacy projects and content sites. These snippets show common patterns: selecting elements, cloning, delaying execution, and toggling button state or label text. For new projects you might prefer plain JavaScript; we keep this section for developers maintaining or extending jQuery-based code.

Clone an element with jQuery

var $clone = $(".box:first").clone();
$clone.css("background", randomColor);
$("#container").append($clone);

.clone() copies the element and its descendants. Chain .css() or other methods before appending to modify the clone. Pass true to .clone(true) to also copy event handlers.

Delay the start of a method with delay()

$("#msg").hide().text("Saved!").fadeIn(300).delay(2000).fadeOut(300);

.delay(ms) pauses the animation queue for the given milliseconds. Useful for “show message, wait, then hide” patterns. It only affects animations; for a plain timeout use setTimeout().

Disable a button with jQuery

$("#submitBtn").prop("disabled", true);   // disable
$("#submitBtn").prop("disabled", false);  // re-enable

Use .prop("disabled", true) so the button is disabled and won’t submit the form. Set to false to enable again. Prefer .prop() over .attr() for boolean properties.

Change label text

$("label[for='email']").text("Your email address");

Target the label by for attribute or by position relative to the input, then use .text() to set the visible text. Use .html() only if you need inner tags (and avoid user-controlled content to prevent XSS).

More jQuery topics

See also: JavaScript, Code Snippets.