Category: Bringing pages to life with jQuery

With the techniques learned in this lesson, you’re able to copy elements, move them, replace them, or even remove them. You can also append, prepend, or wrap any element or set of elements on the page. In addition, we discussed how to manage the values of form elements, all leading to powerful yet succinct logic.…

Because form elements have special properties, jQuery’s core contains a number of convenience functions for activities such as these: What’s a form element? When we use the term form element, we’re referring to the elements that can appear within a form, possess name and value attributes, and whose values are sent to the server as HTTP request parameters when the…

One more way that you can manipulate the DOM is to make copies of elements to attach elsewhere in the tree. jQuery provides a handy wrapper method for doing so with its clone() method. Method syntax: clone clone([copyHandlersAndData[, copyChildrenHandlersAndData]]) Creates a deep copy of the elements in the jQuery collection and returns a new jQuery collection that…

Sometimes you might need to remove elements that are no longer needed. If you want to remove a set of elements and all their content, you can use the remove() method, whose syntax is as follows. Method syntax: remove remove([selector]) Removes all elements and their content in the set from the page, including event listeners attached and…

Another type of DOM manipulation that you’ll often need to perform is to wrap an element (or a set of elements) in some markup. You might want to wrap all links of a certain class inside a <div>. You can accomplish such DOM modifications by using jQuery’s wrap() method. Method syntax: wrap wrap(wrapper) Wraps the elements in the…

When it comes to modifying the contents of elements, there are a lot of different methods you can employ, depending on the type of the text you want to inject. If you’re interested in setting a text whose content should not be parsed as markup, you can use properties like textContent or innerText, depending on the browser. Once…

jQuery provides two methods for getting the position of an element. Both of these methods return a JavaScript object that contains two properties: top and left, which indicate the top and left values of the element. The two methods use different origins from which their relative computed values are measured. One of these methods, offset(), returns the position relative…

When it comes to CSS styles that you want to set or get on your pages, is there a more common set of properties than the element’s width or height? Probably not, so jQuery makes it easy for you to deal with the dimensions of the elements as numeric values rather than strings. Specifically, you…

Modifying the class of an element allows you to choose which predetermined set of defined style sheet rules should be applied. But sometimes you only want to set the value of one or very few properties that are unknown in advance; thus a class name doesn’t exist. Applying styles directly on the elements (via the style property…

In the previous lesson, we mentioned that the className property is an example of a case where markup attribute names differ from property names. But, truth be told, class names are a bit special in other respects as well and are handled as such by jQuery. This section describes a better way to deal with class names…